.map(), .filter() и .reduce() в JavaScript

Если вы являетесь разработчиком JavaScript или только начинаете с JavaScript, где-то вы слышали о map(), filter() и reduce(). Иногда люди, которые плохо знакомы с этими функциями, не понимают, что именно эти функции делают и как их использовать? Давайте обсудим это в этой статье ниже один за другим.

.map()

.map() используется для преобразования массива. Преобразование означает, допустим, у вас есть массив, который содержит некоторые числа, и вам нужно найти двойное число каждого числа или тройку каждого числа. Итак, вы хотите преобразовать его с помощью некоторой логики преобразования и получить из него новый массив.

const arr = [2, 4, 5, 6, 8]
//  double arr = [4, 8, 10, 12, 16]
//  triple arr = [8, 12, 15, 18, 24]

Давайте попробуем на примере:

let array = [1, 2, 3, 4, 5, 6]
function double(x){
return x * 2;
}
const result = array.map(double); // take callback function
//   Or with arrow function
const result = array.map(x => x * 2);
console.log(result);        // will print an array with double

.фильтр()

Метод .filter() используется для фильтрации массива. Он отфильтрует массив на основе некоторой логики и вернет вам массив с отфильтрованным значением. Скажем, например, у вас есть массив и вы хотите узнать, какие элементы больше определенного числа? Давайте попробуем.

let arr = [2, 8, 3, 4, 5, 6]
function greaterThan3(x){
return x > 3;
}
const result = arr.filter(greaterThan3); // take callback function
//   or with arrow function
const result = arr.filter(x => x > 3);
console.log(result);

.reduce()

Метод .reduce() используется там, где вам нужно взять все элементы массива и получить из них одно значение. Например, допустим, у нас есть массив, и нам нужно найти его сумму или максимум.

let arr = [1, 5, 6, 8, 9, 3]
// sum, maximum

Сначала я попытаюсь написать код нефункциональными способами программирования, а затем с помощью метода reduce(), так будет понятнее.

// Sum with non functional way
let arr = [2, 8, 3, 4, 5, 6];
function findSum(){
 let sum = 0;
  for(let i = 0; i < arr.length; i++){
   sum = sum + arr[i];
   }
  return sum;
 }
console.log(findSum());

Теперь нужно уменьшить очередь. Метод .reduce() принимает два аргумента:

arr.reduce(function(acc, curr){ // first parameter
// it will iterate over each element of array and this current(curr) with refer to current element of this array.
// Accumulator(acc) will accumulate the result for elements of the array.
},0) // second parameter
 it represents the initial value for the accumulator

Теперь напишем тот же код с сокращением:

let arr = [1, 2, 3, 4, 5, 6]
const result = arr.reduce(function(acc, curr){
   acc = acc + curr;
   return acc;
});
console.log(result);

Попробуйте!

Это самый простой способ использования .map(), .filter() и .reduce(). Если вы замените цикл for этим методом, он подойдет. Это очень поможет вам сделать ваш код более чистым и легким для чтения.

Удачного кодирования!

.map(), .filter() и .reduce() в JavaScript

Похожие вопросы