关于js树形方法封装的心得
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="app"></div>
</body>
<script>
let Arr=[
{
id: '1',
menu_name: '设置',
menu_url: 'setting',
parent_id: 0
}, {
id: '1-1',
menu_name: '权限设置',
menu_url: 'setting.permission',
parent_id: '1'
}, {
id: '1-1-1',
menu_name: '用户管理列表',
menu_url: 'setting.permission.user_list',
parent_id: '1-1'
}, {
id: '1-1-2',
menu_name: '用户管理新增',
menu_url: 'setting.permission.user_add',
parent_id: '1-1'
}, {
id: '1-1-3',
menu_name: '角色管理列表',
menu_url: 'setting.permission.role_list',
parent_id: '1-1'
}, {
id: '1-2',
menu_name: '菜单设置',
menu_url: 'setting.menu',
parent_id: '1'
}, {
id: '1-2-1',
menu_name: '菜单列表',
menu_url: 'setting.menu.menu_list',
parent_id: '1-2'
}, {
id: '1-2-2',
menu_name: '菜单添加',
menu_url: 'setting.menu.menu_add',
parent_id: '1-2'
},
{
id: '2',
menu_name: '订单',
menu_url: 'order',
parent_id: 0
}, {
id: '2-1',
menu_name: '报单审核',
menu_url: 'order.orderreview',
parent_id: '2'
}, {
id: '2-2',
menu_name: '退款管理',
menu_url: 'order.refundmanagement',
parent_id: '2'
}
]
console.log(Arr)
const t0 = performance.now();
let treeList = Arr.reduce((prev, cur) => {
prev[cur['id']] = cur;
return prev
}, {})
console.log(treeList)
//通过引用类型原理实现
let result = Arr.reduce((prev, cur) => {
let pid = cur.parent_id;
// pid为0的就找不到父对象，找到当前cur的父对象
// 对象的浅拷贝，引用关系存在，在后面处理parent的时候也会导致cur的改变，达到递归的效果
let parent = treeList[pid]
// console.log(parent,1)
// 如果父对象存在，就将cur压到父对象的children属性中
if (parent) {
// parent和cur存在引用关系
parent.children ? parent.children.push(cur) : parent.children = [cur]
} else if (pid === 0) {
// 没有父对象，则此cur为树的根元素
prev.push(cur)
}
return prev
}, [])
const t1 = performance.now();
console.log(t1 - t0, 'milliseconds');
console.log(result)
function toTree2(data) {
let result = [];
let obj = {};
data.forEach(item => {
obj[item.id] = Object.assign(item, obj[item.id] || {});
if (item.parent_id) {
let parent = obj[item.parent_id] || {};
parent.child = parent.child || [];
parent.child.push(item);
obj[item.parent_id] = parent;
} else {
result.push(obj[item.id])
}
})
return result;
}
const t3 = performance.now();
console.log(toTree2(Arr))
const t4 = performance.now();
console.log(t4 - t3, 'milliseconds');
function toTree3(items) {
const result = []; // 存放结果集
const itemMap = {}; //
for (const item of items) {
const id = item.id;
const parent_id = item.parent_id;
if (!itemMap[id]) {
itemMap[id] = {
children: [],
}
}
itemMap[id] = {
...item,
children: itemMap[id]['children']
}
const treeItem = itemMap[id];
if (parent_id === 0) {
result.push(treeItem);
} else {
if (!itemMap[parent_id]) {
itemMap[parent_id] = {
children: [],
}
}
itemMap[parent_id].children.push(treeItem)
}
}
return result;
}
const t5 = performance.now();
console.log(toTree3(Arr))
const t6 = performance.now();
console.log(t6 - t5, 'milliseconds');
</script>
</html>
三种不同封装方式，性能有很大差异，可以自己在本地跑起来测试
标签：封装,cur,parent,menu,js,item,树形,const,id 来源： https://www.cnblogs.com/wuxu-dl/p/16408861.html