前言
在前端开发中,我们经常会遇到树型结构的数据,也可能会遇到已经被扁平化了的数据,为了更方便的操作这些数据
我们就需要两个方法“扁平化数据”、“扁平化数据转树型数据”。
测试树型数据
const dataList = [
{
id: 1,
name: '菜单A',
children: [
{
id: 5,
parentId: 1,
name: '菜单A - 1'
},
{
id: 6,
parentId: 1,
name: '菜单A - 2',
children: [
{
id: 10,
parentId: 6,
name: '菜单A - 2 - 1'
}
]
}
]
},
{
id: 2,
name: '菜单B',
children: [
{
id: 7,
parentId: 2,
name: '菜单B - 1',
children: [
{
id: 11,
parentId: 7,
name: '菜单B - 1 - 1'
}
]
}
]
},
{
id: 3,
name: '菜单C',
children: [
{
id: 8,
parentId: 3,
name: '菜单C - 1'
}
]
},
{
id: 4,
name: '菜单D',
children: [
{
id: 9,
parentId: 4,
name: '菜单D - 1'
}
]
}
]
扁平化数组方法
// 判断数组是否可用
const isAvailableArray = (arr) => Array.isArray(arr) && arr.length > 0;
function flatTree(array, parentId) {
return array.reduce((tree, cur) => {
// 拿到遍历数据的 children
const children = cur.children
// return 返回新的数组
return [
...tree, // 解构 tree
parentId ? { ...cur, parentId } : cur,
// 判断当前的children是否可用,可用时直接继续调用flatTree方法,否则就是空数组
...(isAvailableArray(children) ? flatTree(children, cur.id) : [])
]
}, [])
}
console.log(flatTree(dataList))
输出结果以下
扁平化数组转树型结构
const flatArray = [
{
"id": 1,
"name": "菜单A",
},
{
"id": 5,
"parentId": 1,
"name": "菜单A - 1"
},
{
"id": 6,
"parentId": 1,
"name": "菜单A - 2",
},
{
"id": 10,
"parentId": 6,
"name": "菜单A - 2 - 1"
},
{
"id": 2,
"name": "菜单B",
},
{
"id": 7,
"parentId": 2,
"name": "菜单B - 1",
},
{
"id": 11,
"parentId": 7,
"name": "菜单B - 1 - 1"
},
{
"id": 3,
"name": "菜单C",
},
{
"id": 8,
"parentId": 3,
"name": "菜单C - 1"
},
{
"id": 4,
"name": "菜单D",
},
{
"id": 9,
"parentId": 4,
"name": "菜单D - 1"
}
]
function convertTree(flatArrayData, parentId, list = []) {
flatArrayData.forEach((item) => {
item.children = flatArrayData.filter((i) => i.parentId == item.id)
if (item.parentId == parentId) {
list.push(item)
}
})
return list
}
console.log(convertTree(flatArray))
输出结果以下