问答

js/vue/react 如何优化以下代码

作者:admin 2021-05-06 我要评论

for (const i in data) { for (const z in data[i].children) { for (const u in data[i].children[z].children) { if (!data[i].children[z].children[u].isAut...

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

遍历这个data里children里的children,如果这里面的isOpen为false,就删除这条数据,这样子写很乱,希望大神们能帮优化以下

原数据结构参考↓

const data = [{
        name: '水果大全',
        id: '111',
        children: [{
          name: '浆果类',
          id: '112',
          children: [{
            name: '草莓',
            id: '113',
            isOpen: true
          }, {
            name: '桑椹',
            id: '114',
            isOpen: true
          }, {
            name: '黑莓',
            id: '115',
            isOpen: true
          }]
        }, {
          name: '柑橘类',
          id: '116',
          children: [{
            name: '橘子',
            id: '117',
            isOpen: true
          }, {
            name: '橙子',
            id: '118',
            isOpen: true
          }]
        }]
      }, {
        name: '奥特曼大全',
        id: '119',
        children: [{
          name: '昭和类',
          id: '120',
          children: [{
            name: '杰克',
            id: '121',
            isOpen: true
          }, {
            name: '泰罗',
            id: '122',
            isOpen: true
          }, {
            name: '艾斯',
            id: '123',
            isOpen: true
          }]
        }, {
          name: '平成类',
          id: '124',
          children: [{
            name: '迪迦',
            id: '125',
            isOpen: true
          }, {
            name: '盖亚',
            id: '126',
            isOpen: false // 这里是false,所以不要这一条id为126,name为盖亚的数据
          }]
        }]
      }]

感谢各位大神大哥的指导,先感谢你们的回答,小弟感激不尽,还请轻喷!

###
const func = arr => {
      return arr
        .filter(r => r.isOpen !== false)
        .map(item => {
          const res = { ...item };
          if (item.children) res.children = func(item.children);
          return res;
        });
    };
   func(data) 
###

data每个元素相当于一棵树,需要过滤树的叶子节点,利用filter方法:

function filter(data) {
    function cb(node) {
        // 叶子节点通过isOpen过滤
        if(!node.children) {
            return node.isOpen;
        }
        return node.children = node.children.filter(cb);
    }
    // 原始data作为root节点的children
    return cb({ children: data });
}

// TEST
filter(data)

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

相关文章
  • js/vue/react 如何优化以下代码

    js/vue/react 如何优化以下代码

  • vue 开发微信H5  授权 301的时候 白页

    vue 开发微信H5 授权 301的时候 白页

  • js拖拽组件

    js拖拽组件

  • Android OKHttp 获取服务器的 Json 数

    Android OKHttp 获取服务器的 Json 数

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