js无限分类递归树

首先了解一下什么是无限分类递归树（树形分类），如下示例：

    const arr = [
      { id: 1, pid: 0, name: '1' },
      { id: 2, pid: 0, name: '2' },
      { id: 3, pid: 1, name: '3' },
      { id: 4, pid: 3, name: '4' },
      { id: 5, pid: 4, name: '5' },
      { id: 6, pid: 2, name: '6' },
      { id: 7, pid: 6, name: '7' },
    ]

         如上有一个数组对象，每个对象由id、pid、name三个属性组成；那怎么将他们转换成树状呢？

        首先id是依次递增的，当pid的值等于id值时，就是该id的儿子，用一个children数组去存储这个对象，依次下去如下：

    let newArr = [
      {
        id: 1,
        pid: 0,
        name: '1',
        children: [
          {
            id: 3,
            pid: 1,
            name: '3',
            children: [
              {
                id: 4,
                pid: 3,
                name: '4',
                children: [
                  {
                    id: 5,
                    pid: 4,
                    name: '5',
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        id: 2,
        pid: 0,
        name: '2',
        children: [
          {
            id: 6,
            pid: 2,
            name: '6',
            children: [
              {
                id: 7,
                pid: 6,
                name: '7',
              },
            ],
          },
        ],
      },
    ]

代码如下：

    function setTreeData(data, str = 0) {
      return data.filter((item) => {
        if (item.pid === str) {
          item.children = setTreeData(data, item.id)
          return true
        }
      })
    }
    console.log(setTreeData(arr))

代码解析：

1. 先定义一个函数来进行封装
2. 然后利用数组filter方法进行筛选这个数组，filter返回的是筛选好的新数组
3. 进行判断，由于第一层的pid值需为0，所以str默认参数就设置为0（即str=0）
4. 如果pid为0就给该对象添加一个children属性（该属性值为数组）
5. 由于pid等于id就是此id的儿子，所以再次调用该函数找出pid等于id的对象