Articolo originale: https://www.freecodecamp.org/news/javascript-map-reduce-and-filter-explained-with-examples/
Map, reduce, e filter sono tutti metodi appartenenti agli array in JavaScript. Ognuno eseguirà un'iterazione su un array ed eseguirà una trasformazione o un calcolo. Ciascuno restituirà un nuovo array basato sul risultato della funzione. In questo articolo imparerai perché e come usarli.
Ecco un divertente riassunto di Steven Luscher:
Map
Il metodo map()
viene utilizzato per creare un nuovo array da uno esistente, applicando una funzione a ciascuno degli elementi del primo array.
Sintassi
var new_array = arr.map(function callback(element, index, array) {
// Valore restituito per new_array
}[, thisArg])
In callback è richiesto solo element
, l'elemento dell'array. Di solito viene eseguita un'azione sul valore e quindi viene restituito un nuovo valore.
Esempio
Nell'esempio seguente, ogni numero in una matrice viene raddoppiato.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]
Filter
Il metodo filter()
prende ogni elemento in un array e applica un'istruzione condizionale su di esso. Se questa condizione restituisce true
, l'elemento viene inviato all'array di output. Se la condizione restituisce false
, l'elemento non viene inviato all'array di output.
Sintassi
var new_array = arr.filter(function callback(element, index, array) {
// ritorna true o false
}[, thisArg])
La sintassi per filter
è simile a map
, tranne per il fatto che la funzione di callback dovrebbe tornare true
per mantenere l'elemento o altrimenti false
. In callback, è richiesto solo element
.
Esempi
Nell'esempio seguente, i numeri dispari vengono "filtrati", lasciando solo i numeri pari.
const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]
Nel prossimo esempio, filter()
viene utilizzato per ottenere tutti gli studenti i cui voti sono maggiori o uguali a 90.
const students = [
{ name: 'Quincy', grade: 96 },
{ name: 'Jason', grade: 84 },
{ name: 'Alexis', grade: 100 },
{ name: 'Sam', grade: 65 },
{ name: 'Katie', grade: 90 }
];
const studentGrades = students.filter(student => student.grade >= 90);
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
Reduce
Il metodo reduce()
riduce una matrice di valori a un solo valore. Per ottenere il valore di output, esegue una funzione di riduzione su ciascun elemento dell'array.
Sintassi
arr.reduce(callback[, initialValue])
L'argomento callback
è una funzione che verrà chiamata una volta per ogni elemento nell'array. Questa funzione accetta quattro argomenti, ma spesso vengono utilizzati solo i primi due.
- accumulator - il valore restituito dall'iterazione precedente
- currentValue - l'elemento corrente nell'array
- index - l'indice dell'elemento corrente
- array - l'array originale su cui è stato chiamato reduce
- L'argomento
initialValue
è facoltativo. Se fornito, verrà utilizzato come valore dell'accumulatore iniziale nella prima chiamata della funzione di callback.
Esempi
L'esempio seguente somma tutti i numeri in un array di numeri.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
return result + item;
}, 0);
console.log(sum); // 10
Nell'esempio successivo, reduce()
viene utilizzato per trasformare un array di stringhe in un unico oggetto che mostra quante volte ciascuna stringa appare nell'array. Si noti che questa chiamata a reduce passa un oggetto vuoto {}
come parametro initialValue
. Questo verrà utilizzato come valore iniziale dell'accumulatore (il primo argomento) passato alla funzione di callback.
var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];
var petCounts = pets.reduce(function(obj, pet){
if (!obj[pet]) {
obj[pet] = 1;
} else {
obj[pet]++;
}
return obj;
}, {});
console.log(petCounts);
/*
Output:
{
dog: 2,
chicken: 3,
cat: 1,
rabbit: 1
}
*/
Video esplicativo
Guarda il video qui sotto dal canale YouTube di freeCodeCamp.org. Copre i metodi di array qui discussi, più alcuni altri.