使用Array reduce方法时数组首元素被覆盖，求问题原因与解决方案

问题原因 #

• 核心问题是对象引用共用：你在reduce循环外部声明了filterObject对象，JS中对象属于引用类型，每次循环你都是修改同一个内存地址的对象属性，执行columnList.push(filterObject)时只是把该对象的内存引用添加到数组中，并不会创建新的对象。两次push的是同一个引用，第二次循环修改属性后，数组里两个指向同一地址的元素就都会显示最后一次修改的值。
• 额外问题：你当前的reduce用法完全没有用到累加器acc，属于无意义使用，直接遍历数组即可。

修正代码 #

最简单的改法是把对象声明放到循环内部，每次遍历都创建新对象：

getFilters(gridFilters, columnList){
  const filtersArray = [];
  gridFilters.forEach((ele) => {
    filtersArray.push(...ele.filters);
  });
  // 遍历处理所有筛选项
  filtersArray.forEach(({field, operator, value}) => {
    // 每次循环都新建独立对象
    const filterObject = {
      columnName: field,
      filterValue1: value,
      filterOperator1: operator,
      filterValue2: '',
      filterOperator2: ''
    };
    columnList.push(filterObject);
  });
  return columnList;
}

如果想简化写法，也可以直接用flatMap+reduce直接生成结果数组，不需要修改传入的columnList参数：

getFilters(gridFilters){
  // 先把所有嵌套的筛选项展开，再用reduce聚合为最终结果
  return gridFilters.flatMap(item => item.filters)
    .reduce((result, {field, operator, value}) => {
      result.push({
        columnName: field,
        filterValue1: value,
        filterOperator1: operator,
        filterValue2: '',
        filterOperator2: ''
      });
      return result;
    }, []);
}

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