【求助】二维数组中怎么splice去掉相应的值

Question

//二维数组
var region = [
        {
          id:1,
          name:'北京',
          children:[
            {
              id:4,
              name:'北京市',
            }
          ]
        },
        {
          id:2,
          name:'天津',
          children:[
            {
              id:5,
              name:'天津市',
            }
          ]
        },
        {
          id:3,
          name:'河北',
          children:[
            {
              id:6,
              name:'石家庄市',
            },
            {
              id:7,
              name:'唐山市',
            },
            {
              id:8,
              name:'秦皇岛市',
            },
            {
              id:9,
              name:'邯郸市',
            },
            {
              id:10,
              name:'邢台市',
            }
          ]
        }
      ]

//需要去掉的值
var selectedIds = [4,5,6,7,8]

//想要的效果是
region = [
        {
          id:1,
          name:'北京',
          children:[]
        },
        {
          id:2,
          name:'天津',
          children:[]
        },
        {
          id:3,
          name:'河北',
          children:[
            {
              id:9,
              name:'邯郸市',
            },
            {
              id:10,
              name:'邢台市',
            }
          ]
        }
      ]

自己尝试写了下有错误

for(var i = 0; i < region.length; i++){
        for(var s = 0; s < region[i].children.length; s++){
          selectedIds.find(function(value, index, arr) {
            if(value == region[i].children[s].id) {
              selected[i].children.splice(s,1)
            }
          })
        }
      }
//出来的结果却是
region = [
        {
          id:1,
          name:'北京',
          children:[]
        },
        {
          id:2,
          name:'天津',
          children:[]
        },
        {
          id:3,
          name:'河北',
          children:[
            {
              id:7,
              name:'唐山市',
            },
            {
              id:9,
              name:'邯郸市',
            }
          ]
        }
      ]

Answer 1

主要是i跳变了，假如数组长度为5，i为0，删除i位置的元素后，原本1位置的变成0位置了，2位置的变成了1位置，而i是递增的，所以变成的1，那么原本1现在0的位置就跳过去了。所以你需要在删除元素后进行i--

Answer 2

树结构过滤之前写了一个通用的函数：

function treeFilter (tree, func) {
  return tree.filter(node => {
    node.children = node.children && treeFilter(node.children, func)
    return func(node) || (node.children && node.children.length)
  })
}

调用

let result = treeFilter(region, node => !selectedIds.includes(node.id))
console.log(result)

输出

[
  {
    "id": 1,
    "name": "北京",
    "children": []
  },
  {
    "id": 2,
    "name": "天津",
    "children": []
  },
  {
    "id": 3,
    "name": "河北",
    "children": [
      {
        "id": 9,
        "name": "邯郸市"
      },
      {
        "id": 10,
        "name": "邢台市"
      }
    ]
  }
]

Answer 3

没递归，仅适用于例子

region.reduce((news, {id, name, children}) => {
    if (!ids.includes(id)) {
      let obj = {id, name, children}
      obj.children = children.filter(child => !ids.includes(child.id))
      news.push(obj)
    }
    return news
}, [])

Answer 4

let copyList = region.slice()
function remove(id, sources) {
  for (let index in sources) {
    if (sources[index].id === id) {
      sources.splice(index, 1)
    } else if (sources[index].children && sources[index].children.length) {
      remove(id, sources[index].children)
    }
  }
}

let removeEle = [4, 5, 6, 7, 8]
removeEle.forEach(item => {
  remove(item, copyList)
})
console.log(copyList)

Answer 5

data.map(t=>{t.children = t.children.filter(e=>{
return !selectedIds.includes(e.id)})
return t})