JavaScript之parentId转换成children数据,并解析

原创

mob64ca12e58adb 2023-08-14 13:45:31 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e58adb的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript之parentId转换成children数据,并解析

概述

在 JavaScript 中，我们经常会遇到将 parentId 转换成 children 数据，并解析的需求。这个过程可以分为以下几个步骤：

步骤	描述
第一步	遍历原始数据，将每个节点的 parentId 映射到对应的节点数组中
第二步	创建一个新的结果数组，用于存储转换后的数据
第三步	递归地将每个节点的 children 数组设置为对应的子节点数组
第四步	返回转换后的结果数组

下面让我们逐步了解每个步骤需要做什么，以及使用的代码和注释。

第一步：将 parentId 映射到节点数组中

在这一步中，我们需要遍历原始数据，将每个节点的 parentId 映射到对应的节点数组中。我们可以使用 reduce 方法来实现这个功能。

const data = [
  { id: 1, name: '节点1', parentId: null },
  { id: 2, name: '节点2', parentId: 1 },
  { id: 3, name: '节点3', parentId: 1 },
  { id: 4, name: '节点4', parentId: 2 },
  { id: 5, name: '节点5', parentId: 2 },
];

const nodeMap = data.reduce((map, node) => {
  const { id, parentId } = node;
  if (!map[parentId]) {
    map[parentId] = [];
  }
  map[parentId].push(node);
  return map;
}, {});

上述代码中，我们使用了 reduce 方法来遍历原始数据数组 data。在每次遍历中，我们将每个节点的 parentId 映射到对应的节点数组中。如果该 parentId 对应的节点数组不存在，则先创建一个空数组再进行 push 操作。

第二步：创建新的结果数组

在这一步中，我们需要创建一个新的结果数组，用于存储转换后的数据。我们可以使用 filter 方法过滤出顶层节点，即 parentId 为 null 的节点。

const result = data.filter(node => node.parentId === null);

上述代码中，我们使用了 filter 方法过滤出 parentId 为 null 的节点，这些节点即为顶层节点。

第三步：递归地设置子节点数组

在这一步中，我们需要递归地将每个节点的 children 数组设置为对应的子节点数组。我们可以使用递归函数来实现这个功能。

function setChildren(node) {
  const children = nodeMap[node.id];
  if (children) {
    node.children = children;
    children.forEach(setChildren);
  }
}

result.forEach(setChildren);

上述代码中，我们定义了一个名为 setChildren 的递归函数。在每次递归中，我们首先从 nodeMap 中获取当前节点 node 的子节点数组 children。如果子节点数组存在，则将其设置为当前节点的 children 属性，并递归地调用 setChildren 函数来设置子节点的 children 数组。