JavaScript扁平数组结构转换成JSON树形结构无限极forEachpushchildren

Posted 2022-05-19 web半晨

目录

• 1、源数据
• 2、代码实现
• 3、函数调用

---

1、源数据

let data = [
     id: 5, parentId: 2, name: "目录1-1-1", ,
     id: 1, parentId: 0, name: "目录1", ,
     id: 13, parentId: 9, name: "目录2-2-3", ,
     id: 3, parentId: 1, name: "目录1-2", ,
     id: 2, parentId: 1, name: "目录1-1", ,
     id: 12, parentId: 9, name: "目录2-2-2", ,
     id: 4, parentId: 1, name: "目录1-3", ,
     id: 7, parentId: 0, name: "目录2", ,
     id: 9, parentId: 7, name: "目录2-2", ,
     id: 6, parentId: 2, name: "目录1-1-2", ,
     id: 11, parentId: 9, name: "目录2-2-1", ,
     id: 8, parentId: 7, name: "目录2-1", ,
     id: 10, parentId: 7, name: "目录2-3", ,
];

---

2、代码实现

// 数据处理
// 扁平数组结构转换成JSON树形结构
// 核心思想就是引用数据类型地址引用关系
function turnTree() 
    // map的作用是，使用源数据的id作为属性名
    // 这样当通过item.parentId就可以获取到
    // 父级对象了
    // 然后把对应的项添加到父级对象的children里面
    // result存储最终的结果
    let map = ,
        result = [];

    // 此处可以使用reduce实现
    // 但是不容易理解
    data.forEach(item => map[item.id] = item);

    data.forEach(item => 
        const parent = map[item.parentId];
        if (parent) 
            // 如果有children则push数据到children中
            // 如果没有就新建一个空的children数组
            // 然后再push数据
            parent.children = parent.children || [];
            parent.children.push(item);
         else 
            // 在本例中
            // else只会进入两次
            // 也是最外层目录
            result.push(item);
        
    );

    return result;

---

3、函数调用

console.log('turnTree:', turnTree());
// turnTree: (2) […, …]

创作打卡挑战赛 赢取流量/现金/CSDN周边激励大奖