JavaScript扁平数组结构转换成JSON树形结构、无限极、forEach、push、children

---

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) [{…}, {…}]