Articolo originale: https://www.freecodecamp.org/news/javascript-array-filter-tutorial-how-to-iterate-through-elements-in-an-array/
Array.filter() è indubbiamente il metodo più importante e utilizzato per iterare su un array in JavaScript.
Il modo in cui funziona il metodo filter() è molto semplice. Prevede di filtrare uno o più elementi (un sottoinsieme) di una collezione più ampia (un soprainsieme) in base a delle condizioni o preferenze.
Lo facciamo tutti ogni giorno, che si tratti di leggere, scegliere i nostri amici, il nostro partner, che film guardare e via dicendo.
Il metodo JavaScript Array.filter()
Il metodo filter() accetta una funzione callback e la chiama per ogni elemento su cui itera all'interno dell'array selezionato. La funzione callback può accettare i seguenti parametri:
elemento: è l'elemento dell'array oggetto dell'iterazione corrente.indice: è l'indice dell'elementonell'array.array: rappresenta l'array bersaglio con tutti i suoi elementi.
Il metodo filter crea un nuovo array e restituisce tutti gli elementi che soddisfano la condizione specificata nella funzione callback.
Come usare il metodo filter() in JavaScript
Con i prossimi esempi ti mostrerò come usare il metodo filter() per filtrare gli elementi di un array in JavaScript.
filter() Esempio 1: come filtrare gli elementi di un array
In questo esempio, filtriamo ogni persona con un età (chiave age) compresa tra 0 e 3 anni.
let people = [
{name: "aaron",age: 65},
{name: "beth",age: 2},
{name: "cara",age: 13},
{name: "daniel",age: 3},
{name: "ella",age: 25},
{name: "fin",age: 1},
{name: "george",age: 43},
]
let toddlers = people.filter(person => person.age <= 3)
console.log(toddlers)
/*
[{
age: 2,
name: "beth"
}, {
age: 3,
name: "daniel"
}, {
age: 1,
name: "fin"
}]
*/filter() Esempio 2: come filtrare gli elementi in base a una particolare proprietà
In questo esempio, filtreremo solo i membri del team che sono sviluppatori (position: "developer"):
let team = [
{
name: "aaron",
position: "developer"
},
{
name: "beth",
position: "ui designer"
},
{
name: "cara",
position: "developer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
},
{
name: "george",
position: "developer"
},
]
let developers = team.filter(member => member.position == "developer")
console.log(developers)
/*
[{
name: "aaron",
position: "developer"
}, {
name: "cara",
position: "developer"
}, {
name: "george",
position: "developer"
}]
*/Nell'esempio qui sopra, abbiamo filtrato gli sviluppatori. E se invece volessimo filtrare i membri che non sono sviluppatori?
Potremmo fare così:
let team = [
{
name: "aaron",
position: "developer"
},
{
name: "beth",
position: "ui designer"
},
{
name: "cara",
position: "developer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
},
{
name: "george",
position: "developer"
},
]
let nondevelopers = team.filter(member => member.position !== "developer")
console.log(nondevelopers)
/*
[
{
name: "beth",
position: "ui designer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
}
]
*/filter() Esempio 3: come accedere alla proprietà
C'è una competizione. In questa competizione ci sono tre vincitori. Il primo ottiene la medaglia d'oro, il secondo d'argento e il terzo il bronzo.
Usando filter e accedendo alla proprietà index di ogni elemento in ogni iterazione, possiamo filtrare ognuno dei tre vincitori in una variabile.
let winners = ["Anna", "Beth", "Cara"]
let gold = winners.filter((winner, index) => index == 0)
let silver = winners.filter((winner, index) => index == 1)
let bronze = winners.filter((winner, index) => index == 2)
console.log(Gold winner: ${gold}, Silver Winner: ${silver}, Bronze Winner: ${bronze})
// "Gold winner: Anna, Silver Winner: Beth, Bronze Winner: Cara"filter() Esempio 4: come usare il parametro array
Uno degli utilizzi più comuni del terzo parametro (array) è per esaminare lo stato dell'array su cui avviene l'iterazione. Ad esempio, possiamo verificare se c'è un altro elemento rimasto nell'array. In base al risultato, possiamo specificare ciò che dovrà accadere.
In questo esempio, andremo a definire un array di quattro persone. Tuttavia, dato che ci sono solo tre vincitori, la quarta persona nella lista non farà parte dei vincitori.
Per farlo, dobbiamo ottenere le informazioni dall'array bersaglio a ogni iterazione.
let competitors = ["Anna", "Beth", "Cara", "David"]
function displayWinners(name, index, array) {
let isNextItem = index + 1 < array.length ? true : false
if (isNextItem) {
console.log(`The No${index+1} winner is ${name}.`);
} else {
console.log(`Sorry, ${name} is not one of the winners.`)
}
}
competitors.filter((name, index, array) => displayWinners(name, index, array))
/*
"The No1 winner is Anna."
"The No2 winner is Beth."
"The No3 winner is Cara."
"Sorry, David is not one of the winners."
*/
Come usare l'oggetto context
In aggiunta alla funzione callback, il metodo filter() può accettare anche un oggetto context.
filter(funzioneCallback, oggettoContext)Si può fare riferimento a questo oggetto dall'interno della funzione callback usando la parola chiave this.
filter() Esempio 5: come accedere all'oggetto context con this
Questo esempio sarà simile all'esempio 1. Filtreremo ogni persona che ha un età compresa tra 13 e 19 anni.
Tuttavia, non scriveremo esplicitamente i valori all'interno della funzione callback. Invece definiremo i valori 13 e 19 come proprietà all'interno dell'oggetto range, che in seguito passeremo al metodo filter come oggetto context (secondo parametro).
let people = [
{name: "aaron", age: 65},
{name: "beth", age: 15},
{name: "cara", age: 13},
{name: "daniel", age: 3},
{name: "ella", age: 25},
{name: "fin", age: 16},
{name: "george", age: 18},
]
let range = {
lower: 13,
upper: 16
}
let teenagers = people.filter(function(person) {
return person.age >= this.lower && person.age <= this.upper;
}, range)
console.log(teenagers)
/*
[{
age: 15,
name: "beth"
}, {
age: 13,
name: "cara"
}, {
age: 16,
name: "fin"
}]
*/Abbiamo passato l'oggetto range come secondo argomento di filter(). A questo punto è diventato il nostro oggetto context. Di conseguenza siamo stati in grado di accedere ai limiti superiore e inferiore dell'intervallo nella funzione callback utilizzando rispettivamente this.upper e this.lower.
In conclusione
Il metodo per array filter() filtra gli elementi che soddisfano un'espressione callback e li restituisce.
In aggiunta alla funzione callback, il metodo filter accetta anche un oggetto context come secondo argomento. Ciò consente di accedere a ogni sua proprietà dall'interno della funzione callback usando this.
Spero che questo articolo ti sia stato utile.
Se vuoi imparare di più sullo sviluppo web, visita il mio Blog.
Grazie per aver letto e a presto.
P.S.: se stai studiando JavaScript, ho creato un ebook con 50 argomenti di JavaScript con appunti digitali (risorsa in inglese).