примеры использования .map, .filter и .reduce в JavaScript. некоторые должны знать методы работы с массивами для начинающих ...

Массив - это тип структуры данных, состоящий из набора элементов. Поскольку все в Javascript является объектом, массивы также считаются объектами. Доступ к каждому элементу в массиве можно получить, указав его порядковый номер. Первый элемент в массиве начинается с [0] индекса 0, второй [1], и так далее, и так далее… Нам часто потребуется выполнить некоторые вычисления или операции с каждым элементом в массиве, а Javascript поставляется с отличным набором мощных методов именно для этого!

Я познакомлю вас с методами .map, .reduce и .filter, которые вам пригодятся.

.map ()

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

const multiplyByTwo = [4, 6, 7, 8, 10];
const resultArr = multiplyByTwo.map(element => {
return element * 2;
});
// resultArr = [ 8, 12, 14, 16, 20 ]

Давайте рассмотрим приведенный выше пример. Метод .map принимает функцию обратного вызова и запускает ее для каждого элемента в вызывающем массиве. Функция обратного вызова принимает currentValue в качестве первого параметра и 3 необязательных параметра (index, array и thisArg), которые я пропустил в этом примере. Функция обратного вызова запускается для каждого элемента в исходном массиве (multiplyByTwo в нашем примере), и новый созданный массив будет содержать измененные элементы. В нашем примере мы берем первый элемент multiplyByTwo [0], затем умножаем его на 2 и возвращаем его как первый элемент в новом массиве.

multiplyByTwo[0] = 4
4 * 2 = 8
resultArr[0] = 8

.filter ()

Метод .filter - очень полезный метод, когда вам нужно отфильтровать определенные элементы в массиве на основе условия. Если условие приводит к True, то элемент будет сохранен в новом массиве. Этот метод также вернет новый массив со всеми отфильтрованными результатами. Допустим, у вас есть набор объектов-пользователей, и вы хотите отфильтровать только пользователей, возраст которых ›20.

Документация MDN по Array.prototype.filter ()

const users = [
{name: 'Michael', age:30},
{name: 'Alex', age:19}
{name: 'John', age:40}
{name: 'Jackie', age:20}
{name: 'Melissa', age:25},
{name: 'Michael', age:30}
]
const filteredUsers = users.filter(person => {
// if the age of the user is more than 20, return this object to the new array.  
return person.age > 20;
});

// the result will be the following
filteredUsers = [ { name: 'Michael', age: 30 },
  { name: 'John', age: 40 },
  { name: 'Melissa', age: 25 },
  { name: 'Michael', age: 30 } ]

.reduce

Когда у вас есть коллекция элементов и вам нужно перебрать весь список и вернуть только одно значение, .reduce - это метод, который вы ищете. Давайте углубимся и посмотрим, что делает Array.reduce ().

const numbers = [450, 200, 75, 80, 90];
const resultSum = numbers.reduce((accumulator, currentElement) => {
return accumulator + currentElement;
}, 0);
//resultSum = 895

Метод reduce принимает два параметра: первый - это функция обратного вызова, запускаемая для каждого элемента в массиве, а второй - начальное значение для установки вашего аккумулятора. Сама функция обратного вызова принимает несколько параметров (аккумулятор, текущий элемент, текущий индекс, массив - было вызвано сокращение). Если вы решите не предоставлять начальное значение для аккумулятора, тогда аккумулятор будет установлен на первое значение / элемент в массиве на первой итерации. Аккумулятор очень важен при использовании метода .reduce, и вы всегда должны не забывать возвращать аккумулятор. В приведенном выше примере кода первая итерация будет выглядеть следующим образом:

const resultSum = numbers.reduce((accumulator, currentElement) => {
return accumulator + currentElement;
}, 0);
1st Iteration:
accumulator is equal to 0
currentElement = 450
return = (0 + 450) = 450 
2nd Iteration:
accumulator is equal to 450
currentElement = 200
return = (200 + 450) = 650
....

После того, как метод завершит итерацию по всему массиву, метод вернет окончательное накопленное значение, которым в приведенном выше примере является resultSum. Вы можете использовать .reduce для любого типа данных, независимо от того, есть ли у вас массив объектов, чисел, строк или даже других вложенных массивов.

Я надеюсь, что этот пост оказался для вас полезным, и спасибо, что прочитали!