JavaScript使用filter过滤对象数组时能否修改对象以避免多次循环

能不能在filter回调中修改匹配对象属性 #

可以正常生效。JavaScript中对象为引用类型，你在filter回调中对item的属性修改会直接作用于原数组对应的对象，把你注释的item.isHighPopulation = true代码放开即可正常运行：筛选出的highPopulation数组里的对象都会携带isHighPopulation: true属性，原数组中符合条件的对象也会同步新增该属性。

但不推荐该写法，filter的设计语义是无副作用的纯筛选逻辑，隐含的属性修改操作会降低代码可读性，提升后续维护的bug风险。

单次遍历的实现方案 #

如果要兼顾性能和可维护性，单次遍历完成「修改匹配项属性+筛选匹配项」的需求，推荐以下两种方案：

方案1：reduce实现（函数式编程首选） #

const highPopulation = cities.reduce((result, item) => {
  if (item.population >= 100) {
    // 若不想修改原数组对象，可替换为 const newItem = {...item, isHighPopulation: true} 再push
    item.isHighPopulation = true
    result.push(item)
  }
  return result
}, [])

方案2：普通for循环（性能最优，超大数组推荐） #

const highPopulation = []
for (let i = 0, len = cities.length; i < len; i++) {
  const item = cities[i]
  if (item.population >= 100) {
    item.isHighPopulation = true
    highPopulation.push(item)
  }
}

两种方案都只会遍历数组一次，和先map再filter的两次遍历相比，处理千级以上的数组时性能优势非常明显。

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