JavaScript实现树结构转换的五种方法总结

更新时间：2023年03月15日 10:38:55 作者：茶老师

在 JavaScript 编程中，将数组转换为树结构是一个常见的需求。本篇博客将介绍五种常用的方法来实现数组转树结构，希望对大家有所帮助

方法一：使用递归

function arrayToTreeRec(nodes, parentId = null) {
  return nodes
    .filter((node) => node.parentId === parentId)
    .map((node) => ({ ...node, children: arrayToTreeRec(nodes, node.id) }));
}

const tree = arrayToTreeRec(nodes, null);

时间复杂度：O(n^2)，其中 n 是节点的数量。空间复杂度：O(n^2)。优缺点：不适合大规模数据。

方法二：使用循环

function arrayToTreeLoop(nodes) {
  const map = {};
  const tree = [];

  for (const node of nodes) {
    map[node.id] = { ...node, children: [] };
  }

  for (const node of Object.values(map)) {
    if (node.parentId === null) {
      tree.push(node);
    } else {
      map[node.parentId].children.push(node);
    }
  }

  return tree;
}

const tree = arrayToTreeLoop(nodes);

时间复杂度：O(n)，其中 n 是节点的数量。空间复杂度：O(n)。优缺点：适合大规模数据。

方法三：使用 reduce

function arrayToTreeReduce(nodes) {
  const map = {};
  const tree = nodes.reduce((acc, node) => {
    map[node.id] = { ...node, children: [] };

    if (node.parentId === null) {
      acc.push(map[node.id]);
    } else {
      map[node.parentId].children.push(map[node.id]);
    }

    return acc;
  }, []);

  return tree;
}

const tree = arrayToTreeReduce(nodes);

时间复杂度：O(n)，其中 n 是节点的数量。空间复杂度：O(n)。优缺点：代码简洁，适合中小规模数据。

方法四：使用哈希表

function arrayToTreeMap(nodes) {
  const map = new Map(nodes.map((node) => [node.id, { ...node, children: [] }]));
  const tree = [];

  for (const node of map.values()) {
    if (node.parentId === null) {
      tree.push(node);
    } else {
      map.get(node.parentId).children.push(node);
    }
  }

  return tree;
}

const tree = arrayToTreeMap(nodes);

时间复杂度：O(n)，其中 n 是节点的数量。空间复杂度：O(n)。优缺点：适合大规模数据，而且由于使用了 Map，相比于方法二和方法三，能够更方便地进行节点的查找和删除。

方法五：使用深度优先搜索

function arrayToTreeDFS(nodes) {
  const map = new Map(nodes.map((node) => [node.id, { ...node, children: [] }]));
  const tree = [];
  for (const node of map.values()) {
    if (node.parentId === null) {
      dfs(node, tree);
    }
  }
  function dfs(node, parent) {
    if (parent) {
      parent.children.push(node);
    }
    for (const child of node.children) {
      dfs(map.get(child.id), node);
    }
  }
  return tree;
}
const tree = arrayToTreeDFS(nodes);

时间复杂度：O(n)，其中 n 是节点的数量。空间复杂度：O(n)。优缺点：相比于方法二、方法三和方法四，可以更方便地进行深度优先搜索。

总结

以上是五种常用的将数组转换为树结构的方法，每种方法都有其适用的场景和优劣。如果是大规模数据，使用方法二或方法四比较合适；如果是中小规模数据，使用方法三比较简洁；如果需要深度优先搜索，可以使用方法五。总的来说，我们需要根据具体场景选择最适合的方法来进行数组到树结构的转换。

到此这篇关于JavaScript实现树结构转换的五种方法总结的文章就介绍到这了,更多相关JavaScript树结构转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用JavaScript实现图片的自动轮播
在网站开发中,经常会遇到需要展示多张图片并自动切换的需求,这就需要使用JavaScript来实现图片的自动轮播功能,本文将通过一个简单的例子,演示如何用JavaScript实现图片的自动轮播,需要的朋友可以参考下
2013-03-03
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
下面小编就为大家分享一篇浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结。小编觉得写的非常不错，需要的朋友可以过来参考一下
2016-03-03
基于JavaScript canvas绘制贝塞尔曲线
这篇文章主要为大家详细介绍了基于JavaScript canvas绘制贝塞尔曲线的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
一文解析ChatGPT 之 Fetch 请求
这篇文章主要为大家介绍了ChatGPT 之 Fetch请求的内容解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
微信小程序中如何使用flyio封装网络请求
这篇文章主要介绍了微信小程序中如何使用flyio封装网络请求，Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持，但同时对用户层提供统一、标准的Promise API,需要的朋友可以参考下
2019-07-07
js函数使用技巧之 setTimeout(function(){},0)
setTimeout的作用是将函数推迟第二参数设定的毫秒数后再执行，如果是0，就意味着浏览器要马上执行该函数，但是浏览器解析到setTimeout，虽然会"立刻"执行
2009-02-02
IE6下JS动态设置图片src地址问题
解决IE6下JS动态设置图片IMG的SRC时图片无法加载错误的方法
2010-01-01
一文详解TypeScript中的内置数据类型
作为一门类型安全的编程语言，TypeScript 提供了多种内置数据类型，帮助我们更好地定义和操作数据，下面小编就来和大家详细聊聊这些数据类型的相关知识吧
2023-06-06
JS判断对象属性是否存在的五种方案分享
编写JS的过程中,我们经常用到对象,也会用到对象中的属性,下面这篇文章主要给大家介绍了关于JS判断对象属性是否存在的五种方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
纯js代码实现简单计算器
这篇文章主要介绍了纯js代码实现简单计算器，功能超简单，实现加减乘除简单运算，感兴趣的小伙伴们可以参考一下
2015-12-12