Array in JavaScript

Introduzione agli array JavaScript

Un array JavaScript è una raccolta ordinata di valori indicizzata da numeri interi. A differenza degli object, che memorizzano proprietà con chiave senza un ordine garantito, un array mantiene i propri elementi in una sequenza specifica e consente di accedere a qualsiasi elemento tramite la sua posizione (il suo indice). Gli indici partono da 0, quindi il primo elemento si trova all'indice 0, il secondo all'indice 1 e così via.

Gli array sono una delle strutture dati più utilizzate nel linguaggio perché possono contenere un mix di qualsiasi tipo di valore — numbers, strings, boolean, object, persino altri array — e crescono o si riducono automaticamente quando si aggiungono o rimuovono elementi. Questa pagina spiega come creare array, modificarne il contenuto, iterarli, trasformarli e cercarvi elementi, e le pratiche che rendono leggibile il codice che fa ampio uso di array.

Creare e Inizializzare Array

Il modo più comune per creare un array è la sintassi del letterale array — un elenco separato da virgole racchiuso tra parentesi quadre:

let fruits = ["Apple", "Banana", "Cherry"];

È possibile utilizzare anche il costruttore new Array(), anche se viene raramente impiegato e presenta un caso limite confuso: quando si passa un singolo numero, imposta la lunghezza dell'array anziché aggiungere quel numero come elemento.

A causa di questo rischio, preferire la sintassi letterale per tutto tranne che per il dimensionamento deliberato di un array.

Accedere agli Elementi e alla Lunghezza

Si legge o sostituisce un elemento tramite il suo indice, e si legge il conteggio totale con la proprietà length. Assegnare a un indice oltre la fine corrente estende l'array.

Aggiungere e Rimuovere Elementi

Quattro metodi coprono le due estremità di un array. Prestare attenzione al valore restituito da ciascuno — questa è una fonte comune di bug.

• push() — aggiunge uno o più elementi alla fine e restituisce la nuova lunghezza.

• pop() — rimuove l'ultimo elemento e restituisce quell'elemento.

• unshift() — aggiunge uno o più elementi all'inizio e restituisce la nuova lunghezza.

• shift() — rimuove il primo elemento e restituisce quell'elemento.

Inserire e Rimuovere in Mezzo con splice()

push/pop/shift/unshift agiscono solo alle estremità. Per aggiungere, rimuovere o sostituire elementi in qualsiasi posizione, si usa splice(start, deleteCount, ...itemsToInsert). Modifica l'array in-place e restituisce un array degli elementi rimossi.

Copiare una Sezione con slice()

slice(start, end) restituisce una copia superficiale di una parte dell'array senza modificare l'originale. L'indice end non è incluso.

Iterare sugli Elementi

Esistono diversi modi per ciclare su un array. Si usa un ciclo for...of o forEach() quando si vuole semplicemente ogni valore; i cicli basati su indice si usano solo quando l'indice è effettivamente necessario. (Vedere il capitolo sui cicli per l'insieme completo di forme di ciclo.)

• for...of — il modo più pulito per leggere ogni valore in ordine.

• forEach() — esegue una callback una volta per elemento, ricevendo il valore, l'indice e l'array stesso.

Trasformare Array

Questi metodi restituiscono un nuovo array (o valore) invece di mutare l'originale, il che li rende ideali per un'elaborazione dati prevedibile e concatenabile.

• map() — costruisce un nuovo array trasformando ogni elemento.

• filter() — costruisce un nuovo array con solo gli elementi che superano un test.

• reduce() — riduce l'intero array a un singolo valore accumulando un risultato. Prende una callback (accumulator, current) e un valore iniziale.

Poiché map e filter restituiscono entrambi un array, è possibile concatenarli:

Cercare negli Array

• includes() — restituisce true/false in base all'esistenza di un valore. indexOf() restituisce l'indice del valore, o -1 se non viene trovato.

• find() e findIndex() — restituiscono il primo elemento (o il suo indice) che soddisfa una callback di test.

Ordinare Array

sort() ordina gli elementi in-place e restituisce lo stesso array.

Convertire Array in String

Il metodo join() combina tutti gli elementi in una singola string, usando il separatore specificato (una virgola per impostazione predefinita).

Operazioni Avanzate sugli Array

Array Multidimensionali

Poiché un array può contenere altri array, è possibile modellare griglie e matrici. Si usano due indici — matrix[row][column] — per accedere a un valore interno.

L'Operatore Spread

L'operatore spread (...) espande un iterabile — un array o una string — in elementi singoli ovunque siano attesi più valori. È il modo moderno per combinare e copiare array. (Per la forma di raccolta correlata, vedere parametri rest e sintassi spread.)

• Combinare array:

• Copiare un array (copia superficiale, quindi l'originale rimane intatto):

• Passare gli elementi di un array come argomenti a una funzione:

Destrutturazione di Array

La destrutturazione estrae i valori di un array in variabili separate in un'unica istruzione. (La stessa idea si applica agli object — vedere assegnamento per destrutturazione.)

• Scambiare variabili senza una variabile temporanea:

• Valori predefiniti che si applicano quando una posizione è assente:

Best Practice per l'Uso degli Array

• Dichiarare con const quando il riferimento all'array non cambierà. const impedisce solo la riassegnazione della variabile — è ancora possibile usare push, pop e modificare gli elementi, perché il contenuto dell'array non è bloccato.

• Preferire map, filter e reduce ai cicli manuali per trasformare dati — descrivono l'intento e restituiscono nuovi array invece di mutare lo stato condiviso.
• Usare l'operatore spread per copiare prima di mutare quando si vuole evitare di modificare l'array originale.
• Passare sempre una funzione di confronto a sort() per i numeri.

Conclusione

Gli array sono la struttura portante della gestione dei dati in JavaScript: ordinati, basati su indice e di dimensione dinamica. Una volta che si sa quali metodi mutano l'array (push, pop, splice, sort) rispetto a quelli che restituiscono nuovi valori (map, filter, slice, reduce), è possibile manipolare le collezioni con sicurezza. Combinando tutto ciò con l'operatore spread e la destrutturazione si ottiene codice conciso e leggibile. In seguito, esplorare il riferimento completo ai metodi degli array e come gli array si confrontano con gli object JavaScript.

Esercitazione