JavaScript嵌套数组过滤selectedItem为true元素问题排查

你的过滤代码没生效，核心是搞错了Array.filter的判断逻辑：

• filter遍历的时候，只有回调返回假值才会剔除当前元素，返回真值就保留
• 你在外层filter里返回的是内层items.filter的执行结果，这个结果永远是个数组——JS里哪怕是空数组，也属于真值，所以外层判断永远成立，自然把所有原元素都返回了。

你要的是保留原来的列结构，只把每个列下没选中的item去掉，这时候不该在外层用filter，应该用map遍历每个列对象，单独处理每个列的items：

const columnsWithSelectedItems = defaultColumnsWithItems.map(column => {
  return {
    ...column,
    items: column.items.filter(item => item.selectedItem)
  }
})

小提示：selectedItem本身就是布尔值，不用多写=== true，直接传属性值就行。

如果过滤完某个列下面一个选中项都没有，你也想把这个列整个删掉，就在后面再接一层filter：

const columnsWithSelectedItems = defaultColumnsWithItems
  .map(column => ({
    ...column,
    items: column.items.filter(item => item.selectedItem)
  }))
  // 删掉没有选中项的空列
  .filter(column => column.items.length > 0)

另外提一句，你原来的代码里变量名拼错了：colmunsWithItemsToFilter里的“列”单词正确拼写是columns，漏了个n，跑代码的时候记得改，不然会报变量未定义的错。

内容的提问来源于stack exchange，提问作者Abdel