TypeScript 扁平数据结构转Tree 与 Tree转扁平数据结构

561 阅读1分钟

讨论来源: 面试了十几个高级前端,竟然连(扁平数据结构转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----