js扁平数组数组改为树形结构数据

数组转成树形结构数据

做项目遇到了好多次数组转成树形结构数据，于是总结了一下自己查到的没查到的方法：

// 原数据
let arr = [{
          id: 1,
          parentId: 0
         },
         {
           id: 2,
           parentId: 0
         },
         {
           id: 3,
           parentId: 0
         },
         {
           id: 4,
           parentId: 0
         },
         {
           id: 5,
           parentId: 0
         },
         {
           id: 6,
           parentId: 0
         },
         {
           id: 8,
           parentId: 1
         },
         {
           id: 9,
           parentId: 1
         },
         {
           id: 10,
           parentId: 1
         },
         {
           id: 11,
           parentId: 2
         },
         {
           id: 12,
           parentId: 9
         }];
// 理想数据
[
    {
        "id": 1,
        "parentId": 0,
        "children": [
            {
                "id": 8,
                "parentId": 1
            },
            {
                "id": 9,
                "parentId": 1,
                "children": [
                    {
                        "id": 12,
                        "parentId": 9
                    }
                ]
            },
            {
                "id": 10,
                "parentId": 1
            }
        ]
    },
    {
        "id": 2,
        "parentId": 0,
        "children": [
            {
                "id": 11,
                "parentId": 2
            }
        ]
    },
    {
        "id": 3,
        "parentId": 0
    },
    {
        "id": 4,
        "parentId": 0
    },
    {
        "id": 5,
        "parentId": 0
    },
    {
        "id": 6,
        "parentId": 0
    }
]

通过循环遍历实现

	// for循环
     getTree(list) {
       let cloneList = JSON.parse(JSON.stringify(list)); // 对源数据深度克隆
       return cloneList.filter(parent => { // 循环所有项,如果条件符合，添加children属性
         let cloneArr = cloneList.filter(child => parent.id === child.parentId); // 返回每一项子级数组
         if (cloneArr.length > 0) {
           parent.children = cloneArr;
         }
         return parent.parentId === 0;
       });
     },
	// 使用
	console.log(this.getTree(arr));

通过递归实现

	// 递归
 	getTree(list, pid) {
       let cloneList = JSON.parse(JSON.stringify(list));
       let temp = [];
       cloneList.forEach(item => {
         if (item.parentId === pid) {
           const children = this.getTree(cloneList, item.id);
           if (children && children.length > 0) {
             item.children = children;
           }
           temp.push(item);
         }
       });
       return temp;
     },
	//使用
	console.log(this.getTree(arr, 0));