js/vue/react 通过条件判断删除树形结构某条数据

Question

数据结构↓

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为盖亚的数据
          }]
        }]
      }]

如上代码所示，用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
          }]
        }]
      }]   

我该怎么操作呢，感谢各位大神大哥的指导，可能对你们来说很简单，但我对树形结构得操作一窍不通，先感谢你们的回答，小弟感激不尽，还请轻喷！

Answer 1

demo(data, 2)
console.log('删除后的数据：', data)
/**
 * @param {Array} list 
 * @param {Number} targetTier 需要操做的层数
 * @param {Number} [tier=0] 起始层数，默认0
 * @return {Array} 删除后的数据
*/
function demo (list, targetTier, tier) {
  tier = tier || 0
  if(getType(list) === 'Array') {
    for(var a = 0, item; a < list.length; a++) {
      item = list[a]
      if(getType(item) === 'Object') {
        !item.isOpen && tier===targetTier && list.splice(a--, 1)
        demo(item.children, targetTier, tier + 1)
      }
    }
  }
  return list
}

function getType (data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}