我想用相同但使用 reduce 完成的替换此 forEach 函数。你能说我哪里做错了吗？

Question

我创建了列，并且有一个显示列名称的复选框。当我单击一个复选框方块时，我得到一个存储在 checkedKeys 中的选中名称数组。现在 checkableColumns 包含所有可能的可检查值。那些在 checkableColumns 中但不在 checkedKeys 中的元素是那些将从 table 的列中消失的列。我不过滤所有列，因为有些列应该始终可见。这是 reduce 和 forEach 的共同部分：

const columns = initColumns();
        const checkableColumns = ["n", "yi", "ui", "r", "t"];
        const notCheckedValues = checkableColumns.filter(col=>!checkedKeys.includes(col));
        const filteredColumns =[];

这是我用 forEach 解决的方法：

columns.forEach(column=>{
      if(!notCheckedValues.includes(column.dataIndex)){
            filteredColumns.push(column);
          }
    })

这是我尝试用 reduce 解决的方法，但它不起作用而且我不明白：

const filteredColumns = columns.reduce((allColumns, currentColumn)=>{
      if(notCheckedValues.includes(currentColumn.dataIndex)){
        return allColumns;
      }
      console.log("all cols",allColumns, "push",allColumns.push(currentColumn))
      return allColumns.push(currentColumn)
    }, [])

Answer 1

Array.prototype.push不是return数组，而是数组的新长度：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

相反，您需要 return 累加器 after pushing:

const filteredColumns = columns.reduce((allColumns, currentColumn) => {
  if (notCheckedValues.includes(currentColumn.dataIndex)) {
    return allColumns;
  }
  allColumns.push(currentColumn)
  return allColumns
}, [])

不过，您也可以使用 Array.prototype.filter 以更惯用的方式执行此操作：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const filteredColumns = columns.filter((currentColumn) => {
  return !notCheckedValues.includes(currentColumn.dataIndex)
})

我想用相同但使用 reduce 完成的替换此 forEach 函数。你能说我哪里做错了吗？

I want to replace this forEach function with the same but done using reduce. Can you say where I am doing wrong?

javascript

arrays

reduce