数组转树结构的几种常见方法

数组转树是面试常问题，记录一下几种常见方法,通常后端返回的数据是数组，而前端在处理一些树形展示的时候就需要先把数据结构转成对应的树形结构。

      /**
       * 1.生成map结构
       * 2.遍历数组，如果当前项不存在父元素，说明当前项属于顶级元素，放入结果数组
       * 3.如果当前项存在父元素，将当前元素放入父元素的children中。
       * 4.返回数组
       */
      //   function arrToTree(arr) {
      //     let result = [];
      //     let map = {};

      //     arr.forEach((item) => {
      //       map[item.id] = item;
      //     });

      //     arr.forEach((item) => {
      //       if (map[item.pid]) {
      //         map[item.pid].children = map[item.pid].children || [];
      //         map[item.pid].children.push(item);
      //       } else {
      //         result.push(item);
      //       }
      //     });

      //     return result;
      //   }

      /**
       * 1.遍历数组，取出数组的所有子元素。
       * 2.遍历数组，将当前项的所有子元素赋值给当前项的children
       * 3.返回父级元素
       */
      //   function arrToTree1(arr) {
      //     return arr.filter((item) => {
      //       const children = arr.filter((child) => child.pid === item.id);
      //       item.children = children;
      //       return item.pid === 0;
      //     });
      //   }

      /**
       * 1. 递归方法
       * 2. 遍历数组，如果当前项的pid = 0,说明是父元素， 通过递归调用获取当前项的子元素，并赋值给children
       * 3. 最后将所有结果放入result返回
       */
      function arrToTree2(arr, pid = 0) {
        let result = [];
        arr.filter((item) => {
          if (item.pid === pid) {
            item.children = arrToTree2(arr, item.id);
            result.push(item);
          }
        });
        return result;
      }

      console.log(arrToTree2(arr));
    </script>
  </body>
</html>