1. 一维数组转化成Tree形数据
1-1 准备一个一维数组
let list = [
{
pid: 0,
id: 1,
name: '总公司'
},
{
pid: 1,
id: 11,
name: '北京公司'
},
{
pid: 1,
id: 12,
name: '上海公司'
},
{
pid: 1,
id: 13,
name: '郑州公司'
},
{
pid: 11,
id: 111,
name: '北京子公司1'
},
{
pid: 11,
id: 112,
name: '北京子公司2'
},
{
pid: 12,
id: 121,
name: '上海子公司1'
},
{
pid: 12,
id: 122,
name: '上海子公司2'
},
{
pid: 121,
id: 1211,
name: '上海子公司1的子公司1'
},
{
id: 2,
name: '南京总公司'
},
]
1-2 封装一个将一维数组转化成Tree形数据的函数
/**
* 将数据转化成 --> 树形节点
* 参数: data 需要转化的一维数组数据; rootValue 根节点的pid值
*/
const flatdataToTreedata = (data, rootValue) => {
const arr = []
data.forEach(item => {
if (!item.pid) {
arr.push(item);
} else if (item.pid == rootValue) {
arr.push(item)
const children = flatdataToTreedata(data, item.id)
children.length && (item.children = children)
}
})
return arr
}
1-3 函数调用, 输出转化后的 tree 形数据
let listData = flatdataToTreedata(list, 0)
console.log('转化后的树形数组', listData)
2. Tree形数据转换成一维数组(tree形数据的扁平化)
2-1 准备Tree形数据
let treeData = [
{
id: 1,
pid: 0,
name: '河南省',
children: [
{
id: 11,
pid: 1,
name: '郑州市',
},
{
id: 12,
pid: 1,
name: '洛阳市',
},
{
id: 13,
pid: 1,
name: '南阳市',
children: [
{
id: 131,
pid: 13,
name: '方城县',
children: [
{
id: 1311,
pid: 131,
name: '博望镇',
children: [
{
id: 13111,
pid: 1311,
name: '秦王庙村',
},
{
id: 13112,
pid: 1311,
name: '白河村',
},
{
id: 13112,
pid: 1311,
name: '赵岗村',
}
]
},
{
id: 1312,
pid: 131,
name: '赵河镇'
},
{
id: 1313,
pid: 131,
name: '广阳镇'
},
{
id: 1314,
pid: 131,
name: '清河镇'
},
]
},
{
id: 132,
pid: 13,
name: '南召县',
},
{
id: 131,
pid: 13,
name: '社旗县',
},
{
id: 131,
pid: 13,
name: '镇平县',
}
]
},
{
id: 14,
pid: 1,
name: '安阳市',
},
]
},
{
id: 2,
pid: 0,
name: '河北省',
children: [
{
id: 21,
pid: 2,
name: '廊坊市',
},
{
id: 22,
pid: 2,
name: '天津市',
},
{
id: 23,
pid: 2,
name: '邢台市',
},
]
}
]
2-2 封装一个将Tree形数据转化成一维数组的函数
// 树形数据扁平化
function treeToFlat (data) {
let ary = []
data.forEach(item => {
if (item.children) {
ary.push(item)
if (item.children.length > 0) {
ary.push(...treeToFlat(item.children))
}
} else {
ary.push(item)
}
delete (item.children)
})
return ary
}
2-3 函数调用, 输出转化后的一维数组
let flatDtata = treeToFlat(treeData)
console.log('一维数组数据', flatDtata)
3. 对互转函数的正确性进行验证
// 将转化后的一维数组再转化成Tree形数据, 并与Tree形数据treeData进行对
console.log('验证一维数组与Tree形数据之间的互转', flatdataToTreedata(flatDtata, 0))