JavaScript实现树结构转换的方法有哪些

其他教程   发布日期:2023年08月29日   浏览次数:502

本文小编为大家详细介绍“JavaScript实现树结构转换的方法有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript实现树结构转换的方法有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

在 JavaScript 编程中,将数组转换为树结构是一个常见的需求。本篇博客将介绍五种常用的方法来实现数组转树结构,并讨论每种方法的时间复杂度、空间复杂度和最优解。

假设有一个由对象组成的数组,每个对象包含

  1. id
  1. parentId
两个属性。其中
  1. id
表示节点的唯一标识,
  1. parentId
表示该节点的父节点的
  1. id
  1. const nodes = [
  2. { id: 1, parentId: null },
  3. { id: 2, parentId: 1 },
  4. { id: 3, parentId: 1 },
  5. { id: 4, parentId: 2 },
  6. { id: 5, parentId: 3 },
  7. { id: 6, parentId: 3 },
  8. { id: 7, parentId: 4 },
  9. { id: 8, parentId: 4 },
  10. ];

以上面的数组为例,我们将介绍以下五种方法来将其转换为树结构。

方法一:使用递归

  1. function arrayToTreeRec(nodes, parentId = null) {
  2. return nodes
  3. .filter((node) => node.parentId === parentId)
  4. .map((node) => ({ ...node, children: arrayToTreeRec(nodes, node.id) }));
  5. }
  6. const tree = arrayToTreeRec(nodes, null);

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

方法二:使用循环

  1. function arrayToTreeLoop(nodes) {
  2. const map = {};
  3. const tree = [];
  4. for (const node of nodes) {
  5. map[node.id] = { ...node, children: [] };
  6. }
  7. for (const node of Object.values(map)) {
  8. if (node.parentId === null) {
  9. tree.push(node);
  10. } else {
  11. map[node.parentId].children.push(node);
  12. }
  13. }
  14. return tree;
  15. }
  16. const tree = arrayToTreeLoop(nodes);

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

方法三:使用 reduce

  1. function arrayToTreeReduce(nodes) {
  2. const map = {};
  3. const tree = nodes.reduce((acc, node) => {
  4. map[node.id] = { ...node, children: [] };
  5. if (node.parentId === null) {
  6. acc.push(map[node.id]);
  7. } else {
  8. map[node.parentId].children.push(map[node.id]);
  9. }
  10. return acc;
  11. }, []);
  12. return tree;
  13. }
  14. const tree = arrayToTreeReduce(nodes);

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

方法四:使用哈希表

  1. function arrayToTreeMap(nodes) {
  2. const map = new Map(nodes.map((node) => [node.id, { ...node, children: [] }]));
  3. const tree = [];
  4. for (const node of map.values()) {
  5. if (node.parentId === null) {
  6. tree.push(node);
  7. } else {
  8. map.get(node.parentId).children.push(node);
  9. }
  10. }
  11. return tree;
  12. }
  13. const tree = arrayToTreeMap(nodes);

时间复杂度:O(n),其中 n 是节点的数量。 空间复杂度:O(n)。 优缺点:适合大规模数据,而且由于使用了

  1. Map
,相比于方法二和方法三,能够更方便地进行节点的查找和删除。

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

  1. function arrayToTreeDFS(nodes) {
  2. const map = new Map(nodes.map((node) => [node.id, { ...node, children: [] }]));
  3. const tree = [];
  4. for (const node of map.values()) {
  5. if (node.parentId === null) {
  6. dfs(node, tree);
  7. }
  8. }
  9. function dfs(node, parent) {
  10. if (parent) {
  11. parent.children.push(node);
  12. }
  13. for (const child of node.children) {
  14. dfs(map.get(child.id), node);
  15. }
  16. }
  17. return tree;
  18. }
  19. const tree = arrayToTreeDFS(nodes);

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

以上就是JavaScript实现树结构转换的方法有哪些的详细内容,更多关于JavaScript实现树结构转换的方法有哪些的资料请关注九品源码其它相关文章!