今天跟后端同事接表格数据接口时，有这么一个需求：后端返回一维数组，需要前端处理成树型结构数据使用。

1.一维数组转换成树形结构

• 递归

function arrayToTree(arr, parentId = null) {
    const tree = [];
    for (const item of arr) {
        if (item.parentId === parentId) {
            const children = arrayToTree(arr, item.id);
            if (children.length) {
                item.children = children;
            }
            tree.push(item);
        }
    }
    return tree;
}

• 迭代

const arrToTree = (arr) => {
    const result = [];
    //判断参数是否为数组
    if (!Array.isArray(arr)) {
        return result;
    }
    //防止参数对象数组中，存在children
    arr.forEach((item) => {
        delete item.children;
    });
    //id为key
    let map = new Map();
    arr.forEach(item => {
        map.set(item.id, item);
    })
    //parentId为父节点
    arr.forEach(item => {
        if (map.has(item.parentId)) {
            let parent = map.get(item.parentId);
            (parent.children || (parent.children = [])).push(item);
        } else {
            result.push(item);
        }
    })
    return result;
}

测试：

let arr = [
    { id: 1, name: '陕西', parentId: null },
    { id: 2, name: '山西', parentId: null },
    { id: 3, name: '四川', parentId: null },
    { id: 4, name: '西安', parentId: 1 },
    { id: 5, name: '咸阳', parentId: 1 },
    { id: 6, name: '渭南', parentId: 1 },
    { id: 7, name: '侯马', parentId: 2 },
    { id: 8, name: '雅安', parentId: 3 },
]
console.log(arrayToTree(arr))
/*
         [
            {
                id: 1,
                name: "陕西",
                parentId: null,
                children: [
                    {
                        id: 4,
                        name: "西安",
                        parentId: 1
                    },
                    {
                        id: 5,
                        name: "咸阳",
                        parentId: 1
                    },
                    {
                        id: 6,
                        name: "渭南",
                        parentId: 1
                    }
                ]
            },
            {
                id: 2,
                name: "山西",
                parentId: null,
                children: [
                    {
                        id: 7,
                        name: "侯马",
                        parentId: 2
                    }
                ]
            },
            {
                id: 3,
                name: "四川",
                parentId: null,
                children: [
                    {
                        id: 8,
                        name: "雅安",
                        parentId: 3
                    }
                ]
            }
        ]
*/

2.树形结构转换成一维数组

function treeToArray(tree, parentId = null, result = []) {
    for (const node of tree) {
      if (node.children && node.children.length > 0) {
        treeToArray(node.children, node.id, result);
        delete node.children;
      }
      result.push(node);
    }
    return result;
}