如何用JavaScript数组构建反向层级TreeView结构？

嘿，这就来帮你搞定把扁平JavaScript数组转成带children字段的嵌套树形结构的问题，包括你提到的反向层级需求～

首先得明确一个关键前提：你的扁平数组里需要有父节点关联字段（比如ParentID），不然没办法判断节点之间的层级关系——你给的示例数组里只列了ID、Phone这些字段，我先假设实际数据里有这个关联字段哈，如果没有的话，咱们得先确定节点层级的判断规则（比如ID的数字规律、前缀关联等）。

如果是要从根节点往下构建层级（比如父节点包含子节点），可以用这个高效的实现：

示例输入（补全ParentID） #

var arr = [
  { "ID": 1, "Phone": "(403) 125-2552", "City": "Coevorden", "Name": "Grady", "ParentID": null },
  { "ID": 2, "Phone": "(555) 444-3333", "City": "Amsterdam", "Name": "Alice", "ParentID": 1 },
  { "ID": 3, "Phone": "(123) 456-7890", "City": "Rotterdam", "Name": "Bob", "ParentID": 2 },
  { "ID": 4, "Phone": "(987) 654-3210", "City": "Utrecht", "Name": "Charlie", "ParentID": 1 }
];

转换函数 #

function flatToTree(arr) {
  // 用对象存储所有节点，以ID为键，方便快速查找
  const nodeMap = {};
  const treeRoots = [];

  // 先把所有节点存入映射，同时初始化children数组
  arr.forEach(node => {
    nodeMap[node.ID] = { ...node, children: [] };
  });

  // 遍历每个节点，找到父节点并添加到对应children中
  arr.forEach(node => {
    const currentNode = nodeMap[node.ID];
    if (node.ParentID !== null && nodeMap[node.ParentID]) {
      // 有父节点，就把当前节点加到父节点的children数组
      nodeMap[node.ParentID].children.push(currentNode);
    } else {
      // 没有父节点的就是根节点，直接加入结果数组
      treeRoots.push(currentNode);
    }
  });

  return treeRoots;
}

// 调用示例
const normalTree = flatToTree(arr);
console.log(normalTree);

代码说明 #

• 用nodeMap做节点映射，把时间复杂度降到O(n)，避免多次遍历数组查找父节点
• 给每个节点初始化children数组，确保即使没有子节点也会保留这个字段，符合TreeView的需求
• 最后收集所有无父节点的节点作为树的根，形成完整的嵌套结构

如果是要从子节点往上构建层级（比如原本的叶子节点作为根，父节点成为它的子节点，以此类推），可以调整逻辑如下：

转换函数 #

function flatToReverseTree(arr) {
  const nodeMap = {};
  // 记录每个子节点对应的父节点ID
  const childToParent = {};

  // 初始化节点映射和父节点关联
  arr.forEach(node => {
    nodeMap[node.ID] = { ...node, children: [] };
    if (node.ParentID !== null) {
      childToParent[node.ID] = node.ParentID;
    }
  });

  // 遍历所有有父节点的节点，把父节点加到当前节点的children中
  Object.keys(childToParent).forEach(childId => {
    const childNode = nodeMap[childId];
    const parentNode = nodeMap[childToParent[childId]];
    childNode.children.push(parentNode);
  });

  // 找到原本的叶子节点（没有子节点的节点）作为反向树的根
  const reverseRoots = arr
    .filter(node => !arr.some(item => item.ParentID === node.ID))
    .map(node => nodeMap[node.ID]);

  return reverseRoots;
}

// 调用示例
const reverseTree = flatToReverseTree(arr);
console.log(reverseTree);

效果说明 #

比如原本的层级是 Grady(1) → Alice(2) → Bob(3)，反向后就变成 Bob(3) → Alice(2) → Grady(1)，Bob作为根节点，Alice是它的子节点，Grady是Alice的子节点，完美实现反向层级的TreeView结构。

如果你的数组里的层级关联规则不是ParentID，可以根据实际情况修改判断父节点的逻辑就行～

内容的提问来源于stack exchange，提问作者Can Muhammed KELEK