javascript的foreach vs map vs reduce 区别

map、forEach和reduce方法确实有很多共同点，使用什么以及何时使用取决于您最终想要得到什么样的结果。

假设我们有一个数组：

const locations = [
  {country: "aaa", population: 10},
  {country: "bbb", population: 100},
  {country: "ccc", population: 20}
]

如果我们只需要对数组的每个元素执行某个动作，那么forEach 方法就适合这里：

locations.forEach(location => {
  console.log(location)

  // {country: "aaa", population: 10}
  // {country: "bbb", population: 100}
  // {country: "ccc", population: 20}
})


locations.forEach(location => {
  console.log(location.country)
  // aaa
  // bbb
  // ccc
})


locations.forEach(() => {
  console.log("dddd ?")

})

如果我们想转换我们的数组并将结果存储在一个变量中，那么map 方法将比 forEach 更合适，因为第一个方法会立即返回一个新数组。

当我们需要在 HTML 标签中“包装”每个国家/地区名称时，让我们看看 forEach 与 map 的区别：

// forEach
const result = []
locations.forEach(location => {
  result.push(`<h1>${location.country}</h1>`)
})
console.log(result)
// ["<h1>aaa</h1>", "<h1>bbb</h1>", "<h1>ccc</h1>"]

// map
const result = locations.map(location => `<h1>${location.country}</h1>`)    
console.log(result)
// ["<h1>aaa</h1>", "<h1>bbb</h1>", "<h1>ccc</h1>"]

reduce 方法与 map 的不同之处在于它返回最终的“值”。

假设我们要计算总人口规模：

const result = locations.reduce((total, location) => {
  return total + location.population
}, 0)

console.log(result)
// 130

这是一个相当简单的例子，但是“最终值”不仅可以是一个数字，还可以是一个对象或一个数组，这使得 reduce 方法成为一个真正强大的转换工具。

ForEach vs Map vs Reduce 什么时候？