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

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

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) {
      const parent = arr[map[pid]]["children"];
      // 可能原来的数据存在一定混乱，这样可以更加严谨一点，不报push属性找不到的错
      if (Array.isArray(parent)) {
        parent.push(item);
      } else {
        parent = [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));