Объясняем методы в массивах JavaScript: Filter vs Map vs Reduce vs Foreach

11 октября 2019

Окей да, мы знаем они разные, имеют разные предназначения и цели пока мы соизволим понять их.

Перевод статьи Array Methods Explained : Filter vs Map vs Reduce vs Foreach

И так, мы используем массивы. Очень много массивов. Мы их используем, чтобы показывать списки поиска, товары добавленные в корзину, только сколько раз мы логинились в систему, правильно?

Встроенные в JavaScript объекты работы с массивами дают реально крутой и полезный функционал для упарвления нашими данными, которые находятся в массивах. Сейчас мы быстренько посмотрим на эти методы.

Давайте начнем с самого простого.

1. Foreach

Простенький, да? Мы все знаем зачем используется этот метод и даже если мы не знаем о нем, само имя уже говорит довольно много, объясняя буквально все о нем.

Foreach берет callback функцию и запускает её на каждом элементе массива, одну за одной.

var sample = [1, 2, 3];
// es5
sample.forEach(function (elem, index){
console.log(elem + ‘ comes at ‘ + index);
})
// es6
sample.forEach((elem, index) => `${elem} comes at ${index}`)
/*

Вывод

1 comes at 0
2 comes at 1
3 comes at 2

*/

Для каждого элемента в массиве, мы вызываем callback, который берет элемент и его индекс, предоставляемый foreach.

Обычно forEach работает как традицонный цикл, проходящий через весь массив элементов, чтобы сделать с ними какие-либо операции.

Окей! Ясно? Далее давайте отфильтруем несколько массивов.

2. Filter

Всякий раз когда вам надо отфильтровать массив в JavaScript — встроенный метод для отфильтровки вашего массива это правильный выбор к использованию. Filter даёт вам сделать callback для каждого элемента и вернуть отфильтрованный массив.

Главная разница между forEach и filter в том, что forEach просто пускает цикл по массиву и выполняет callback, в то время как filter выполняет callback и проверяет возвращаемое значение. Если значение верное, то оно будет положено в новый массив, если же нет, то оно будет из него исключено.

var sample = [1, 2, 3] // тот же самый массив
// es5
var result = sample.filter(function(elem){
return elem !== 2;
})
console.log(result)
// es6
var result = sample.filter(elem => elem !== 2)

/* вывод */

[1, 3]

Посмотрите как это просто. Мы запустили callback на фильтр, который пробежался по всем элементам в массиве. В callback мы проверили, если элемент !== 2, если условие не выполняется (когда элемент равен 1 или 3), то мы включаем его в конечный массив.

Также обратите внимание на то, что filter не трогает существующий массив, он будет возвращать только новый отфильтрованный массив каждый раз.

3. Map

Один из моих самых любимых и используемых методов работы с массивами за всё время. Как ReactJS разработчик, я очень часто использую map внутри UI приложений.

Map как и filter с foreach берет callback и пускает его по всем элементам массива, но то, что делает его уникальным — это то что он генерирует новый массив, основываясь на существующем массиве.

Давайте поймем map на примере.

var sample = [1, 2, 3] // я никогда не изменюсь еее
// es5
var mapped = sample.map(function(elem) {
return elem * 10;
})
// es6
let mapped = sample.map(elem => elem * 10)
console.log(mapped);

/* вывод */

[10, 20, 30]

В этом примере map проходится по каждому элементу в массиве, умножая его на 10 и возвращая элемент, который будет положен в конечный массив.

Как и filter, map возвращает массив. Указанный callback для map изменит элементы массива и сохранит их в новый массив по зовершении того, как массив будет возвращен как отmapенный массив.

И последнее, но не менее важное.

4. Reduce

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

Для примера, если вам надо добавить все элементы массива, вы можете сделать что-то вроде этого.

var sample = [1, 2, 3] // вот мы снова увиделись, друзья
// es5
var sum = sample.reduce(function(sum, elem){
return sum + elem;
})
// es6
var sum = sample.reduce((sum, elem) => sum + elem)
console.log(sum)

Reduce берет callback, как и любая функция о которой мы говорили. Внутри этого callback мы берем два аргумента sum и elem. Sum это последнее вернувшееся значение функции reduce. Для примера, изначально значение sum будет равно 0, затем когда запустится callback на первом элементе, он прибавит elem к sum и возвратит значение. На второй итерации sum значение будет — первый elem + 0, на второй итерации 0 + первый elem + второй elem.

Вот так работает reduce, он сокращает массив до одного простого значения и возвращает его по завершении.