js实现对象数组转树形结构【全网最严谨】

2024-01-09 15:58:23

对象数组转换为树形结构的主要思路:

  1. 初始化一个空数组 tree 用于存储最终的树形结构,以及一个空对象 map 用于存储每个元素的索引。

  2. 遍历输入的数组 arr,对于每个元素 item,首先创建一个空数组 item.children 用于存储其子元素,然后将 item.id 和当前索引 i 存入 map。

  3. 检查 item.pid 是否存在。如果 item.pid 不存在或者为0,说明 item 是树的根节点,将其添加到 tree 中。如果 item.pid 存在且不为0,说明 item 是某个元素的子节点,将 item 添加到其父节点的 children 数组中。这里通过 map[pid] 可以快速找到父节点在 arr 中的位置。

  4. 遍历结束后,返回 tree,即为转换后的树形结构。

这种方法的关键在于使用 map 对象来快速定位每个元素的父节点,从而避免了在添加子节点时需要遍历整个数组的问题。

const arrayToTree = (arr) => {
  if (!Array.isArray(arr) || arr.length === 0) return [];
  const tree = [];
  const map = {};
  // 本次遍历的目的是为了防止在arr数据混乱的情况下,下面的【map[pid]】找不到对应的值
  arr.forEach((item, index) => {
    map[item.id] = index; // 以id为key,下标为value,方便后面根据pid,找到原来数组的下标,然后添加children
  });
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    item.children = [];
    const pid = item.pid || 0;
    if (pid !== 0) {
      arr[map[pid]].children.push(item);
    } else {
      tree.push(item);
    }
  }
  return tree;
};

// test
const arr = [
  { id: 1, pid: null, name: "1" },
  { id: 2, pid: null, name: "2" },
  { id: 3, pid: 1, name: "3" },
  { id: 4, pid: 1, name: "4" },
  { id: 5, pid: 2, name: "5" },
  { id: 6, pid: 2, name: "6" },
  { id: 7, pid: null, name: "7" },
];

console.log(arrayToTree(arr));

文章来源:https://blog.csdn.net/yiguoxiaohai/article/details/135479342
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。