如何正确将对象数组中的所有城市子数组合并到新数组？

你的问题出在每次循环都直接覆盖了this.cities的值，而不是把当前州的城市追加到数组里。每次执行this.cities = [...state.cities]时，都会把之前的数组替换成当前州的城市数组，所以最后只会保留最后一个州的结果。

以下是几种修复方式：

方式一：修改forEach逻辑，追加元素 #

先初始化this.cities为空数组，然后在循环里用push把当前州的城市逐个追加进去：

// 先初始化空数组
this.cities = []

this.states.forEach(state => {
  // 把当前州的城市展开后追加到数组中
  this.cities.push(...state.cities)
})

console.log(this.cities)

方式二：使用reduce方法（更简洁） #

reduce可以直接将所有子数组合并成一个数组，代码更简洁：

this.cities = this.states.reduce((totalCities, state) => {
  return totalCities.concat(state.cities)
}, [])

// 或者用展开写法简化
this.cities = this.states.reduce((total, state) => [...total, ...state.cities], [])

console.log(this.cities)

方式三：使用flatMap方法（ES2019+） #

如果环境支持ES2019及以上，flatMap是最直观的方式，先映射出所有城市数组，再自动扁平化一层：

this.cities = this.states.flatMap(state => state.cities)

console.log(this.cities)

内容的提问来源于stack exchange，提问作者Hai Truong IT