Array in JavaScript: creare, accedere e scorrere

Un array è una lista ordinata

In JavaScript gli array contengono una sequenza ordinata di valori. I valori possono essere di qualsiasi tipo (numeri, stringhe, oggetti, persino altri array) e non devono essere tutti dello stesso tipo. Ne crei uno con le parentesi quadre:

const fruits = ["apple", "banana", "cherry"];
const mixed = [1, "two", true, null, { id: 3 }];
const empty = [];

console.log(fruits);
console.log(mixed);
console.log(empty);

Questa sintassi letterale è il modo in cui creerai gli array il 99% delle volte. Esiste anche new Array(...), ma ha un'insidia: new Array(3) crea un array di lunghezza 3 senza elementi reali, non [3]. Resta su [].

Gli indici partono da zero

Accedi agli elementi per posizione, a partire da 0:

const colors = ["red", "green", "blue"];

console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);
console.log(colors[99]);

Due cose da notare. Primo, accedere oltre la fine dell'array non genera un errore: restituisce undefined. È una fonte comune di bug del tipo "perché questo è undefined?". Secondo, puoi assegnare a qualsiasi indice, anche oltre la fine, e JavaScript allungherà l'array senza lamentarsi:

const colors = ["red", "green", "blue"];
colors[5] = "purple";

console.log(colors);
console.log(colors.length);

Le posizioni 3 e 4 diventano "slot vuoti" (buchi di un array sparso). La lunghezza salta a 6. Raramente è quello che vuoi: è un effetto collaterale della flessibilità degli array, non una funzionalità su cui contare.

length è sempre aggiornato

array.length è sempre uguale all'indice più alto più uno. Si aggiorna da solo quando aggiungi o rimuovi elementi:

const nums = [10, 20, 30];
console.log(nums.length);

nums.push(40);
console.log(nums.length);

nums.length = 2;
console.log(nums);

Vale la pena ricordare quest'ultimo trucco: assegnare un valore a length tronca l'array. Impostare nums.length = 0 è un modo rapido per svuotarlo sul posto.

push, pop, shift, unshift

Quattro metodi per aggiungere e rimuovere elementi alle estremità:

const stack = [];

stack.push("a");
stack.push("b");
stack.push("c");
console.log(stack);

const last = stack.pop();
console.log(last, stack);

stack.unshift("start");
console.log(stack);

const first = stack.shift();
console.log(first, stack);

• push(x) aggiunge alla fine e restituisce la nuova lunghezza.
• pop() rimuove dalla fine e restituisce l'elemento rimosso.
• unshift(x) aggiunge all'inizio.
• shift() rimuove dall'inizio.

push/pop sono veloci. shift/unshift devono reindicizzare tutti gli altri elementi, quindi sono più lenti sugli array grandi: nessun problema con le dimensioni di tutti i giorni, ma è bene saperlo se lavori con milioni di elementi.

slice vs splice

Questi due hanno nomi simili e comportamenti completamente diversi. Tienili ben distinti e ti risparmierai parecchi grattacapi.

slice(start, end) restituisce una copia di una parte dell'array. L'originale non viene toccato. end è escluso:

const letters = ["a", "b", "c", "d", "e"];

const middle = letters.slice(1, 4);
console.log(middle);
console.log(letters);

splice(start, deleteCount, ...items) modifica l'array. Può eliminare, inserire o entrambe le cose, e restituisce ciò che ha rimosso:

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2);
console.log(removed);
console.log(letters);

letters.splice(1, 0, "x", "y");
console.log(letters);

Regola pratica: se la parola ti fa pensare a tagliare una fetta (slice) da una pagnotta, è slice. Se ti fa pensare al montaggio di una pellicola (splice: tagliare e inserire), è splice.

Cercare elementi: indexOf, includes, find

Tre modi per cercare qualcosa, per situazioni diverse:

const fruits = ["apple", "banana", "cherry"];

