React Hooks实现AntD表格列过滤，for循环报错改用forEach方案咨询

报错原因 #

• Unary operator '++' used：项目ESLint规则禁用了++自增运算符，触发了语法校验报错
• Expected property shorthand：当对象属性名与赋值的变量名完全一致时，ESLint要求使用属性简写语法，省略重复的属性值声明

改用forEach实现的代码 #

const onChange = (e) => {
  const { checkedColumns: oldChecked, initialColumns } = colmenu
  // 生成新的选中列数组，避免直接修改原state引用
  let checkedColumns = [...oldChecked]
  if (e.target.checked) {
    checkedColumns = checkedColumns.filter(id => id !== e.target.id)
  } else {
    checkedColumns.push(e.target.id)
  }
  let filtered = [...initialColumns]
  // 替换原for循环为forEach实现列过滤
  checkedColumns.forEach(hideDataIndex => {
    filtered = filtered.filter(el => el.dataIndex !== hideDataIndex)
  })
  // 属性名与变量名一致，使用简写规避第二个报错
  setColmenu({ columns: filtered, checkedColumns })
}

性能优化方案（可选） #

上述forEach写法会多次遍历列数组，实际可以用单次过滤实现相同逻辑，性能更优：

const filtered = initialColumns.filter(el => !checkedColumns.includes(el.dataIndex))

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