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 方法成为一个真正强大的转换工具。