扁平数组结构与JSON树形结构 数据转化

扁平数组结构与JSON树形结构 数据转化

什么是扁平数组？

let flatArr = [
    { id: 1, title: '标题1', parent_id: null },
    { id: 2, title: '标题2', parent_id: 0 },
    { id: 3, title: '标题2-1', parent_id: 2 },
    { id: 4, title: '标题3-2', parent_id: 7 },
    { id: 5, title: '标题3-1', parent_id: 6 },
    { id: 6, title: '标题3', parent_id: 0 },
];

什么是JSON树形结构？

[
    {
        "id":1,
        "title":"标题1",
        "parent_id":null
    },
    {
        "id":2,
        "title":"标题2",
        "parent_id":0,
        "children":[
            {
                "id":3,
                "title":"标题2-1",
                "parent_id":2
            }
        ]
    },
	.....
]

准备数据

let flatArr = [
    { id: 1, title: '标题1', parent_id: null },
    { id: 2, title: '标题2', parent_id: 0 },
    { id: 3, title: '标题2-1', parent_id: 2 },
    { id: 4, title: '标题3-2', parent_id: 7 },
    { id: 5, title: '标题3-1', parent_id: 6 },
    { id: 6, title: '标题3', parent_id: 0 },
];

扁平数组结构转化为JSON树形结构

// 扁平数组结构转化为JSON树形结构
function convert(list) {
    const result = [];
    //设置键值对集合
    const map = list.reduce((pre, cur) => {
        pre[cur.id] = cur;
        return pre;
    }, {});
    // item 一共三种状态，
    //      1、父亲id不存在，
    //      2、父亲id在传回来的数组中，
    //      3、父亲id不在传回来的数组中
    for (let item of list) {
        //父亲id不存在 
        if (item.parent_id === 0) {
            result.push(item);
            continue;
        }
        //父亲id在传回来的数组中，
        if (item.parent_id in map) {
            const parent = map[item.parent_id];
            parent.children = parent.children || [];
            parent.children.push(item);
        } else {
            //父亲id不在传回来的数组中
            result.push(item);
        }
    }
    return result;
}

JSON树形结构转化为扁平数组结构

// JSON树形结构转化为扁平数组结构
function faltten(data) {
    return data.reduce((pre, cur) => {
        // const
        const { id, title, parent_id, children = [] } = cur;
        return pre.concat([{ id, title, parent_id }], faltten(children));
    }, []);
}

经测试，数据显示正确。