扁平数据结构转Tree & Tree数据扁平化

一、扁平数据结构 转 树形结构

var arr = [
	{ id: 1, name: '部门1', pid: 0 },
	{ id: 2, name: '部门2', pid: 1 },
	{ id: 3, name: '部门3', pid: 1 },
	{ id: 4, name: '部门4', pid: 3 },
	{ id: 5, name: '部门5', pid: 4 }
]

如上一个数据结构，将他转为树形结构。

[
    {
        "id": 1,
        "name": "部门1",
        "pid": 0,
        "children": [
            {
                "id": 2,
                "name": "部门2",
                "pid": 1
            },
            {
                "id": 3,
                "name": "部门3",
                "pid": 1,
                "children": [
                    {
                        "id": 4,
                        "name": "部门4",
                        "pid": 3,
                        "children": [
                            {
                                "id": 5,
                                "name": "部门5",
                                "pid": 4
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

• 方法一

listToTree(arr) {
	arr.forEach(s => {
		s.children = []
		arr.forEach(d => {
			if (s.id === d.pid) {
				s.children.push(d)
			}
		})
	})
	return arr.filter(item => item.pid === 0)
}

解析：

遍历两次原数组，并在第一次遍历的时候给数组的每一项添加一个children属性。在第二次遍历的时候就开始比较，用本身id去比对每一项的pid。如果相等，即说明找到了儿子，那就将其push进自身的children数组里。最后return的时候做个筛选，返回最高等级的也就是pid为0的那一项。

• 方法二

	listToTree(arr) {
	  var tree = []
	  var hash = {}
	  var id = 'id'
	  var pid = 'pid'
	  var children = 'children'
	  var i = 0
	  var len = arr.length
	  for (; i < len; i++) {
	    hash[arr[i][id]] = arr[i]
	  }
	  for (i = 0; i < len; i++) {
	    var aVal = arr[i]
	    var hashVP = hash[aVal[pid]]
	    if (hashVP) {
	      !hashVP[children] && (hashVP[children] = [])
	      hashVP[children].push(aVal)
	    } else {
	      tree.push(aVal)
	    }
	  }
	  return tree
	}

GitHub Copilot 插件给出。

二、树形结构 转 扁平数据结构

function flat(arr){
	let newArr = [];
	for(let i = 0; i < arr.length; i++) {
		if(arr[i].children){ // children存在
			newArr.push(...flat(arr[i].children));
			delete arr[i].children;
		}
		newArr.push({...arr[i]});
	}
	return newArr;
}