如何将字符串二维数组转换为嵌套对象树结构

聖光之護 2026-01-15 00:00:00 次阅读

本文介绍在 next.js 13 管理后台开发中，如何将扁平的字符串二维数组（含父子关系标识）高效构建为具有 `children` 嵌套结构的对象数组，重点解决层级丢失与顺序依赖问题。

在构建树形菜单、分类导航或组织架构等场景中，后端常返回扁平化的层级数据（如 [parentId, id, name] 三元组），而前端需要将其转化为递归嵌套的对象结构。直接使用 map() 仅能做线性映射，无法建立父子引用关系；正确解法需借助哈希映射（Map）预存所有节点，并通过父 ID 动态挂载子节点。

以下是推荐的健壮实现：

function buildTreeFromFlatArray(data) {
  const nodeMap = new Map(); // 缓存所有节点：id → node 对象

  // 第一步：初始化所有节点（无论是否为根）
  for (const [parentId, id, name] of data) {
    nodeMap.set(id, {
      id: parseInt(id, 10),
      name,
      children: []
    });
  }

  // 第二步：建立父子关系（关键步骤）
  for (const [parentId, id, name] of data) {
    if (parentId !== "") {
      const parent = nodeMap.get(parentId);
      const child = nodeMap.get(id);
      if (parent && child) {
        parent.children.push(child);
      }
    }
  }

  // 第三步：提取所有根节点（ParentID 为空的项）
  const roots = [];
  for (const [parentId] of data) {
    if (parentId === "") {
      const root = nodeMap.get(data.find(row => row[0] === "")?.[1]);
      if (root && !roots.some(r => r.id === root.id)) {
        roots.push(root);
      }
    }
  }

  // 去重并确保顺序与原始根节点一致
  return data
    .filter(row => row[0] === "")
    .map(row => nodeMap.get(row[1]))
    .filter(Boolean);
}

// 使用示例
const input = [
  ["", "1", "Mobile Phones"],
  ["1", "2", "Apple"],
  ["1", "3", "Samsung"],
  ["", "4", "Tablets"],
  ["4", "5", "Huawei"],
  ["", "6", "X"],
  ["6", "7", "Y"],
  ["7", "8", "Z"]
];

console.log(buildTreeFromFlatArray(input));

✅ 关键要点说明：

Map 是核心：避免重复创建对象，确保同一 id 节点被唯一引用，父子挂载时修改的是同一内存实例；
两遍遍历更安全：先建节点，再连关系，规避“父节点尚未创建”的潜在错误（即使输入顺序不保证，也可扩展为多轮收敛处理）；
根节点提取严谨：按原始数组中 parentId === "" 的顺序提取根节点，保持 UI 展示逻辑一致性；
类型安全增强：使用 parseInt(id, 10) 显式转整型，防止 "01" 类字符串误解析；

⚠️ 注意事项：

该算法默认要求父节点在子节点前声明（如 ["", "1", ...] 必须出现在 ["1", "2", ...] 之前）。若数据顺序不可控，需改用「拓扑排序」或「多轮扫描 + 待挂载队列
」策略；
若存在循环引用（如 A → B → A），需额外加入环检测逻辑；
在 Next.js 服务端组件（Server Component）中使用时，确保数据已完整获取，避免在 useEffect 中异步调用导致 hydration 不一致。