.map(), .filter() i .reduce() w JavaScript

Jeśli jesteś programistą JavaScript lub dopiero zaczynasz od JavaScript, gdzieś słyszałeś o map(), filter() i Reduce(). Czasami ludzie, którzy są nowicjuszami w tych funkcjach, są zdezorientowani, jak dokładnie te funkcje robią i jak z nich korzystać? Omówmy to w tym artykule poniżej jeden po drugim.

.mapa()

.map() służy do przekształcania tablicy. Przekształcenie oznacza powiedzmy, że masz tablicę, która zawiera pewne liczby i musisz znaleźć podwójną każdą liczbę lub potrójną każdą liczbę, więc chcesz ją przekształcić za pomocą jakiejś logiki transformacji i uzyskać z niej nową tablicę.

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

Metoda .filter() służy do filtrowania tablicy. Przefiltruje tablicę w oparciu o pewną logikę i zwróci tablicę z przefiltrowaną wartością. Powiedzmy na przykład, że masz tablicę i chcesz dowiedzieć się, które elementy są większe niż określona liczba? Wypróbujmy to.

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);

Metoda .reduce() używana w miejscu, w którym trzeba pobrać cały element tablicy i wymyślić z niego pojedynczą wartość. Na przykład powiedzmy, że mamy tablicę i musimy znaleźć jej sumę lub maksimum.

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

// 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());

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);

Jest to najprostszy sposób użycia .map(), .filter() i .reduce(). Jeśli zastąpisz pętlę for tą metodą, to tam, gdzie pasuje. Pomoże ci to uczynić kod bardziej czystszym i łatwiejszym do odczytania.

Udanego kodowania!