在日常开发工作中，我们经常碰到将线性的数据转换成树的需求，今天给大家分享一个简单的转换算法。

数据结构

下面是我们转换前的数据：

[{"id":1,"parent_id":0,"name":"四川省"},{"id":2,"parent_id":0,"name":"广东省"},{"id":3,"parent_id":0,"name":"江西省"},{"id":5,"parent_id":1,"name":"成都市"},{"id":6,"parent_id":5,"name":"锦江区"},{"id":7,"parent_id":6,"name":"九眼桥"},{"id":8,"parent_id":6,"name":"兰桂坊"},{"id":9,"parent_id":2,"name":"东莞市"},{"id":10,"parent_id":9,"name":"长安镇"},{"id":11,"parent_id":3,"name":"南昌市"}
]
复制代码

我们转换后的结果是：

[{"id":1,"parent_id":0,"name":"四川省","children":[{"id":5,"parent_id":1,"name":"成都市","children":[{"id":6,"parent_id":5,"name":"锦江区","children":[{"id":7,"parent_id":6,"name":"九眼桥"},{"id":8,"parent_id":6,"name":"兰桂坊"}]}]}]},{"id":2,"parent_id":0,"name":"广东省","children":[{"id":9,"parent_id":2,"name":"东莞市","children":[{"id":10,"parent_id":9,"name":"长安镇"}]}]},{"id":3,"parent_id":0,"name":"江西省","children":[{"id":11,"parent_id":3,"name":"南昌市"}]}
]
复制代码

实现代码

let array = [{id: 1,parent_id: 0,name: "四川省"},{id: 2,parent_id: 0,name: "广东省"},{id: 3,parent_id: 0,name: "江西省"},{id: 5,parent_id: 1,name: "成都市"},{id: 6,parent_id: 5,name: "锦江区"},{id: 7,parent_id: 6,name: "九眼桥"},{id: 8,parent_id: 6,name: "兰桂坊"},{id: 9,parent_id: 2,name: "东莞市"},{id: 10,parent_id: 9,name: "长安镇"},{id: 11,parent_id: 3,name: "南昌市"}
]function listToTree(list) {let map = {};list.forEach(item => {if (! map[item.id]) {map[item.id] = item;}});list.forEach(item => {if (item.parent_id !== 0) {map[item.parent_id].children ? map[item.parent_id].children.push(item) : map[item.parent_id].children = [item];}});return list.filter(item => {if (item.parent_id === 0) {return item;}})
}
console.log(listToTree(array));
复制代码

分析

这段代码的核心就在 listToTree 方法中，这个方法分为了三个部分：

第一部分

第一部分先将数组中的所有元素都复制到 map 中(注意：这里是引用复制哦，这个细节很重要)。

第二部分

执行第二次遍历前的 map:

// map
{...,"3":{"id":3,"parent_id":0,"name":"江西省"},...
}
复制代码

然后这个时候遍历 parent_id 不等于 0 的元素：

[...,{id: 11,parent_id: 3,name: "南昌市"},...
]
复制代码

然后发现南昌市有 parent_id，我们再给 map[item.parent_id] 设置子元素，通过南昌市的 parent_id 可以推导出：

map["3"].children ? map["3"].children.push(item) : map[3].children = [item];
复制代码

上面的代码判断了是否存在 children，如果不存在则直接给它赋值，否则将值 push 到 children 中。

执行完第二步后，我们已经把子节点添加到了它的父节点上，但是我们并没有删除掉之前的子节点。所以第三部就是对数据进行过滤，只要父节点即可。

总结

需要注意的是，我们一直都是对 map 进行操作的，但是结果怎么到了 list 上呢，这就是上面提到的引用复制。