Come Usare i Metodi degli Array in JavaScript: Metodi di Iterazione

Introduzione

In JavaScript, il tipo di dati array consiste in una lista di elementi. Ci sono molti utili metodi incorporati disponibili per gli sviluppatori JavaScript per lavorare con gli array. I metodi che modificano l’array originale sono noti come metodi mutatori, e i metodi che restituiscono un nuovo valore o rappresentazione sono noti come metodi accessori.

C’è una terza classe di metodi array, noti come metodi di iterazione, che sono metodi che operano su ogni elemento in un array, uno alla volta. Questi metodi sono strettamente associati ai cicli. In questo tutorial, ci concentreremo sui metodi di iterazione.

Per ottenere il massimo da questo tutorial, è necessario avere familiarità con la creazione, l’indicizzazione, la modifica e il loop degli array, che è possibile rivedere nel tutorial Comprensione degli Array in JavaScript.

In questo tutorial, utilizzeremo metodi di iterazione per ciclare attraverso gli array, eseguire funzioni su ogni elemento in un array, filtrare i risultati desiderati di un array, ridurre gli elementi dell’array a un singolo valore e cercare attraverso gli array per trovare valori o indici.

Comprensione delle funzioni freccia

Molti esempi in questo tutorial utilizzeranno le espressioni di funzione freccia di JavaScript, che sono rappresentate da un segno di uguale seguito da un segno di maggiore: =>.

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // codice da eseguire
}

example();

La versione più recente di JavaScript al momento della scrittura consente l’uso di funzioni freccia, che possono essere scritte con la seguente sintassi:

var example = () => {
  // codice da eseguire
}

example();

Le parentesi in entrambi i casi possono contenere parametri. Quando c’è un solo parametro, le parentesi possono essere omesse, come segue:

var example = parameter1 => {
  // codice da eseguire
}

Durante gli esempi in questo tutorial, useremo la sintassi della funzione freccia. Per leggere e capire di più sulle funzioni in JavaScript, leggi il riferimento alle funzioni sulla Mozilla Developer Network.

forEach()

Il metodo forEach() chiama una funzione per ogni elemento in un array.

Cominciamo con il seguente array assegnato alla variabile fish:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

Possiamo usare forEach() per stampare ogni elemento nell’array fish sulla console.

// Stampare ogni elemento dell'array
fish.forEach(individualFish => {
	console.log(individualFish);
})

Una volta fatto ciò, riceveremo l’output seguente:

Output
piranha
barracuda
cod
eel

Un altro modo per farlo è utilizzando la parola chiave for loop e testarla contro la proprietà length dell’array.

// Iterare sulla lunghezza dell'array
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

Il codice sopra avrà lo stesso output dell’uso del metodo forEach(). Come metodo di iterazione specificamente destinato all’uso con gli array, forEach() è più conciso e diretto per questo particolare compito.

map()

Il metodo map() crea un nuovo array con i risultati di una chiamata di funzione su ogni elemento nell’array.

Per un esempio di come utilizzare il metodo di iterazione map(), possiamo stampare ogni iterazione di un loop sulla console. map() non muta l’array originale, ma restituisce invece un nuovo valore di array.

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// Stampare ogni elemento nell'array
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

Possiamo anche usare map() per cambiare i valori di ogni elemento in un array. Per dimostrarlo, aggiungeremo una s alla fine di ogni elemento nell’array fish per pluralizzare ogni parola.

// Pluralizzare tutti gli elementi nell'array di pesci
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

La variabile originale fish rimane invariata, ma pluralFish contiene ora una versione modificata della variabile originale.

filter()

Il metodo filter() crea un nuovo array con gli elementi che superano il risultato di un dato test.

Potremmo utilizzare filter() per restituire un nuovo array contenente solo gli elementi in una lista che iniziano con una lettera specifica. Per fare ciò, possiamo utilizzare l’indicizzazione delle stringhe per chiamare il primo elemento (o lettera) in ciascun elemento stringa dell’array.

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// Filtrare tutte le creature che iniziano con "s" in una nuova lista
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

Abbiamo testato quali elementi nell’array hanno una s all’indice 0, e abbiamo assegnato il risultato a una nuova variabile.

filter() è un metodo di iterazione e non muta l’array originale.

reduce()

Il metodo reduce() ridurrà un array a un singolo valore.

Questo è visto comunemente con numeri, come ad esempio trovare la somma di tutti i numeri in un array.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// Ottenere la somma di tutti i valori numerici
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce() può anche essere utilizzato con stringhe e altri tipi di dati. Il valore restituito da reduce() può essere un numero, una stringa, un array o un altro tipo di dati. reduce() è un metodo di iterazione che non muta l’array originale.

trova()

Il metodo trova() restituisce il primo valore in un array che supera un dato test.

Come esempio, creeremo un array di creature marine.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Poi useremo il metodo trova() per verificare se una qualsiasi delle creature nell’array sono cefalopodi.

// Controlla se un dato valore è un cefalopode
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

Dato che polpo è stata la prima voce nell’array a soddisfare il test nella funzione isCephalopod(), è il primo valore restituito.

Il metodo trova() può aiutarti a lavorare con array che contengono molti valori.

trovaIndice()

Il metodo trovaIndice() restituisce il primo indice in un array che supera un dato test.

Possiamo usare lo stesso esempio di creatureMarine dal metodo trova().

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Utilizzando il test isCephalopod, troveremo il numero di indice invece del valore della prima corrispondenza.

// Controlla se un dato valore è un cefalopode
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

polpo è il primo elemento a soddisfare il test ed ha un indice di 1, pertanto è il numero di indice che viene restituito.

Se il test non viene soddisfatto, findIndex() restituirà -1.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

Il metodo findIndex() è particolarmente utile quando si lavora con array contenenti molti elementi.

Conclusione

In questo tutorial, abbiamo esaminato i principali metodi di iterazione incorporati negli array in JavaScript. I metodi di iterazione operano su ogni elemento in un array e spesso eseguono una nuova funzione. Abbiamo visto come iterare attraverso gli array, cambiare il valore di ogni elemento in un array, filtrare e ridurre gli array, e trovare valori e indici.

Per rivedere le basi degli array, leggi Comprendere gli array in JavaScript. Per ulteriori informazioni sulla sintassi in JavaScript, consulta il nostro tutorial su “Comprendere la sintassi e la struttura del codice in JavaScript”.