console.log(fruits.indexOf("banana"));
console.log(fruits.indexOf("grape"));

console.log(fruits.includes("cherry"));
console.log(fruits.includes("grape"));

const users = [{ id: 1, name: "Ada" }, { id: 2, name: "Boris" }];
const boris = users.find(u => u.id === 2);
console.log(boris);

• indexOf(x) ti dà la posizione, oppure -1 se non lo trova. Utile quando ti serve l'indice.
• includes(x) ti dà un booleano. È più pulito quando vuoi solo sapere "c'è o non c'è?". Gestisce anche correttamente NaN, cosa che indexOf non fa.
• find(predicate) esegue una funzione per ogni elemento e restituisce il primo che corrisponde. È quello giusto per gli array di oggetti, dove indexOf e includes fanno solo confronti di uguaglianza stretta.

Scorrere un array

Ci sono alcuni buoni modi, ognuno adatto a una situazione diversa:

const scores = [82, 91, 73, 88];

for (const score of scores) {
    console.log(score);
}

scores.forEach((score, i) => {
    console.log(i, score);
});

for (let i = 0; i < scores.length; i++) {
    console.log(i, scores[i]);
}

for...of è la scelta predefinita: leggibile, funziona con qualsiasi iterabile e ti dà direttamente il valore. forEach va bene quando ti serve anche l'indice e non devi uscire dal ciclo in anticipo (non puoi usare break dentro forEach). Il classico for con l'indice è prolisso ma ti dà il pieno controllo: usalo quando devi saltare elementi, scorrere all'indietro o entrambe le cose.

Un ciclo da evitare: for...in. Itera sulle chiavi e include le proprietà ereditate. Serve per gli oggetti, non per gli array.

Copiare e combinare

Gli array sono valori per riferimento. Assegnarne uno a un'altra variabile non lo copia: crea due nomi per lo stesso array:

const a = [1, 2, 3];
const b = a;
b.push(4);

console.log(a);
console.log(b);

Per copiarlo davvero, usa l'operatore spread oppure slice():

const a = [1, 2, 3];
const b = [...a];
const c = a.slice();

b.push(4);
c.push(5);

console.log(a);
console.log(b);
console.log(c);

Entrambi producono una copia superficiale: l'array di primo livello è nuovo, ma se gli elementi sono oggetti, quegli oggetti restano condivisi. Lo spread è anche il modo più pulito per combinare array:

const front = [1, 2];
const back = [3, 4];
const all = [...front, 99, ...back];

console.log(all);

Array di oggetti

Nel codice reale, la maggior parte degli array contiene oggetti. Gli stessi metodi funzionano, ma il confronto diventa più interessante:

const users = [
    { id: 1, name: "Ada", active: true },
    { id: 2, name: "Boris", active: false },
    { id: 3, name: "Chen", active: true },
];

const activeNames = users
    .filter(u => u.active)
    .map(u => u.name);

console.log(activeNames);

filter restituisce un nuovo array con gli elementi che soddisfano un predicato. map restituisce un nuovo array in cui ogni elemento è trasformato. Concatenarli è il pane quotidiano quando lavori con array di oggetti, e la prossima pagina della documentazione approfondisce questa famiglia di metodi.

Array e oggetti a confronto

Un modello mentale veloce: usa un array quando l'ordine conta e lavori con una lista di cose dello stesso tipo. Usa un oggetto (o una Map) quando accedi alle cose per nome. "Primo, secondo, terzo" è territorio degli array. "Trova l'utente con id 42" è territorio degli oggetti o delle Map.

Puoi combinarli (gli array di oggetti sono ovunque), ma non usare un array come dizionario con chiavi e non usare un oggetto come lista ordinata. Ognuno fa bene un lavoro solo.

Prossimo passo: destructuring

Estrarre valori dagli array per indice (e proprietà dagli oggetti per nome) capita così spesso che JavaScript ha una sintassi dedicata. Si chiama destructuring, ed è il prossimo argomento.