首页 > 其他分享 >JS树形数组扁平化

JS树形数组扁平化

时间:2023-10-25 11:35:22浏览次数:33  
标签:bossArr 扁平化 value children 树形 JS id name

如题,有时候需要对树形数组深层去找符合字段的那一串json,苦于循环找太费劲,索引选择扁平化,找起来方便很多

 let treeList = [{
                id: '1',
                name: '水果',
                value: 3,
                children: [{
                    id: '1-1',
                    name: '西瓜',
                    value: 2,
                    children: [{
                            id: '1-1-1',
                            name: '西瓜皮',
                            value: 1,
                            children: [],
                        },
                        {
                            id: '1-1-2',
                            name: '西瓜种子',
                            value: 1,
                            children: [],
                        }
                    ]
                }, {
                    id: '1-2',
                    name: '柚子',
                    value: 1,
                    children: [],
                }, {
                    id: '1-3',
                    name: '橘子',
                    value: 1,
                    children: [],
                }]
            },
            {
                id: '2',
                name: '肉',
                value: 4,
                children: [{
                        id: '2-1',
                        name: '牛肉',
                        value: 1,
                        children: [{
                                id: '2-1-2',
                                name: '和牛肉',
                                value: 1,
                                children: [],
                            },
                            {
                                id: '2-1-2',
                                name: '澳牛肉',
                                value: 1,
                                children: [],
                            }
                        ],
                    }, {
                        id: '2-2',
                        name: '羊肉',
                        value: 1,
                        children: [],
                    }, {
                        id: '2-3',
                        name: '猪肉',
                        value: 1,
                        children: [],
                    },
                    {
                        id: '2-4',
                        name: '鱼肉',
                        value: 1,
                        children: [],
                    }
                ]
            },
            {
                id: '3',
                name: '蔬菜',
                value: 2,
                children: [{
                    id: '3-1',
                    name: '大白菜',
                    value: 1,
                    children: [],
                }, {
                    id: '3-2',
                    name: '菠菜',
                    value: 1,
                    children: [],
                }]
            },
 
        ];
        console.log(treeList);

  

 

封装函数如下:

        //扁平化
        /*
         *  bossArr  树形数据
         *  children 树形数据子数据的属性名, 本项目为 children
         * */
        function extractTree(bossArr, children) {
            //如果为空 返回空(防止 children 递归报错)
            if (!Array.isArray(bossArr) && !bossArr.length) return [];
            let list = [];
            const getObj = (arr) => {
                arr.forEach((row) => {
                    let obj = {};
                    obj = JSON.parse(JSON.stringify(row));
                    list.push(obj);
                    if (row[children]) {
                        getObj(row[children]);
                    }
                });
                return list;
            };
            return getObj(bossArr);
        }
        const newList = extractTree(treeList, 'children');
        console.log(newList);
View Code

 

标签:bossArr,扁平化,value,children,树形,JS,id,name
From: https://www.cnblogs.com/j-a-h/p/17786731.html

相关文章

  • Jmeter之json提取器
    Jmeter之json提取器一、json提取器设置多个变量获取多个数据1、json的Path表达式:$.data.result[*].data.tradeTitle $表示根元素,然后一级级属性往下去找,先找到data,再往下子节点找到result,[*]表示该节点下有多个子节点。然后找到data,再找到tradeTitle2、添加:后置处理器——j......
  • js中使用css变量(vue)
    html<divclass="test":style="{'--backgroundColor':backgroundColor}"></div>jscss .test{background-color:var(--backgroundColor);} ......
  • C# 一个简陋轻便的Json字符串拼接类
    有的时候我们要以Json格式的形式传递参数,用模型或匿名类传给json库转的话,感觉很浪费,但是自己手动拼的话有比较麻烦,因此封装了一个拼接类,非常简陋JsonStringBuilderusingSystem;usingSystem.Text;namespaceConsoleApp{///<summary>///简单的json字符串构建......
  • 2023年值得使用的 Node.js 框架
    2023年值得使用的Node.js框架Hacker2022-05-2623,542阅读10分钟 专栏: 前端随记 Node.js是最受欢迎的JavaScript运行时,今天就来看看有哪些热门、值得使用的Node.js框架。1.Next.jsNext.js是一个用于生产环境的React应用框架,使用它可以快速上手开发R......
  • js 动态代理
    //useProxy.jsconstuseProxy=()=>{constenv_arr=['document','window','navigator','localStorage']constenv={}env_arr.forEach((value,index,array)=>{env[value]=env[value]......
  • 23.10.24(jsp下拉框添加默认值)
    通过查阅网上资料,得到jsp下拉框默认值的设置方式:<selectname="zy"id="zy"required><optionvalue="0"></option><optionvalue="信息工程"<%=selectValue.equals("信息工程")?"selected&......
  • 在NodeJS中使用npm包实现JS代码混淆加密
    使用npm包,在NodeJS中实现JS代码混淆加密在前后端JS开发过程中,JS代码保护(JS代码混淆加密)是非常重要的一环。JShaman是一个云端的代码保护Saas平台,可以对JS代码进行混淆、加密、压缩等操作,从而增强JS代码的安全性。同时,JShaman还有更方便易用的npm包,方便开发人员通过调用接口的方式,快......
  • JS 小数取整的几种方式
    1、Math.ceil()方法:向上取整,不管小数部分是多少,整数部分值都+1Math.ceil(3/2)输出:22、Math.floor()方法:向下取整,不管小数部分是多少,整数部分值都不变,只取整数部分Math.floor(3/2)输出:13、Math.round()方法:四舍五入取整Math.round(3/2)输出:24、parseInt()方法:抛去小数部分,不......
  • Visual Studio code中运行JS代码
    第一步:安装插件: 下面output可以看到输出  2、visualstudiocode中如何创建项目;参考地址:https://blog.csdn.net/weixin_45991687/article/details/123859403?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169814378016800180691969%2522%252C%2522scm%25......
  • js替换模版中${}的内容
    【转】https://blog.csdn.net/xiangzaixiansheng/article/details/132501772要在js中想要替换替换模板中的${},可以使用字符串的replace()方法结合正则表达式或者函数来实现替换操作。以下是两种常见的替换方式:使用正则表达式:方法一:consttemplate="Hello,${name}!Today......