讨论来源: 面试了十几个高级前端,竟然连(扁平数据结构转Tree)都写不出来 - 掘金 (juejin.cn)
参考评论大神,最为简洁的方法如下:
扁平数据结构转Tree
//-----扁平数据结构转Tree----START----
interface LabelledValue {
id: number;
name: string;
pid: number;
children?: object;
}
const arr: Array<LabelledValue> = [
{ id: 5, name: '部门5', pid: 4 },
{ id: 3, name: '部门3', pid: 1 },
{ id: 1, name: '部门1', pid: 0 },
{ id: 4, name: '部门4', pid: 3 },
{ id: 2, name: '部门2', pid: 1 },
{ id: 6, name: '部门6', pid: 0 },
{ id: 7, name: '部门7', pid: 6 },
]
/**
*
* @param _arr
* @returns
*/
const toTree = (_arr: Array<LabelledValue>): Array<LabelledValue> => {
return _arr.map(item => {
item.children = _arr.filter(v => v.pid === item.id);
return item;
}).filter(item => !item.pid);
}
console.log(toTree(arr));
//-----扁平数据结构转Tree----END----
Tree转扁平数据结构
自己琢磨的...
//-----Tree转扁平数据结构----START----
interface LabelValue {
id: number;
name: string;
children?: Array<LabelValue>;
pid?: number;
}
const arrs: Array<LabelValue> = [
{
id: 5, name: '部门5', children: [
{
id: 9, name: 'xxx', children: [
{
id: 1, name: 'aaaaa', children: []
},
{
id: 11, name: 'tttt', children: [
{
id: 28, name: 'llll', children: [
{
id: 58, name: 'rrrr', children: null
}
]
}
]
}
]
},
{
id: 8, name: 'dddd', children: null
}
]
},
{
id: 85, name: 'dddd', children: []
}
]
/**
*
* @param _arr
* @returns
*/
const toArray = (_arr: Array<LabelValue>): Array<LabelValue> => {
const result: Array<LabelValue> = [];
const childrenMap = (item: Array<LabelValue>, pid: number): void => {
item.map(i => {
i.pid = pid;
if (i.children && i.children.length != 0) {
childrenMap(i.children, i.id);
}
delete i.children;
result.push(i);
return i;
});
}
arrs.map(item => {
item.pid = 0;
childrenMap(item.children, item.id);
delete item.children;
result.push(item);
return item;
});
return result;
}
console.log(toArray(arrs));
//-----Tree转扁平数据结构----END----