Во многих сообщениях обсуждается как использовать .forEach(), .map(), .filter(), .reduce() и .find() в массивах в JavaScript. Я подумал, что было бы полезно объяснить, когда использовать общие методы массива.
.map(), .filter(), .reduce() и .find() ведут себя очень похоже на .forEach(), поэтому пока давайте сосредоточимся на последнем.
Что для каждого? Способ работы с элементами в массиве.
Если вы не знакомы с методом массива .forEach(), всякий раз, когда вы переходите к итерации по массиву, вы, вероятно, сразу думаете о цикле for.
Метод .forEach() - это просто другой способ сделать это. Следующие два примера кода эффективно выполняют одно и то же:
for петля
var array = [1,2,3];
for (var i = 0; i < array.length; i++){
console.log(i);
}
.forEach()
var array = [1,2,3];
array.forEach(function(i){
console.log(i);
});
Однако есть некоторые тонкие различия, которые могут сильно повлиять на ваш код.
Почему для каждого? Легкость использования и удобочитаемость.
Для меня наиболее убедительным аргументом в пользу использования .forEach() в пользу цикла for является то, что это проще. Даже при том же количестве линий меньше настроек. При использовании обычного цикла for у вас есть три шага:
- Определите значение итератора: var i = 0;
- Определите конечную точку: i ‹array.length;
- Расскажите, как цикл должен повторяться: i ++;
С .forEach() вы просто передаете функцию, которая выполняется для каждого элемента в массиве.
Почему для каждого? Сфера.
Если того факта, что это проще, вам недостаточно ... есть также техническая причина использовать .forEach() в пользу for петель. Это связано с масштабированием кода.
При использовании .forEach() вы передаете отдельную функцию с ее собственной областью действия. В for петле вы загрязняете прицел, в который помещаете петлю. В большинстве случаев, если не всегда, это плохо.
Когда использовать forEach?
.forEach() отлично, вам нужно выполнить функцию для каждого отдельного элемента в массиве. Хорошая практика заключается в том, что вам следует использовать .forEach(), когда вы не можете использовать другие методы массива для достижения своей цели. Я знаю, что это может показаться расплывчатым, но .forEach() - это универсальный инструмент ... используйте его только тогда, когда вы не можете использовать более специализированный инструмент.
Когда использовать карту?
.map(), если вы хотите преобразовать элементы в массиве.
Когда использовать фильтр?
.filter(), если вы хотите выбрать подмножество нескольких элементов из массива.
Когда использовать поиск?
.find() Если вы хотите выбрать одиночный элемент из массива.
Когда использовать сокращение?
.reduce(), если вы хотите получить одно значение из нескольких элементов в массиве.
Причуды и критика
forEach возвращает undefined.
Если вы преобразуете весь массив, вы, вероятно, захотите использовать вместо него .map(). .map() на самом деле возвращает массив, который полезен, потому что вы можете связать другие методы массива.
Пример:
const arr = [1,2,3];
const transformedArr = arr.map(function(){}).filter(function(){});
Несколько слов о скорости.
Одна из самых больших критических замечаний к .forEach() - скорость работы.
На самом деле вам не следует использовать .forEach(), если другие методы, такие как .map(), не помогут. .map() на самом деле немного быстрее, чем .forEach().
По общему признанию, .forEach() и .map() все еще медленнее, чем ванильный for цикл. Но судить о методе, основанном исключительно на скорости выполнения, сложно. Этот аргумент полностью игнорирует удобочитаемость и масштаб.
Главный вывод здесь - не используйте for циклы, потому что вы думаете, что они быстрее, используйте их, когда знаете, что вам нужно.
Научиться
Благодарим Эндрю Хеджеса за обнаружение ошибок и предложения!
