使用JavaScript将扁平数组转为嵌套数组时遇返回空问题求助

我太懂这种转结构结果却空无一物的挫败感了！咱们先把你的需求理清楚：你要把按parent分组的扁平对象数组，转换成以父级名称为节点、包含对应子节点的嵌套结构对吧？

先看你的原始数据：

var names =[ 
  { name: 'b', parent: 'Brown' }, 
  { name: 'a', parent: 'Brown' }, 
  { name: 'h', parent: 'Green' }, 
  { name: 'c', parent: 'Green' }, 
];

期望输出是类似这样的嵌套数组：

[
  { 
    name: 'Brown', 
    children: [
      { name: 'a', children: [] }, 
      { name: 'b', children: [] } 
    ] 
  }, 
  { 
    name: 'Green', 
    children: [
      { name: 'h', children: [] },
      { name: 'c', children: [] }
    ] 
  }
]

为什么你的代码可能返回空？ #

常见的坑有这几个：

• 没有预先创建父节点对象，直接尝试往不存在的父节点children里push，相当于操作了一个不存在的数组，自然没有结果
• 遍历逻辑里没正确匹配parent和父节点的name，导致子节点没被正确添加
• 最后收集结果时，错误地收集了原始的子节点，而不是我们需要的父级节点

可行的实现代码 #

这里用**映射表（Map）**来快速定位父节点，避免重复创建，逻辑清晰又高效：

var names =[ 
  { name: 'b', parent: 'Brown' }, 
  { name: 'a', parent: 'Brown' }, 
  { name: 'h', parent: 'Green' }, 
  { name: 'c', parent: 'Green' }, 
];

// 用Map存储每个父节点，方便快速查找
const nodeMap = new Map();

// 遍历所有扁平项
names.forEach(item => {
  // 第一步：确保父节点存在，不存在就创建一个
  if (!nodeMap.has(item.parent)) {
    nodeMap.set(item.parent, { name: item.parent, children: [] });
  }
  // 第二步：创建当前子节点
  const childNode = { name: item.name, children: [] };
  // 第三步：把子节点添加到对应父节点的children数组
  nodeMap.get(item.parent).children.push(childNode);
});

// 最后把Map里的父节点转成数组，就是最终的嵌套结构
const nestedArray = Array.from(nodeMap.values());

console.log(nestedArray);

代码逻辑解释 #

1. Map映射表：用来存储每个父节点的对象，键是父级名称（比如Brown），值是对应的节点对象，这样查找父节点的速度是O(1)，比循环查找高效多了
2. 遍历处理每个子项：先检查父节点是否存在，不存在就初始化一个；然后创建当前子节点，再把它添加到父节点的children里
3. 生成结果数组：把Map里的所有值（也就是所有父节点）转成数组，就是我们要的嵌套结构

运行这段代码，就能得到你期望的嵌套数组啦～

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