更新于
数组转树,防抖节流
1.数组转树
/**
* 把平铺的数组结构转成树形结构
*/
const arr = [
//pid是说他的父节点的id
{ id: "01", name: "张大大", pid: "", job: "项目经理" },
{ id: "02", name: "小亮", pid: "01", job: "产品leader" },
{ id: "03", name: "小美", pid: "01", job: "UIleader" },
{ id: "04", name: "老马", pid: "01", job: "技术leader" },
{ id: "05", name: "老王", pid: "01", job: "测试leader" },
{ id: "06", name: "老李", pid: "01", job: "运维leader" },
{ id: "07", name: "小丽", pid: "02", job: "产品经理" },
{ id: "08", name: "大光", pid: "02", job: "产品经理" },
{ id: "09", name: "小高", pid: "03", job: "UI设计师" },
{ id: "10", name: "小刘", pid: "04", job: "前端工程师" },
{ id: "11", name: "小华", pid: "04", job: "后端工程师" },
{ id: "12", name: "小李", pid: "04", job: "后端工程师" },
{ id: "13", name: "小赵", pid: "05", job: "测试工程师" },
{ id: "14", name: "小强", pid: "05", job: "测试工程师" },
{ id: "15", name: "小涛", pid: "06", job: "运维工程师" },
];
//递归法
function toTree(list, parId) {
let len = list.length;
function loop(parId) {//返回输入的节点下面所有子节点
let res = [];
for (let i = 0; i < len; i++) {
let item = list[i];
if (item.pid === parId) {
//.children表示父子关系,让树形成
item.children = loop(item.id);//找子节点的子节点
res.push(item);
}
}
return res;
}
return loop(parId);
}
let result = toTree(arr, "");
console.log(result);
// hash法
function toTreeHash(list) {
const res = [];
const map = {};
// of遍历值(也就是下方的value对象),in遍历key
// 1. 先遍历一遍数组,把每个元素的 id 映射为节点对象
for (const item of list) {
map[item.id] = { ...item, children: [] };
}
// 此时大概是这样:map={
// "01":{
// id:"01",
// name:"张大大",
// children:[]
// },
// "02":{
// id:"02",
// name:"小亮",
// children:[]
// }
}
// 2. 再遍历数组,将节点放入其父节点的 children 中
for (const item of list) {
const node = map[item.id];
if (item.pid) {
if (!map[item.pid]) continue; // 防御性处理,避免写了pid,但是找不到这个pid对应的节点而报错
map[item.pid].children.push(node);
} else {
res.push(node); // pid为空字符串(false),就是根节点
}
}
return res;
const tree = toTreeHash(arr);
console.log(tree);
// 优势说明
// 时间复杂度:O(n),因为我们只遍历两次 arr;
// 利用了哈希表 map 进行父子节点的快速定位与组装;
// 比递归版本更适用于大数据量场景;
// 不依赖元素顺序,结构更健壮。
评论
使用 GitHub 登录后即可参与讨论。
不可发布任何违反中华人民共和国有关法律的内容。违者评论将被删除且拉黑处理。