ForEach vs Map vs Reduce 什么时候？

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

假设我们有一个数组：

const locations = [
  {country: "Россия", population: 10},
  {country: "Китай", population: 100},
  {country: "США", population: 20}
]

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

locations.forEach(location => {
  console.log(location)
  // мы получим три вывода в консоль
  // по одному для каждой локации
  // {country: "Россия", population: 10}
  // {country: "Китай", population: 100}
  // {country: "США", population: 20}
})

// или так, если нам нужно только определенное значение

locations.forEach(location => {
  console.log(location.country)
  // Россия
  // Китай
  // США
})

// или так, по количеству значений в массиве 

locations.forEach(() => {
  console.log("Как дела?")
  // Как дела?
  // Как дела?
  // Как дела?
})

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

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

// через forEach
const result = []
locations.forEach(location => {
  result.push(`<h1>${location.country}</h1>`)
})
console.log(result)
// ["<h1>Россия</h1>", "<h1>Китай</h1>", "<h1>США</h1>"]

// с использованием map
const result = locations.map(location => `<h1>${location.country}</h1>`)    
console.log(result)
// ["<h1>Россия</h1>", "<h1>Китай</h1>", "<h1>США</h1>"]

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

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

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

console.log(result)
// 130

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

了解所有三种方法都只是看起来比常规循环更漂亮的内联循环是很有用的。如果您已经擅长使用循环，您只需要知道这些方法的作用，以便逐渐过渡到它们。

► forEach（正则枚举）

let arr = [1, 2, 3];

// --
for (let i = 0; i < arr.length; i++) {
  console.log( "for", arr[i] );
}

// --
arr.forEach( e => console.log("forEach", e) ); // e ←→ arr[i]

► map - 创建一个新数组，为原始数组的每个元素依次调用传递的函数。将此函数的调用结果添加到创建的数组中。

let arr = [1, 2, 3];

// --
let result = [];
for (let i = 0; i < arr.length; i++) {
  result.push( arr[i] * 2 );
}
console.log(result); // [2, 4, 6]

// --
console.log( arr.map( e => e * 2 ) ); // [2, 4, 6]

► reduce - 可用于除主要参数外，还需要一个额外变量的所有情况，该变量将在枚举过程中存储一些内容。

let arr = [1, 2, 3];

// --
let sum = 0;
for (let i = 0; i < arr.length; i++) {
  sum += arr[i];
}
console.log(sum); // 6

// --                                         ↓ Вместо let sum = 0;
console.log( arr.reduce( (sum, e) => sum + e, 0 ) ); // 6

// Вместо объявления переменной sum, её можно встроить в одну строчку с вызовом.
// Также вызывает функцию для каждого элемента.
// То, что вернет функция - станет значением sum при следующем вызове функции.

// В конце перебора вернет итоговое значение sum.

并且“内部”发生了这样的事情：

Array.prototype.my_forEach = function(fn, context) {
  for (let i = 0; i < this.length; i++) {
    fn.call(context, arr[i], i, arr);
  } // Переданная функция получает "имя" fn, и вызывается через неё в цикле.
};

Array.prototype.my_map = function(fn, context) {
  let result = [];
  for (let i = 0; i < this.length; i++) {
    result.push( fn.call(context, arr[i], i, arr) );
  } // в будущий массив добавляются результаты вызовов функции.
  
  return result;
};

Array.prototype.my_reduce = function(fn, value) {
  let i = 0;
  
  if (typeof value == "undefined") {
    if (this.length == 0) {
      throw new Error("Reduce of empty array with no initial value");
    }
    
    i = 1;
    value = this[0];
    // Если второй аргумент (объявление начального значения) не указан,
    // берется первый элемент массива вместо него.
  }
  
  for (i; i < this.length; i++) {
    value = fn(value, arr[i], i, arr);
  }
  
  return value;
};

/***/

let arr = [1, 2, 3];

arr.my_forEach( e => console.log(e) ); // 1, 2, 3

console.log( arr.my_map( e => e * 2 ) ); // [2, 4, 6]

console.log( arr.my_reduce( (sum, e) => sum + e ) ); // 6

.as-console-wrapper { min-height: 100vh !important; }

简而言之：

1. 当您需要更改当前数组或从其中一个一个地使用数据而不返回新值时，最好使用forEach()（或for-of循环）。示例：将数组的所有元素一一打印到控制台。

2. 当您需要创建并返回一个具有相同数量元素但已更改它们的新数组时，最好使用map(). 示例：从字符串数组创建一个新的数字数组。

3. 当您需要创建并返回完全不同的值（原始值或对象）时，在创建过程中迭代数组的元素时，最好使用reduce(). 示例：返回数组中所有数值元素的总和。

FOREACH - 当你有“面条代码”时，当循环体很简单时 - 2-5行。这个循环很容易阅读。

而如果代码被分割成回调，那么body中的一切都是复杂的，你可以把它分成一个函数或者已经有一个函数——然后是map，reduce。

MAP - 对每个元素应用一个函数。输出是一个相同长度的数组。

REDUCE - 成对地从最后一次迭代中获取结果，并从数组中获取一个新元素。输出是一个变量。