.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()

Методът .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

Сега нека напишем същия код с reduce:

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

Подобни въпроси