.map(), .filter() und .reduce() in JavaScript

Wenn Sie ein JavaScript-Entwickler sind oder gerade erst mit JavaScript beginnen, haben Sie irgendwo von map(), filter() und Reduce() gehört. Manchmal sind Leute, denen diese Funktionen neu sind, verwirrt, was genau diese Funktionen tun und wie sie verwendet werden? Lassen Sie es uns in diesem Artikel unten nacheinander besprechen.

.Karte()

.map() wird verwendet, um ein Array zu transformieren. Transformation bedeutet, sagen wir, Sie haben ein Array, das einige Zahlen enthält, und Sie müssen das Doppelte jeder Zahl oder das Dreifache jeder Zahl finden. Sie möchten es also mit etwas Transformationslogik transformieren und ein neues Array daraus erstellen.

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

Die Methode .filter() wird verwendet, um ein Array zu filtern. Es filtert ein Array basierend auf einer Logik und gibt Ihnen ein Array mit gefiltertem Wert zurück. Angenommen, Sie haben ein Array und möchten herausfinden, welche Elemente größer als eine bestimmte Zahl sind? Probieren wir es aus.

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()-Methode, die an einer Stelle verwendet wird, an der Sie alle Elemente eines Arrays nehmen und daraus einen einzelnen Wert ermitteln müssen. Nehmen wir zum Beispiel an, wir haben ein Array und wir müssen die Summe oder das Maximum davon finden.

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

Dies ist die einfachste Art, .map(), .filter() und .reduce() zu verwenden. Wenn Sie die for-Schleife durch diese Methode ersetzen, ist es dort, wo es passt. Es wird Ihnen sehr dabei helfen, Ihren Code sauberer und leichter lesbar zu machen.

Viel Spaß beim Codieren!