js组装列表为树结构的两种算法

前端

2023-12-09 09:39:01

将 JavaScript 列表组装成树结构：两种有效算法

在前端开发中，我们需要将列表数据转换成树形结构的情况很常见，以便在页面上渲染。本文将探讨两种高效的算法，以帮助你将 JavaScript 列表组装成树结构。

两种算法

基于嵌套循环的算法

这种算法使用嵌套循环来构建树。外层循环遍历列表中的每个元素，而内层循环则检查每个元素是否是当前元素的子元素。如果发现匹配项，则将子元素添加到当前元素的子元素数组中。

基于哈希表的算法

这种算法使用哈希表来存储元素的引用。外层循环遍历列表中的每个元素，并将每个元素及其子元素的 ID 添加到哈希表中。然后，内层循环遍历列表中的每个元素，并使用哈希表查找其子元素。如果找到匹配项，则将子元素添加到当前元素的子元素数组中。

性能分析

算法的性能取决于列表的大小。

小列表 ：对于小列表，基于嵌套循环的算法可能更快，因为它的时间复杂度为 O(n^2)。

大列表 ：对于大列表，基于哈希表的算法更快，因为它的时间复杂度为 O(n)。

算法选择

在选择算法时，应考虑以下因素：

列表大小 ：小列表适合基于嵌套循环的算法，而大列表适合基于哈希表的算法。
性能要求 ：如果需要最佳性能，则基于哈希表的算法是更好的选择。

代码示例

基于嵌套循环的算法

function buildTree1(list) {
  const tree = [];
  for (let i = 0; i < list.length; i++) {
    const node = list[i];
    for (let j = 0; j < list.length; j++) {
      const child = list[j];
      if (child.parentId === node.id) {
        node.children.push(child);
      }
    }
    tree.push(node);
  }
  return tree;
}

基于哈希表的算法

function buildTree2(list) {
  const tree = [];
  const hashtable = {};
  for (let i = 0; i < list.length; i++) {
    const node = list[i];
    hashtable[node.id] = node;
    if (node.parentId) {
      hashtable[node.parentId].children.push(node);
    } else {
      tree.push(node);
    }
  }
  return tree;
}