NextJS 13中如何将字符串数组的数组转换为层级对象数组？

你的问题核心是将扁平的父子关联数组转换为嵌套的树形结构，map方法只能完成单个元素的格式转换，无法处理节点间的父子关联，所以会得到平级的结果。下面是具体的实现思路和代码：

实现思路 #

1. 先将所有数组元素转换为统一的对象格式，同时用一个哈希表（对象）存储每个id对应的节点，方便快速查找父节点；
2. 遍历每个节点，根据ParentID判断节点类型：
   • 若ParentID为空字符串，说明是根节点，直接加入结果数组；
   • 若ParentID不为空，找到对应的父节点，将当前节点添加到父节点的children数组中。

代码实现 #

const rawData = [
  ["","1","Mobile Phones"],
  ["1","2","Apple"],
  ["1","3","Samsung"],
  ["","4","Tablets"],
  ["4","5","Huawei"],
];

function buildTree(data) {
  const nodeMap = {};
  const rootNodes = [];

  // 转换所有元素为标准对象，并存入nodeMap
  data.forEach(item => {
    const [parentId, id, name] = item;
    const node = {
      id: Number(id),
      name,
      children: []
    };
    nodeMap[id] = node;

    // 判断节点层级，加入对应位置
    if (parentId === "") {
      rootNodes.push(node);
    } else {
      if (nodeMap[parentId]) {
        nodeMap[parentId].children.push(node);
      }
    }
  });

  return rootNodes;
}

// 执行转换
const tree = buildTree(rawData);
console.log(tree);

输出结果 #

运行上述代码后，会得到你需要的树形结构：

[
  {
    id: 1,
    name: "Mobile Phones",
    children: [
      { id: 2, name: "Apple", children: [] },
      { id: 3, name: "Samsung", children: [] }
    ]
  },
  {
    id: 4,
    name: "Tablets",
    children: [
      { id: 5, name: "Huawei", children: [] }
    ]
  }
]

为什么map无法实现？ #

map方法的作用是逐个转换数组元素，它只处理单个元素的格式，无法关联不同元素之间的父子关系。要实现树形结构，必须额外维护节点间的引用关系，这也是上述方案中使用nodeMap的原因。

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