ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js实现无限层级树形数据结构 组装树形结构,含 反向扁平化

2021-07-07 18:32:29  阅读:241  来源: 互联网

标签:扁平化 parent children item 树形 模块 js id name


/*
* 组装树形函数 (树形有无限层级)
* 根据parent_id 将数据组装到每个元素children属性当中 parent_id = 0 为最顶级元素
*/

 

/*
 * js实现无限层级树形数据结构(创新算法)
 * 根据parent_id 将数据组装到每个元素children属性当中 parent_id = 0 为最顶级元素
 * Note: 把扁平数据转成树形数据
 */

const data = [
    { id: 1, name: '模块1', parent_id: 0, children: [] },
    { id: 2, name: '子模块1-1', parent_id: 1, children: [] },
    { id: 3, name: '子模块1-2', parent_id: 1, children: [] },
    { id: 4, name: '模块3', parent_id: 0, children: [] },
    { id: 5, name: '子模块3-1', parent_id: 4, children: [] },
    { id: 6, name: '子模块1-2-1', parent_id: 3, children: [] },
];

function getNestedChildren(arr, parent) {
    const res = [];
    for (let item of arr) {
        if (item.parent_id === parent) {
            const children = getNestedChildren(arr, item.id);
            if (children.length) {
                item.children = children;
            }
            res.push(item);
        }
    }
    return res;
}

const arr = [
    {
        id: 1,
        name: '模块1',
        parent_id: 0,
        children: [
            { id: 2, name: '子模块1-1', parent_id: 1, children: [] },
            {
                id: 3,
                name: '子模块1-2',
                parent_id: 1,
                children: [{ id: 6, name: '子模块1-2-1', parent_id: 3, children: [] }],
            },
        ],
    },
    { id: 4, name: '模块3', parent_id: 0, children: [{ id: 5, name: '子模块3-1', parent_id: 4, children: [] }] },
];

// 反向操作
function getFlattenChildren(arr = []) {
    let res = [];
    arr.forEach(item => {
        res.push(item);
        if (item.children) {
            res.push(...helper(item.children));
        }
    });
    return res;
}

 

标签:扁平化,parent,children,item,树形,模块,js,id,name
来源: https://www.cnblogs.com/keeperdog/p/14982928.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有