javascript 中如何将 list 转换成树状结构

在JavaScript中，将列表（list）转换成树状结构通常包含以下几个步骤：识别根节点、建立节点关系、递归构建子树。这个转换过程通常用于处理有层级关系的数据，如组织架构、目录结构等。

为了详细描述这个转换过程，我们可以考虑以下情景：我们有一个包含多个对象的数组，其中每个对象都有一个唯一标识符和一个指向其父对象的标识符。为了构建这个树状结构，我们将这些对象转换成树的节点，每个节点都指向其子节点。

一、识别根节点

首先，我们需要在列表中找到一个或多个根节点。通常，根节点是没有父节点或者其父节点标识符为空的那些节点。

function findRoots(list) {
  return list.filter(item => item.parentId == null);
}

二、建立节点关系

一旦找到了根节点，我们就需要建立父节点和子节点之间的关系。这个过程通常涉及将列表中的每个项目遍历一遍，并将它们正确地关联到其父节点。

function buildTree(list) {
  let temp = {};
  for (let item of list) {
    temp[item.id] = {...item, children: []};
  }
  const tree = [];
  for (let itemId in temp) {
    const item = temp[itemId];
    if (item.parentId) {
      temp[item.parentId].children.push(item);
    } else {
      tree.push(item);
    }
  }
  return tree;
}

三、递归构建子树

最后，通过递归的方式为每个节点添加它的子节点，直到所有的节点都正确地放置到树状结构中。

function buildTreeRecursively(list, parentId = null) {
  return list.filter(item => item.parentId === parentId)
             .map(item => ({
               ...item,
               children: buildTreeRecursively(list, item.id)
             }));
}

总结来说，将列表转换成树状结构涉及创建节点、确定层级关系并递归构建子树，直到所有节点正确地组织到树中。这个转换过程是一种常见的数据处理方式，尤其在需要表现从属关系或层级关系的场景中。

现在，让我们通过具体的代码示例和详细解释这个过程。

一、确定数据结构

假设列表中的每个对象至少包含三个属性：一个唯一的 id、一个 parentId 和一个 name。其中 parentId 是指向它的父对象的 id。如果 parentId 为 null 或者不存在，该节点就是根节点。

let list = [
    { id: 1, parentId: null, name: "Root1" },
    { id: 2, parentId: 1, name: "Child1" },
    // 其他节点...
];

二、建立查找表

为了高效地将列表转化为树状结构，在查找子节点时，我们通常会利用一个对象（查找表）来保存每个节点的引用。这样，我们可以在 O(1) 的时间复杂度内找到任何节点的直接子节点。

function createLookup(list) {
    const lookup = {};
    list.forEach(item => lookup[item.id] = {...item, children: []});
    return lookup;
}

三、构建树结构

现在，我们会遍历列表中的每个节点，并使用之前创建的查找表来将子节点放到其父节点的 children 数组中。如果节点没有父节点，它将成为树的根。

function createTree(list) {
    let lookup = createLookup(list);
    const tree = [];
    for (let item of list) {
        if (item.parentId) {
            lookup[item.parentId].children.push(lookup[item.id]);
        } else {
            tree.push(lookup[item.id]);
        }
    }
    return tree;
}

四、优化和使用

最后，我们通过一些测试数据来优化以上函数，并确保它可以正确无误地工作。

// 测试数据
const list = [
  { id: 1, parentId: null, name: "Root1" },
  { id: 2, parentId: 1, name: "Child1" },
  { id: 3, parentId: 1, name: "Child2" },
  { id: 4, parentId: 2, name: "Grandchild1" },
  { id: 5, parentId: 3, name: "Grandchild2" }
];
// 转换列表为树状结构
const tree = createTree(list);
console.log(JSON.stringify(tree, null, 2));