JavaScript 数组转树，看这篇就够了

将JavaScript数组转换为树结构是一个常见的需求，特别是在处理层级数据时。假设你有一个扁平化的数组，每个对象都有一个 id 和 parentId 属性，其中 parentId 表示该对象的父节点的 id。以下是如何将这样的数组转换为树结构的几种方法。

1. 使用递归方法

递归方法是一种直观的方式，但可能会导致性能问题，特别是对于大型数据集。

function arrayToTree(items) {
    const result = [];
    const itemMap = new Map();

    // 创建一个映射表，以便快速查找
    items.forEach(item => {
        itemMap.set(item.id, { ...item, children: [] });
    });

    items.forEach(item => {
        const id = item.id;
        const parentId = item.parentId;
        const treeItem = itemMap.get(id);

        if (parentId === null) {
            result.push(treeItem);
        } else {
            const parent = itemMap.get(parentId);
            if (parent) {
                parent.children.push(treeItem);
            }
        }
    });

    return result;
}

const items = [
    { id: 1, parentId: null, name: 'A' },
    { id: 2, parentId: 1, name: 'B' },
    { id: 3, parentId: 1, name: 'C' },
    { id: 4, parentId: 2, name: 'D' },
    { id: 5, parentId: 2, name: 'E' },
    { id: 6, parentId: 3, name: 'F' }
];

const tree = arrayToTree(items);
console.log(JSON.stringify(tree, null, 2));

2. 使用迭代方法

迭代方法通常比递归方法更高效，特别是在处理大型数据集时。

function arrayToTree(items) {
    const result = [];
    const itemMap = new Map();

    // 创建一个映射表，以便快速查找
    items.forEach(item => {
        itemMap.set(item.id, { ...item, children: [] });
    });

    items.forEach(item => {
        const parentId = item.parentId;
        const treeItem = itemMap.get(item.id);

        if (parentId === null) {
            result.push(treeItem);
        } else {
            const parent = itemMap.get(parentId);
            if (parent) {
                parent.children.push(treeItem);
            }
        }
    });

    return result;
}

const items = [
    { id: 1, parentId: null, name: 'A' },
    { id: 2, parentId: 1, name: 'B' },
    { id: 3, parentId: 1, name: 'C' },
    { id: 4, parentId: 2, name: 'D' },
    { id: 5, parentId: 2, name: 'E' },
    { id: 6, parentId: 3, name: 'F' }
];

const tree = arrayToTree(items);
console.log(JSON.stringify(tree, null, 2));

3. 使用第三方库

一些流行的第三方库如 lodash 提供了处理树结构的功能，使用起来非常方便。

使用 lodash

首先安装 lodash：

npm install lodash

然后在代码中使用 _.groupBy 和递归方法：

const _ = require('lodash');

function arrayToTree(items) {
    const result = [];
    const itemMap = new Map();

    // 创建一个映射表，以便快速查找
    items.forEach(item => {
        itemMap.set(item.id, { ...item, children: [] });
    });

    items.forEach(item => {
        const parentId = item.parentId;
        const treeItem = itemMap.get(item.id);

        if (parentId === null) {
            result.push(treeItem);
        } else {
            const parent = itemMap.get(parentId);
            if (parent) {
                parent.children.push(treeItem);
            }
        }
    });

    return result;
}

const items = [
    { id: 1, parentId: null, name: 'A' },
    { id: 2, parentId: 1, name: 'B' },
    { id: 3, parentId: 1, name: 'C' },
    { id: 4, parentId: 2, name: 'D' },
    { id: 5, parentId: 2, name: 'E' },
    { id: 6, parentId: 3, name: 'F' }
];

const tree = arrayToTree(items);
console.log(JSON.stringify(tree, null, 2));

总结

• 递归方法：直观但可能性能较差。
• 迭代方法：高效且适用于大型数据集。
• 第三方库：如 lodash，提供了丰富的功能和更好的性能。

希望这些方法能帮助你将数组转换为树结构。如果有任何疑问或需要进一步的解释，请随时提问。

PS:学会了记得，点赞，评论，收藏，分享