Articolo originale: https://www.freecodecamp.org/news/javascript-array-find-tutorial-how-to-iterate-through-elements-in-an-array/
Quando stai lavorando con un array, potresti aver bisogno di sapere se un elemento esiste al suo interno per poterlo recuperare. In questo caso, non ti interessano gli altri elementi presenti nell'array, non importa quanti siano.
Bene, per svolgere questa operazione possiamo usare il metodo find().
Come funziona il metodo Array.find()
Il metodo find() è un metodo Array.prototype (cioè integrato) che accetta una funzione callback e la esegue iterando su ogni elemento all'interno dell'array.
Quando trova una corrispondenza (o in altre parole, la funzione callback restituisce true), il metodo restituisce quello specifico elemento dell'array e interrompe immediatamente il loop. Quindi il metodo find() restituisce il primo elemento all'interno di un array che soddisfa la funzione callback.
La funzione callback accetta i seguenti parametri:
currentItem: è l'elemento dell'array su cui sta avvenendo l'iterazione.index: è l'indice della posizione dicurrentItemnell'array.array: rappresenta l'array di interesse con tutti i suoi elementi.
Come usare il metodo find() in JavaScript
Nei prossimi esempi, ti mostrerò come usare il metodo find() per ottenere il primo elemento di un array che soddisfa una specifica condizione in JavaScript.
Come ottenere un singolo elemento con find()
Immagina di aver smarrito il tuo cane. Dopo averlo fatto presente alle autorità competenti, ti viene presentato un gruppo di cani che sono stati ritrovati.
Per essere in grado di trovare il tuo cane, devi fornire delle informazioni precise su di lui. Ad esempio, la sua razza (un Chihuahua) potrebbe essere usata per l'identificazione.
Possiamo esprimere questa situazione in JavaScript usando un array. L'array chiamato foundDogs conterrà tutti i nomi dei cani ritrovati con le rispettive razze, e utilizzeremo il metodo find() per trovare il cane di razza Chihuahua all'interno dell'array.
let foundDogs = [{
breed: "Beagle",
color: "white"
},
{
breed: "Chihuahua",
color: "yellow"
},
{
breed: "Pug",
color: "black"
},
]
function findMyDog(dog) {
return dog.breed === "Chihuahua"
}
let myDog = foundDogs.find(dog => findMyDog(dog));
console.log(myDog);
/*
{
breed: "Chihuahua",
color: "yellow"
}
*/Il metodo find() interrompe l'iterazione quando trova corrispondenza.
È molto importante ricordare che l'esecuzione viene interrotta una volta che la funzione callback restituisce true.
Per spiegare questo concetto, utilizzeremo ancora l'esempio del cane scomparso. Questa volta, consideriamo che siano stati ritrovati due Chihuahua.
In questo caso, il metodo find() ci restituirà soltanto il primo Chihuahua che trova all'interno dell'array. Tutte le istanze successive verranno ignorate.
Possiamo osservarlo facilmente visualizzando nella console l'indice di posizione dell'elemento:
let foundDogs = [{
breed: "Beagle",
color: "white"
},
{
breed: "Chihuahua",
color: "yellow"
},
{
breed: "Pug",
color: "black"
},
{
breed: "Chihuahua",
color: "yellow"
}
]
function findMyDog(dog, index) {
if (dog.breed === "Chihuahua") console.log(index);
return dog.breed === "Chihuahua"
}
let myDog = foundDogs.find((dog, index) => findMyDog(dog, index));
console.log(myDog);
/*
1
{
breed: "Chihuahua",
color: "yellow"
}
*/
Come usare l'assegnazione di destrutturazione
Puoi rendere il tuo codice più conciso combinando insieme l'assegnazione di destrutturazione e una funzione freccia.
Utilizzeremo la destrutturazione per estrarre solo il nome della proprietà dall'oggetto che passeremo come parametro nella funzione callback.
Otterremo lo stesso risultato:
let foundDogs = [{
breed: "Beagle",
color: "white"
},
{
breed: "Chihuahua",
color: "yellow"
},
{
breed: "Pug",
color: "black"
},
]
let myDog = foundDogs.find(({breed}) => breed === "Chihuahua");
console.log(myDog);
/*
{
breed: "Chihuahua",
color: "yellow"
}
*/Come trovare un elemento con il suo indice
In quest'esempio, troveremo il posto occupato da 'David' all'interno dell'array, usando il valore del suo indice. Questo è un modo in cui possiamo utilizzare la proprietà index all'interno della nostra funzione callback con il metodo find():
let reservedPositions = [{
name: "Anna",
age: 24
},
{
name: "Beth",
age: 22
},
{
name: "Cara",
age: 25
},
{
name: "David",
age: 30
},
{
name: "Ethan",
age: 26
}
]
function findByIndex(person, index) {
return index === 3
}
let myPosition = reservedPositions.find((person, index) => findByIndex(person, index));
console.log(myPosition);
/*
{
age: 30,
name: "David"
}
*/Puoi usare un oggetto di contesto con find()
In aggiunta alla funzione callback, il metodo find() accetta anche un oggetto di contesto.
find(callback, contextObj)Possiamo far riferimento a quest'oggetto dall'interno della funzione callback in ogni iterazione, tramite la keyword this. Questo ci permette di accedere a qualsiasi proprietà o metodo definiti all'interno dell'oggetto di contesto.
Come usare l'oggetto di contesto con find()
Consideriamo un array con delle domande di impiego da cui vogliamo selezionare il primo candidato che corrisponde a tutti i criteri.
Tutti i criteri vengono definiti all'interno dell'oggetto di contesto chiamato criteria e l'oggetto viene successivamente passato come secondo parametro del metodo find() . Poi, dall'interno della funzione callback, accediamo all'oggetto per verificare se il candidato soddisfa tutti i criteri specificati.
let applicants = [
{name: "aaron", yrsOfExperience: 18, age: 66},
{name: "beth", yrsOfExperience: 0, age: 18},
{name: "cara", yrsOfExperience: 4, age: 22},
{name: "daniel", yrsOfExperience: 3, age: 16},
{name: "ella", yrsOfExperience: 5, age: 25},
{name: "fin", yrsOfExperience: 0, age: 16},
{name: "george", yrsOfExperience: 6, age: 28},
]
let criteria = {
minimumExperience: 3,
lowerAge: 18,
upperAge: 65
}
let luckyApplicant = applicants.find(function(applicant) {
return applicant.yrsOfExperience >= this.minimumExperience && applicant.age <= this.upperAge
&& applicant.age >= this.lowerAge ;
}, criteria)
console.log(luckyApplicant);
/*
{
age: 22,
name: "cara",
yrsOfExperience: 4
}
*/Tecnicamente, tre candidati (Cara, Ella and George) soddisfano i criteri. In altre parole, tutti e tre hanno un età compresa tra 18 e 65 anni e almeno 3 anni di esperienza lavorativa.
Tuttavia, dato che il metodo find() restituisce SOLO la prima istanza che corrisponde alla ricerca, il loop verrà interrottogli e gli altri due candidati verranno ignorati.
In conclusione
Il metodo find() è un metodo Array.prototype che accetta una funzione callback e la esegue per ogni elemento all'interno di un array.
Quando la funzione callback viene valutata true, il metodo restituisce l'elemento corrente e interrompe il loop. Questo metodo restituisce soltanto il primo elemento che soddisfa la ricerca - qualsiasi altro elemento all'interno dell'array verrà ignorato.
In aggiunta alla funzione callback, il metodo find() accetta anche un oggetto di contesto come secondo argomento, così da permetterti di accedere a qualsiasi proprietà dalla funzione callback usando this.
Spero che tu abbia trovato interessante quest'articolo.
Se vuoi imparare dell'altro sul Web Development, visita il mio blog.
Grazie per aver letto, a presto.