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

判断每一个层级的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为空,所以把这条数组删除

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

阅读 2.8k
2 个回答

你之前不是问过类似问题么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)))
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题