Разница между Map и ForEach в JavaScript

JavaScript

Переводчик пресса:Я привык к Haskell и предпочитаю карту.

Для обеспечения удобочитаемости в этой статье используется вольный перевод, а не дословный перевод. Кроме того, авторские права на эту статью принадлежат оригинальному автору, а перевод предназначен только для ознакомления.

Если у вас уже есть опыт работы с JavaScript, вы, вероятно, уже знаете эти два, казалось бы, идентичных метода:Array.prototype.map()а такжеArray.prototype.forEach().

Итак, в чем разница между ними?

определение

Давайте сначала посмотрим на определения Map и ForEach в MDN:

  • forEach(): выполняет предоставленную функцию один раз для каждого элемента массива.
  • map(): создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

Какая разница?forEach()Метод не возвращает результат выполнения, аundefined. То есть,forEach()изменит исходный массив. а такжеmap()Метод получает новый массив и возвращает значение.

Пример

Массив представлен ниже, если мы хотим удвоить каждый элемент в нем, мы можем использоватьmapа такжеforEachдля достижения цели.

let arr = [1, 2, 3, 4, 5];

ForEach

Уведомление,forEachне вернет значимого значения. Модифицируем его прямо в callback-функцииarrценность .

arr.forEach((num, index) => {
    return arr[index] = num * 2;
});

Результат выполнения следующий:

// arr = [2, 4, 6, 8, 10]

Map

let doubled = arr.map(num => {
    return num * 2;
});

Результат выполнения следующий:

// doubled = [2, 4, 6, 8, 10]

Сравнение скорости выполнения

jsPref— очень хороший сайт для сравнения скорости выполнения различных функций JavaScript.

вотforEach()а такжеmap()Результат теста:

Как видите, на моем компьютереforEach()коэффициент скорости выполненияmap()на 70% медленнее. Браузер каждого будет работать по-разному. Вы можете использовать ссылку ниже, чтобы проверить это:Map vs. forEach - jsPref.

JavaScript слишком умен (gui), чтобы жить (yi), вы не знаете, есть ли ошибка, вы также можете получить к ней доступFundebugОнлайн-мониторинг в реальном времени.

Понимание с функциональной точки зрения

Если вы привыкли использовать функции в программировании, то определенно получите удовольствие от использованияmap(). потому чтоforEach()изменит значение исходного массива, аmap()Будет возвращен совершенно новый массив, исходный массив не будет затронут.

Как лучше?

Зависит от того, что вы хотите сделать.

forEachХорошо, когда вы не собираетесь изменять данные, а просто хотите что-то с ними сделать — например, сохранить их в базе данных или распечатать.

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
    console.log(letter);
});
// a
// b
// c
// d

map()Полезно, когда вы хотите изменить значения данных. Это не только быстрее, но и возвращает новый массив. Преимущество этого в том, что вы можете использовать композицию (map(), filter(), reduce() и т. д.), чтобы играть больше трюков.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

Сначала мы используем map для умножения каждого элемента на 2, а затем отфильтровываем те элементы, которые больше 5. Окончательный результат присваиваетсяarr2.

основные моменты

  • может быть использованforEach()сделал это,map()То же самое можно сделать. Обратное также верно.
  • map()выделит место в памяти для хранения нового массива и возврата,forEach()Данные не будут возвращены.
  • forEach()разрешатьcallbackИзменить элементы исходного массива.map()Вернуть новый массив.

Уведомление об авторских правах:
При перепечатке просьба указывать автора Fundebug и адрес данной статьи:
https://blog.fundebug.com/2018/02/05/map_vs_foreach/

Категории