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

JavaScript树结构转换 JavaScript树结构 2023-03-15 11:03:48 646人浏览独家记忆

摘要

目录方法一：使用递归方法二：使用循环方法三：使用 reduce方法四：使用哈希表方法五：使用深度优先搜索总结在 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)。优缺点：相比于方法二、方法三和方法四，可以更方便地进行深度优先搜索。