JavaScript 实现数组转树结构

IOS

2023-10-21 06:27:09

将数组转换为树形结构：JavaScript 终极指南

了解数组和树形结构

在数据处理中，我们经常需要处理复杂的数据结构。数组和树形结构是两种常见的结构，各有其优点和用途。

数组是一种有序的数据集合，元素按索引值存储。它简单易用，适合存储同类数据。

树形结构 是一种非线性数据结构，由节点和边组成。每个节点表示一个数据项，边表示节点之间的父子关系。树形结构具有层次性，适用于组织复杂且关联性强的数据。

从数组到树形结构的转变

将数组转换为树形结构的过程称为数组转树。有两种主要算法：嵌套循环法和映射法。

嵌套循环法 通过遍历数组中的每个元素并将其与其他元素进行比较来建立父子关系。虽然简单，但它的时间复杂度为 O(n^2)，对于大数据集效率低下。

映射法 利用映射对象将每个元素与其父节点关联起来。这种方法的时间复杂度为 O(n)，效率更高。

JavaScript 中的数组转树

让我们用映射法在 JavaScript 中实现数组转树：

const getTree = (list) => {
  const map = {};
  const treeList = [];

  list.forEach((item) => {
    map[item.id] = item;
    if (item.parentId) {
      map[item.parentId].children = map[item.parentId].children || [];
      map[item.parentId].children.push(item);
    } else {
      treeList.push(item);
    }
  });

  return treeList;
};

示例：

const list = [
  { id: 1, name: 'Node 1', parentId: null },
  { id: 2, name: 'Node 2', parentId: 1 },
  { id: 3, name: 'Node 3', parentId: 1 },
  { id: 4, name: 'Node 4', parentId: 2 },
  { id: 5, name: 'Node 5', parentId: 3 },
];

const tree = getTree(list);

console.log(tree);

输出：

[
  {
    id: 1,
    name: 'Node 1',
    parentId: null,
    children: [
      { id: 2, name: 'Node 2', parentId: 1, children: [{ id: 4, name: 'Node 4', parentId: 2 }] },
      { id: 3, name: 'Node 3', parentId: 1, children: [{ id: 5, name: 'Node 5', parentId: 3 }] },
    ],
  },
]