js将列表组装成树结构的两种实现方式分享

让我们来详细讲解“js将列表组装成树结构的两种实现方式分享”的完整攻略。

1. 背景

在开发网站时，经常会遇到需要将列表数据组装成树形结构的需求。比如，某个商品分类下有多个子分类，子分类又有自己的子分类，这就是一棵树形结构。如果我们只有一份列表数据，该如何将它组装成一棵树呢？

2. 实现方式一：递归

2.1 实现思路

递归是一种非常自然且直观的方法，它通过不断地调用自己，将列表数据转换成树形结构。具体实现过程如下：

1. 遍历列表数据，找到顶层节点；
2. 针对每个顶层节点，递归地查找其子节点，直到没有子节点为止；
3. 将顶层节点和其子节点组装成一棵树。

2.2 示例说明

假设有如下的一个列表数据，它表示某个商品分类下的所有子分类（包括子分类的子分类）：

const categoryList = [
  { id: 1, name: '家用电器', parentId: 0 },
  { id: 2, name: '手机数码', parentId: 0 },
  { id: 3, name: '电视', parentId: 1 },
  { id: 4, name: '洗衣机', parentId: 1 },
  { id: 5, name: '空调', parentId: 1 },
  { id: 6, name: '华为', parentId: 2 },
  { id: 7, name: '小米', parentId: 2 },
  { id: 8, name: 'iphone', parentId: 2 },
  { id: 9, name: '智能手表', parentId: 2 },
  { id: 10, name: 'P30', parentId: 6 },
  { id: 11, name: 'Mate30', parentId: 6 },
  { id: 12, name: 'Note10', parentId: 7 }
];

通过递归的方式将它转换成树形结构的代码如下：

function buildTree(data, parentId) {
  const result = [];
  for (const item of data) {
    if (item.parentId === parentId) {
      const children = buildTree(data, item.id);
      if (children.length > 0) {
        item.children = children;
      }
      result.push(item);
    }
  }
  return result;
}

console.log(buildTree(categoryList, 0));

运行结果如下：

[
  {
    "id": 1,
    "name": "家用电器",
    "parentId": 0,
    "children": [
      {
        "id": 3,
        "name": "电视",
        "parentId": 1
      },
      {
        "id": 4,
        "name": "洗衣机",
        "parentId": 1
      },
      {
        "id": 5,
        "name": "空调",
        "parentId": 1
      }
    ]
  },
  {
    "id": 2,
    "name": "手机数码",
    "parentId": 0,
    "children": [
      {
        "id": 6,
        "name": "华为",
        "parentId": 2,
        "children": [
          {
            "id": 10,
            "name": "P30",
            "parentId": 6
          },
          {
            "id": 11,
            "name": "Mate30",
            "parentId": 6
          }
        ]
      },
      {
        "id": 7,
        "name": "小米",
        "parentId": 2,
        "children": [
          {
            "id": 12,
            "name": "Note10",
            "parentId": 7
          }
        ]
      },
      {
        "id": 8,
        "name": "iphone",
        "parentId": 2
      },
      {
        "id": 9,
        "name": "智能手表",
        "parentId": 2
      }
    ]
  }
]

3. 实现方式二：循环迭代

3.1 实现思路

循环迭代是一种相对较新的方法，它并不需要递归，而是通过遍历列表数据来构建树形结构。具体实现过程如下：

1. 新建一个空数组，用来保存所有节点；
2. 遍历列表数据，找到每个顶层节点，并将其塞入保存节点的数组中；
3. 循环处理保存节点的数组，对于每一个节点，遍历列表数据，将其子节点塞入节点的children属性中；
4. 如果节点的children属性不为空，将其子节点添加到保存节点的数组中。

3.2 示例说明

还是以上面的商品分类数据为例，通过循环迭代的方式将它转换成树形结构的代码如下：

function buildTree(data) {
  const map = {};
  const result = [];
  for (const item of data) {
    map[item.id] = { ...item, children: [] };
  }
  for (const item of data) {
    const node = map[item.id];
    if (item.parentId === 0) {
      result.push(node);
    } else {
      const parent = map[item.parentId];
      parent.children.push(node);
    }
  }
  return result;
}

console.log(buildTree(categoryList));

运行结果与递归方式相同，这里就不再赘述了。

4. 总结

递归和循环迭代都是将列表转换成树形结构的常用方法。两种方法各有优缺点，递归简单直观，但是可能会造成性能问题；循环迭代相对复杂，但是效率更高。开发者可以根据实际情况选择合适的方式来实现树形结构的转换。