let list = [
{ id: '1', content: '河北省' },
{ id: '2', content: '山东省' },
{ id: '3', content: '河南省' },
{ id: '1-1', pid: '1', content: '廊坊市' },
{ id: '1-1-1', pid: '1-1', content: '安次区' },
{ id: '1-1-1-1', pid: '1-1-1', content: '新中街' },
{ id: '1-1-1-2', pid: '1-1-1', content: '育才路' },
{ id: '1-1-2', pid: '1-1', content: '广阳区' },
{ id: '1-2', pid: '1', content: '石家庄市' },
{ id: '1-3', pid: '1', content: '唐山市' },
{ id: '2-1', pid: '2', content: '济南市' },
{ id: '2-2', pid: '2', content: '青岛市' },
{ id: '2-3', pid: '2', content: '潍坊市' },
];
//将以上扁平数组改为以下树形数组
// let result = [
// {
// id: '1',
// content: '河北省',
// children: [
// {
// id: '1-1',
// pid: '1',
// content: '廊坊市',
// children: [
// {
// id: '1-1-1',
// pid: '1-1',
// content: '安次区',
// children: [
// {
// id: '1-1-1-1',
// pid: '1-1-1',
// content: '新中街'
// },
// {
// id: '1-1-1-2',
// pid: '1-1-1',
// content: '育才路'
// }
// ]
// },
// {
// id: '1-1-2',
// pid: '1-1',
// content: '广阳区'
// }
// ]
// },
// {
// id: '1-2',
// pid: '1',
// content: '石家庄市'
// },
// {
// id: '1-3',
// pid: '1',
// content: '唐山市'
// }
// ]
// },
// {
// id: '2',
// content: '山东省',
// children: [
// {
// id: '2-1',
// pid: '2',
// content: '济南市'
// },
// {
// id: '2-2',
// pid: '2',
// content: '青岛市'
// },
// {
// id: '2-3',
// pid: '2',
// content: '潍坊市'
// }
// ]
// },
// {
// id: '3',
// content: '河南省'
// }
// ];
//给list中每个元素增加一个children属性,并将list中的
//元素重新排序,将子节点放到对应的父节点的children中
function makeTree(list) {
let temp = new Map();
let result = [];
//遍历list中的元素,将list转换成一个map,其中key为id,
//value为元素对象
list.forEach(element => {
temp.set(element.id, element);
});
console.log(temp)
//重新排序list,将每个元素插入到对应父节点的children属性中
list.forEach(element => {
if (element.pid) {
if (temp.get(element.pid).children == undefined) {
temp.get(element.pid).children = []
temp.get(element.pid).children.push(element)
} else {
temp.get(element.pid).children.push(element)
}
} else {
result.push(element)
}
})
console.log(result)
}
makeTree(list)
js将扁平数组转化为树形数组
于 2022-04-21 12:19:56 首次发布