问答

js遍历树形结构

作者:admin 2021-04-09 我要评论

树形结构数据如下: const treeData = [{ title: '食品', name: '食品', key: '0-0', level: 0, type:'null', children: [ { title: '饼干', name: '饼干', key:...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

树形结构数据如下:

const treeData = [{
    title: '食品',
    name: '食品',
    key: '0-0',
    level: 0,
    type:'null',
    children: [
        {
            title: '饼干',
            name: '饼干',
            key: '0-0-0',
            level: 1,
            type:'null',
            children: [
                { title: '奥利奥', name:'奥利奥',key: '0-0-0-0',level:2,type:'hard',children:[{......}]},
                { title: '达能', name:'达能',key: '0-0-0-1',level:2,type:'soft' ,children:[{......}]},
                { title: '优冠', name:'优冠',key: '0-0-0-2' ,level:2,type:'soft',children:[{......}]},
            ],
        },
        {
            title: '糖果',
            name: '糖果',
            key: '0-0-1',
            level: 1,
            type:'null',
            children: [
                { title: '0-0-1-0', name:'徐福记',key: '0-0-1-0' ,level:2,type:'hard',children:[{......}]},
                { title: '0-0-1-1', name:'QQ糖',key: '0-0-1-1' ,level:2,type:'soft',children:[{......}]},
                { title: '0-0-1-2', name:'悠哈',key: '0-0-1-2' ,level:2,type:'hard',children:[{......}]},
            ],
        }
    ],
}];

如上述数据所示,数据层级不确定,可能有很多层。我想只遍历到level=2的这一层,并筛选出type='hard'的部分,type='soft'的部分以及其children全部省去,也就是说,处理之后数据变成这样:

const treeData = [{
    title: '食品',
    name: '食品',
    key: '0-0',
    level: 0,
    type:'null',
    children: [
        {
            title: '饼干',
            name: '饼干',
            key: '0-0-0',
            level: 1,
            type:'null',
            children: [
                { title: '奥利奥', name:'奥利奥',key: '0-0-0-0',level:2,type:'hard',children:[{......}]},
            ],
        },
        {
            title: '糖果',
            name: '糖果',
            key: '0-0-1',
            level: 1,
            type:'null',
            children: [
                { title: '0-0-1-0', name:'徐福记',key: '0-0-1-0' ,level:2,type:'hard',children:[{......}]},
                { title: '0-0-1-2', name:'悠哈',key: '0-0-1-2' ,level:2,type:'hard',children:[{......}]},
            ],
        }
    ],
}];

请问这个该怎么处理呢?

###
function filterNodes (nodes = [], callbackfn) {
  const result = [];
  for (const node of nodes) {
    if (callbackfn(node)) {
      const children = filterNodes(node.children, callbackfn);
      result.push({ ...node, children });
    }
  }

  return result;
}

const filteredNodes = filterNodes(
  treeData,
  node => 2 >= node.level && "soft" !== node.type,
);
###

function customFilter(tree, filter = {level: 2, type: 'hard'}) {
  return tree.filter(item => item.level !== filter.level || item.type === filter.type).map(item => {
    item.children && ( item.children = customFilter(item.children, filter));
    return item;
  });
}

customFilter(treeData);

ps: 递规不熟, 看效果好像是能符合要求

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器