有时候我们得到的数据结构并不是想要的,这个时候就需要对得到的数据进行处理了。比如,我们拿到的是扁平化的数组, 但我们要应用在 tree 树形组件或级联选择器组件中,这样的组件要求数据结构是具有层级递进关系的 tree 结构,或者我们并不需要层级递进的数据,那就要把它做扁平化处理了。
扁平化数组 => Tree
我们得到的数据是这个样子的,没有层级关系
var list = [
{'name':'基本概括','pid':1,'id':11},
{'name':'基本介绍','pid':11,'id':111},
{'name':'基本经理','pid':111,'id':1111},
{'name':'基本回报','pid':1,'id':12},
{'name':'业绩表现','pid':12,'id':112}
]
但我们需要的数据是这样的
[
{
"name": "基本概括",
"pid": 1,
"id": 11,
"children": [
{
"name": "基本介绍",
"pid": 11,
"id": 111,
"children": [
{
"name": "基本经理",
"pid": 111,
"id": 1111
}
]
}
]
},
{
"name": "基本回报",
"pid": 1,
"id": 12,
"children": [
{
"name": "业绩表现",
"pid": 12,
"id": 112
}
]
}
]
函数处理
function arrayToTree(list){
const treeData = [];
// forEach 遍历数组
list.forEach(item => {
// 根节点 直接push
if(item.pid == 1) {
treeData.push(item);
}
// pid等于id的属于它的子节点 放到children变量里
const children = list.filter(data => data.pid == item.id);
// 到达叶子节点后 return
if(!children.length) return;
// 把children放到对于的父节点里
item.children = children;
})
return treeData;
}
var list = [
{'name':'基本概括','pid':1,'id':11},
{'name':'基本介绍','pid':11,'id':111},
{'name':'基本经理','pid':111,'id':1111},
{'name':'基本回报','pid':1,'id':12},
{'name':'业绩表现','pid':12,'id':112}
]
console.log(arrayToTree(list));
数组扁平化
1. ES6扩展运算符
var arr = [1,2,[3,4,5,[[6,7],8],9]];
function flatten (arr) {
while(arr.some(item => Array.isArray(item))){
arr=[].concat(...arr);
}
return arr;
}
console.log(flatten(arr));
2. 递归
var arr = [1,2,[3,4,5,[[6,7],8],9]];
function flatten(arr) {
let result = [];
arr.forEach((item, i, arr) => {
if (Array.isArray(item)) {
result = result.concat(flatten(item));
} else {
result.push(arr[i])
}
})
return result;
};
console.log(flatten(arr));
好啦,没啦,拜拜!