树 -> 数组
当我们收到如下一棵树,需要转成一维数组时
const nav = [
{
id: 1,
subitems: [
{
id: 2,
subitems: [
{
id: 3,
subitems: [],
},
{
id: 4,
subitems: [],
},
],
},
{
id: 5,
subitems: [],
},
],
},
{
id: 6,
subitems: [],
},
];
export function flatten (array) {
// return array.map(item => [].concat(item, ...item.subitems))// 只能2级
const arr2d = array.map(item => [].concat(item, ...flatten(item.subitems)))// 多级(转成二维数组)
return [].concat(...arr2d)// 二维转一维
}
方便我们在第一级就拿到所有元素
数组 -> 树
当我们收到如下一维数组,需要转成一棵树时
[
{ "id": 19, "pid": 0, "title": "幼儿发展检核表" },
{ "id": 20, "pid": 0, "title": "阶段测评" },
{ "id": 21, "pid": 0, "title": "感觉统合能力发展" },
{ "id": 22, "pid": 19, "title": "1.5岁" },
{ "id": 23, "pid": 19, "title": "2岁" },
{ "id": 24, "pid": 20, "title": "A" },
{ "id": 25, "pid": 20, "title": "B" },
{ "id": 26, "pid": 21, "title": "前庭功能" },
{ "id": 27, "pid": 21, "title": "触觉功能" },
{ "id": 28, "pid": 21, "title": "本体觉功能" },
{ "id": 29, "pid": 22, "title": "艺术感知" },
{ "id": 30, "pid": 22, "title": "生活习惯" },
{ "id": 31, "pid": 22, "title": "健康运动" },
{ "id": 32, "pid": 22, "title": "情绪情感" },
{ "id": 33, "pid": 22, "title": "认知探索" },
{ "id": 34, "pid": 22, "title": "语言发展" },
{ "id": 35, "pid": 24, "title": "艺术感知" },
{ "id": 36, "pid": 24, "title": "生活习惯" },
{ "id": 37, "pid": 24, "title": "健康运动" },
{ "id": 38, "pid": 24, "title": "情绪情感" },
{ "id": 39, "pid": 24, "title": "认知探索" },
{ "id": 40, "pid": 24, "title": "语言发展" },
{ "id": 41, "pid": 25, "title": "语言发展" },
{ "id": 42, "pid": 25, "title": "认知探索" },
{ "id": 48, "pid": 23, "title": "生活习惯" },
{ "id": 49, "pid": 23, "title": "健康运动" }
]
export function formatTreeData(orgList) {
const treeList = []
for (let i = 0, len = orgList.length; i < len; i++) {
const item = queryChildren(orgList[i], orgList)
treeList.push(item)
}
return treeList.filter(item => !item.pid)
function queryChildren(parent, list) {
const children = []
for (let i = 0, len = list.length; i < len; i++) {
if (list[i].pid === parent.id) {
const item = queryChildren(list[i], list)
children.push(item)
}
}
if (children.length) {
parent.children = children
}
return parent
}
}
适用于一些需要树形结构的情况(如级联选择)