JavaScript中使用reduce动态重构对象数组为树形结构的问题

我明白你现在卡在怎么用reduce把扁平的对象数组转换成符合要求的动态树形结构上了，咱们先梳理清楚逻辑，再给出正确的实现方案。

先分析你现有代码的问题 #

• 你直接操作外部的parsedTree，没有充分利用reduce的累加器acc，这会让逻辑变得混乱
• 错误地判断对象的length属性（对象没有length，只有数组有）
• 没有处理parent为null的情况，也没考虑父节点还未被创建的场景

正确的实现思路 #

核心是先建立一个节点映射表，用来快速查找每个id对应的节点对象，这样我们可以轻松把子节点挂载到父节点上，不管父节点是否已经被处理过。然后通过reduce遍历数组，逐步构建树形结构：

1. 对每个item，先确保当前节点在映射表中存在（不存在就创建空对象）
2. 根据parent的值处理挂载逻辑：
   • 如果parent是null，说明是根节点，直接加到最终结果中
   • 如果parent存在，先确保父节点在映射表中存在（不存在则创建），然后把当前节点作为父节点的属性
3. 最后返回构建好的树形结构

完整代码实现 #

const input = [
  { "id": "Ball", "parent": "Futebol" },
  { "id": "Nike", "parent": "Ball" },
  { "id": "Volley", "parent": null }
];

const buildTree = (items) => {
  const nodeMap = {};
  const result = {};

  return items.reduce((acc, { id, parent }) => {
    // 确保当前节点存在于映射表中
    if (!nodeMap[id]) {
      nodeMap[id] = {};
    }

    if (parent === null) {
      // 根节点，直接加入结果
      acc[id] = nodeMap[id];
    } else {
      // 确保父节点存在于映射表中
      if (!nodeMap[parent]) {
        nodeMap[parent] = {};
      }
      // 将当前节点挂载到父节点上
      nodeMap[parent][id] = nodeMap[id];
    }

    return acc;
  }, result);
};

const output = buildTree(input);
console.log(output);

代码运行结果 #

{
  "Futebol": { "Ball": { "Nike": {} } },
  "Volley": {}
}

逻辑解释 #

• nodeMap：存储所有节点的引用，这样不管父节点是先处理还是后处理，我们都能快速找到对应的对象，避免重复创建
• reduce的累加器acc就是最终的结果对象，每次遍历都更新它
• 处理parent为null时，直接把当前节点作为根节点加入结果
• 处理非null的parent时，先确保父节点存在，再把当前节点挂载到父节点的属性上

这样不管你的输入数组顺序如何（比如父节点在子节点之后），代码都能正确构建树形结构，完全满足动态构建的需求。

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