如何基于对象数组创建正确的层级数组结构？（JavaScript）

问题分析 #

你尝试用map方法处理多层级嵌套时遇到困难，原因是map仅能完成单层元素转换，无法高效处理元素间的父子关联映射，尤其是深层嵌套场景。推荐先构建节点映射表再组装层级结构，这种方法时间复杂度为O(n)，效率更高。

解决方案代码 #

function buildHierarchy(flatArray) {
    // 构建ID到节点的映射，同时给每个节点初始化options数组
    const nodeMap = {};
    flatArray.forEach(item => {
        nodeMap[item.id] = { ...item, options: [] };
    });

    const rootNodes = [];

    flatArray.forEach(item => {
        const currentNode = nodeMap[item.id];
        if (item.parentId === null) {
            // 收集根节点（parentId为null的元素）
            rootNodes.push(currentNode);
        } else {
            // 将当前节点挂载到对应父节点的options中
            const parentNode = nodeMap[item.parentId];
            if (parentNode) {
                parentNode.options.push(currentNode);
            }
        }
    });

    return rootNodes;
}

// 修正后的测试数组（补充name属性的字符串引号）
const flatArray = [
    { id: 1, parentId: null, name: 'Example' },
    { id: 2, parentId: 1, name: 'Example' },
    { id: 3, parentId: 1, name: 'Example' },
    { id: 4, parentId: 1, name: 'Example' },
    { id: 5, parentId: 2, name: 'Example' },
    { id: 6, parentId: 2, name: 'Example' },
    { id: 7, parentId: 6, name: 'Example' },
    { id: 8, parentId: 7, name: 'Example' },
    { id: 9, parentId: 7, name: 'Example' },
];

// 生成层级结构数组
const hierarchicalArray = buildHierarchy(flatArray);
console.log(JSON.stringify(hierarchicalArray, null, 2));

代码说明 #

1. 构建节点映射表：遍历扁平数组，将每个元素存入nodeMap，同时为每个元素添加空的options数组，用于存放子节点。
2. 组装层级结构：再次遍历数组，将根节点（parentId为null）加入结果数组；非根节点则找到其父节点，添加到父节点的options中。
3. 注意点：你提供的期望结果中，id=7的元素parentId被写成1，但原数组中它的parentId是6，因此实际转换后该节点会嵌套在id=6的节点下。如果需要调整层级，修改原数组对应元素的parentId即可。

内容的提问来源于stack exchange，提问作者MoiOcanas