JavaScript如何将扁平化对象数组按parentId转换为嵌套结构

实现思路 #

• 用临时映射对象存储已出现的父级ID对应条目，避免重复遍历结果数组匹配父级，时间复杂度为O(n)，效率更高
• 遍历原始数组时做两个核心判断：父级是否已存在、拆分当前项的父子属性
• 最终直接导出结果数组即可

完整实现代码 #

function convertFlatToNested(flatArr) {
  const parentMap = {};
  const result = [];

  flatArr.forEach(item => {
    // 拆分父级属性和子级属性
    const { parentId, parentName, ...childProps } = item;
    // 父级不存在时先初始化父级
    if (!parentMap[parentId]) {
      const parentItem = {
        id: parentId,
        name: parentName,
        children: []
      };
      parentMap[parentId] = parentItem;
      result.push(parentItem);
    }
    // 子属性加入对应父级的children数组
    parentMap[parentId].children.push(childProps);
  });

  return result;
}

// 测试用例
const originalArr = [
  {
    "parentId": "uniqueParentId1",
    "parentName": "Parent1",
    "childProp1": "test1",
    "childProp2": "test3"
  },
  {
    "parentId": "uniqueParentId2",
    "parentName": "Parent2",
    "childProp1": "somevals",
    "childProp2": "other vals"
  },
  {
    "parentId": "uniqueParentId2",
    "parentName": "Parent2",
    "childProp1": "somevals 1",
    "childProp2": "other vals 1"
  }
];

const nestedArr = convertFlatToNested(originalArr);
console.log(nestedArr); // 输出符合要求的嵌套结构

代码说明 #

• 用对象解构+剩余运算符...childProps自动提取所有子属性，不用手动枚举子属性字段，适配子属性字段动态变化的场景
• 映射对象parentMap通过键值对直接匹配父级，比每次遍历结果数组查找父级性能高，数据量越大优势越明显
• 没有修改原始数组的内容，不会产生副作用

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