Понимание методов JavaScript map, reduce, filter.

Зачем это нужно ❔

Часто мы сталкиваемся со случаями, когда нам нужно выполнить некоторые операции внутри массива или массива объектов JavaScript, поскольку кто-то новичок в javascript, первое, что всегда приходит нам в голову, это запуск массива или массива объектов в цикле for / forEach по порядку для итерации элементов массива и выполнения настраиваемых операций, но javascript предлагает нам более простой способ делать много вещей с меньшими строками кода, среди тех положений, которые предоставляет javascript, есть методы map, reduce, filter, которые делают нашу задачу работы с массивом / массивом объектов легко. Несмотря на то, что существует множество методов javascript для работы с массивами, здесь мы сосредоточимся на трех наиболее часто используемых а именно: карта, сокращение, фильтр.

Простое однострочное определение 🎯

1️⃣ карта - используется для изменения элементов в массиве и получения нового массива с измененными элементами.

2️⃣ уменьшить - выполнить некоторую операцию с массивом и вернуть одно вычисленное значение.

3️⃣ фильтр - чтобы получить подмножество массива, удовлетворяющее определенному условию.

Давайте разберемся с каждым из них по порядку 🕵️‍♀️

карта📌

карта используется для изменения текущих элементов в вашем массиве / массиве объектов. В традиционном программировании мы используем циклы for, но здесь нам поможет только map-метод javascript.

Возьмем пример

Предположим, у нас есть массив чисел, и мы хотим добавить каждый элемент массива на 5, мы можем просто сделать это так:

let numArr = [5,10,15,20];
numArr = numArr.map(element => {
return element + 5
});
console.log(numArr);

Здесь numArr - это массив чисел, мы вызываем метод map в нашем numArr для итерации по каждому элементу, за которым следует функция обратного вызова, которая добавляет 5 к каждому элементу numArr, мы получаем следующий результат

[ 10, 15, 20, 25 ]

Использование метода карты с массивом объектов

Предположим, у нас есть массив объектов с именем и фамилией, и нам нужно иметь полное имя сотрудника, используя наш существующий массив объектов. Вот как мы можем это сделать.

var employee = [{fname: ‘Rahil’, lname: ‘Shaikh’},{fname: ‘Zahwa’, lname: ‘Ansari’}];
var empfullName = employee.map(emp => { 
return `${emp.fname}  ${emp.lname}`
});
OR
var empfullName = employee.map(emp => { 
return emp.fname + ' ' + emp.lname 
});
console.log(empfullName);

Результат: [«Рахиль Шейх», «Захва Ансари»]

Здесь employee - это массив объектов с fname и lname, мы создаем новый массив, вызывая метод карты, который объединяет fname и lname сотрудника, чтобы вернуть полное имя сотрудника.

🔷➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖🔷

уменьшить📌

Метод reduce используется для вычисления единственного значения из элементов в массиве.

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

let numArr = [5,10,15,20];
const sum = numArr.reduce((total, currentValue) => {
return total + currentValue
});
console.log(sum);

Вывод: 50

Как это работает:

reduce принимает два параметра: total и currentValue.

в первой итерации (индекс 0) total является первым элементом нашего массива то есть 5

currentValue равно 10, которое является следующим значением текущей итерации (индекс 1) .

как только мы закончим с суммой первой итерации т.е. 5 + 10 = 15, total будет иметь значение 15 now и currentValue будет значением следующего элемента после 10, т.е. 15 (индекс 2), это дает сумму 15 + 15 = 30.

total теперь имеет значение 30, а curretValue равно 20 (индекс 3), это дает результат 30 + 20 = 50, поскольку в массиве больше нет элементов, итерация останавливается, и результат 50 возвращается в качестве результата переменной суммы.

🔷➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖🔷

фильтр📌

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

давай возьмем пример

У нас есть массив некоторых случайных чисел, например randomNum, и нам нужно создать новый массив, содержащий элементы, которые больше 10 из массива randomNum, вот как мы можем использовать метод фильтрации для этого.

const randomNum = [1,18,45,6,9,33,4];
const numGreaterThan10 =  randomNum.filter(num => {
return num > 10
});
console.log(numGreaterThan10);

Вывод: [18, 45, 33]

здесь мы применяем метод фильтрации к нашему массиву randomNum, filter будет перебирать каждый элемент массива randomNum и возвращать элементы, которые больше 10.

Давайте теперь рассмотрим пример применения метода фильтрации в массиве объектов

У нас есть массив объектов, в котором есть страна и город, нам нужно отфильтровать этот массив объектов, чтобы получить только города страны Индия,

let places = [{country: ‘India’, city: ‘Mumbai’},{country: ‘USA’, city: ‘New York’},{country: ‘Turkey’, city: ‘Istanbul’},{country: ‘India’, city: ‘Delhi’},{country: ‘France’, city: ‘Paris’}]
const indianCities = places.filter(place => { 
return place.country === ‘India’
});
console.log(indianCities);

Вывод: [
{страна: «Индия», город: «Мумбаи»},
{страна: «Индия», город: «Дели»}
]

Метод filter выполняет итерацию по каждому элементу, то есть объекту мест, и проверяет, является ли страна места Индией, если true, то он возвращает значения.

🔷➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖🔷

Теперь вы знаете, когда использовать методы map, reduce и filter в массиве, если эта статья была полезной, наберите лайков👍 и поделитесь знаниями🤘.