问答

js 树形结构数据根据条件改造

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

判断每一个层级的children,如果children为空那么就把那条children对应的数组给删除,数据结构不变,仅删除 数据结构↓ const data = [{ name: '水果大全', id: ...

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

判断每一个层级的children,如果children为空那么就把那条children对应的数组给删除,数据结构不变,仅删除

数据结构↓

const data = [{
        name: '水果大全',
        id: '111',
        children: [{
          name: '浆果类',
          id: '112',
          children: [{
            name: '草莓',
            id: '113'
          }, {
            name: '桑椹',
            id: '114'
          }]
        }, {
          name: '柑橘类',
          id: '116',
          children: []
        }]
      }, {
        name: '奥特曼大全',
        id: '119',
        children: [{
          name: '昭和类',
          id: '120',
          children: [{
            name: '杰克',
            id: '121'
          }, {
            name: '泰罗',
            id: '122'
          }]
        }, {
          name: '平成类',
          id: '124',
          children: []
        }]
      }, {
        name: '电影大全',
        id: '125',
        children: []
      }, {
        name: '手机大全',
        id: '127',
        children: []
      }]

理想效果↓

const data = [{
        name: '水果大全',
        id: '111',
        children: [{
          name: '浆果类',
          id: '112',
          children: [{
            name: '草莓',
            id: '113'
          }, {
            name: '桑椹',
            id: '114'
          }]
        }]
      }, {
        name: '奥特曼大全',
        id: '119',
        children: [{
          name: '昭和类',
          id: '120',
          children: [{
            name: '杰克',
            id: '121'
          }, {
            name: '泰罗',
            id: '122'
          }]
        }]
      }]

我该怎么操作才能达到效果呢~..

比如说像

     {
        name: '电影大全',
        id: '125',
        children: []
      }

这条数据,他的children为空,所以把这条数组删除

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

###

你之前不是问过类似问题么js/vue/react 如何优化以下代码,参考那个问题的回答稍稍修改下:

function filter(data) {
    function cb(node) {
        if(!node.children) {
            return true;
        }
        const children = node.children.filter(cb);
        return children.length === 0 ? false : (node.children = children);
    }
    return cb({ children: data });
}

// TEST
filter(data)
###

使用递归过滤

function filterTree (data = []) {
  const isHas = v => Array.isArray(v.children) && v.children.length > 0
  const helper = (root) => {
    if (!isHas(root)) return
    const children = root.children.filter(v => !v.children || isHas(v))
    children.forEach(v => helper(v))
    root.children = children
  }
   data.forEach(helper)
  return data.filter(isHas)
}
const tree = [{
  name: '水果大全',
  id: '111',
  children: [{
    name: '浆果类',
    id: '112',
    children: [{
      name: '草莓',
      id: '113'
    }, {
      name: '桑椹',
      id: '114'
    }]
  }, {
    name: '柑橘类',
    id: '116',
    children: []
  }]
}, {
  name: '奥特曼大全',
  id: '119',
  children: [{
    name: '昭和类',
    id: '120',
    children: [{
      name: '杰克',
      id: '121'
    }, {
      name: '泰罗',
      id: '122'
    }]
  }, {
    name: '平成类',
    id: '124',
    children: []
  }]
}, {
  name: '电影大全',
  id: '125',
  children: []
}, {
  name: '手机大全',
  id: '127',
  children: []
}]

console.log( JSON.stringify(filterTree(tree)))

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

相关文章
  • js 树形结构数据根据条件改造

    js 树形结构数据根据条件改造

  • 合并两个对象后改变属性值原对象值也改

    合并两个对象后改变属性值原对象值也改

  • js数据递归,组成树形结构数据,求指教

    js数据递归,组成树形结构数据,求指教

  • python+ pycharm 环境安装 + pycharm使

    python+ pycharm 环境安装 + pycharm使

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