这里给大家介绍几种使用js将下面的数组生成树状结构方法,有不足的地方欢迎大神指正
let cityList = [
{id: 1, parentId: 0,name: '江苏省'},
{id: 2,parentId: 0,name: '广东省'},
{id: 3,parentId: 0,name: '湖南省'},
{id: 4,parentId: 1,name: '苏州市'},
{id: 5,parentId: 1,name: '无锡市'},
{id: 6,parentId: 1,name: '南通市'},
{id: 7,parentId: 2,name: '广州市'},
{id: 8,parentId: 2,name: '深圳市'},
{id: 9,parentId: 3,name: '长沙市'},
{id: 10,parentId: 4,name: '工业园区'},
{id: 11,parentId: 4,name: '吴中区'},
{id: 12,parentId: 4,name: '姑苏区'}
];
方法1:
先上我最喜欢的循环方式生成
function listToTree() {
let array = []
cityList .forEach(item => { // 遍历对象数组
item.children = cityList.filter(info => info.parentId === item.id) // 找到每个对象的子节点
if (item.parentId === 0) {
array.push(item) // 将一层节点放入新数组中
}
})
return array //循环结束,返回结果
}
方法2:
使用递归方式生成
function recursionGenerateTree(pid, arr) {
let array = []
arr.forEach(item => {
if (item.parentId === pid) {
item.children = recursionGenerateTree(item.id, arr) // 接收子节点
array.push(item)
};
})
return array // 返回查找到的节点
}
console.log(recursionGenerateTree(0, cityList))
ps:以上方法都会改变原数组数据,建议根据使用时先拷贝一份数据。