примеры использования .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 для любого типа данных, независимо от того, есть ли у вас массив объектов, чисел, строк или даже других вложенных массивов.
Я надеюсь, что этот пост оказался для вас полезным, и спасибо, что прочитали!