Metodi degli Array in JavaScript
Impara i principali metodi degli array JavaScript con esempi eseguibili: push, pop, map, filter, reduce, slice, splice, find e i nuovi metodi immutabili.
Introduzione
Gli array sono una delle strutture dati più utilizzate in JavaScript, e gran parte della loro potenza deriva dai loro metodi integrati — funzioni che si chiamano su un array per aggiungere, rimuovere, cercare, trasformare o riordinare i suoi elementi. Questa guida copre i metodi che si usano ogni giorno, spiega l'importante distinzione tra i metodi che mutano l'array originale e quelli che restituiscono un nuovo array, e mostra ciascuno con un esempio eseguibile.
Se sei nuovo agli array, inizia con il capitolo JavaScript Array, poi torna qui.
Comprendere gli Array in JavaScript
Un array memorizza un elenco ordinato di valori in una singola variabile. I valori possono essere di qualsiasi tipo di dato JavaScript — numeri, string, object, persino altri array — e non è necessario decidere la dimensione in anticipo.
Creare un Array
Il modo più semplice per creare un array è usare la sintassi letterale con le parentesi quadre:
let fruits = ["Apple", "Banana", "Cherry"];Questo crea un array chiamato fruits con tre elementi di tipo string.
Accedere agli Elementi dell'Array
Gli elementi sono accessibili tramite il loro indice, una posizione che parte da zero contando dall'inizio dell'array:
La proprietà length indica quanti elementi ci sono, e at() accetta indici negativi, quindi at(-1) restituisce sempre l'ultimo elemento.
Metodi Mutanti vs. Non Mutanti
Prima di esaminare i singoli metodi, è fondamentale capire questa distinzione — spiega la maggior parte dei bug legati agli array:
- I metodi mutanti modificano l'array sul posto.
push,pop,shift,unshift,splice,sort,reverseefillmodificano tutti l'array su cui vengono chiamati. - I metodi non mutanti lasciano l'originale intatto e restituiscono un nuovo array o valore.
map,filter,slice,concat,reduce,finde i più recentitoSorted/toSpliced/toReversedrientrano in questo gruppo.
Quando condividi un array tra funzioni o lo memorizzi in uno stato (ad esempio in un componente React), preferisci i metodi non mutanti per evitare di modificare accidentalmente dati su cui qualcun altro fa affidamento.
Metodi Fondamentali degli Array
| Metodo | Muta? | Descrizione |
|---|---|---|
push() | Sì | Aggiunge uno o più elementi alla fine; restituisce la nuova lunghezza. |
pop() | Sì | Rimuove l'ultimo elemento e lo restituisce. |
shift() | Sì | Rimuove il primo elemento e lo restituisce. |
unshift() | Sì | Aggiunge elementi all'inizio; restituisce la nuova lunghezza. |
splice() | Sì | Rimuove, sostituisce e/o inserisce elementi in qualsiasi posizione. |
sort() | Sì | Ordina gli elementi (alfabeticamente per impostazione predefinita). |
reverse() | Sì | Inverte l'ordine degli elementi. |
fill() | Sì | Sovrascrive un intervallo di elementi con un valore statico. |
slice() | No | Restituisce una copia superficiale di una porzione dell'array. |
concat() | No | Unisce array e restituisce un nuovo array. |
map() | No | Restituisce un nuovo array con i risultati di una funzione applicata a ogni elemento. |
filter() | No | Restituisce un nuovo array con gli elementi che superano un test. |
reduce() | No | Riduce l'array a un singolo valore. |
forEach() | No | Esegue una funzione per ogni elemento (restituisce undefined). |
find() | No | Restituisce il primo elemento che soddisfa un test. |
findIndex() | No | Restituisce l'indice del primo elemento che soddisfa un test. |
indexOf() | No | Restituisce il primo indice di un valore, o -1. |
includes() | No | Restituisce true/false a seconda che un valore esista. |
some() | No | true se almeno un elemento supera un test. |
every() | No | true se tutti gli elementi superano un test. |
toSorted() | No | Restituisce una copia ordinata (l'array rimane invariato). |
toSpliced() | No | Restituisce una copia modificata con splice (l'array rimane invariato). |
Aggiungere e Rimuovere Elementi
push()
push() aggiunge uno o più elementi alla fine dell'array e restituisce la nuova lunghezza.
unshift()
unshift() inserisce elementi all'inizio dell'array.
pop()
pop() rimuove l'ultimo elemento e lo restituisce. Insieme a push(), permette a un array di comportarsi come uno stack (ultimo entrato, primo uscito).
shift()
shift() rimuove il primo elemento e lo restituisce. Si noti che shift e unshift sono più lenti di push/pop perché ogni elemento rimanente deve essere reindicizzato.
Trovare Elementi
indexOf()
indexOf() restituisce il primo indice di un valore, o -1 se il valore non viene trovato. Utilizza l'uguaglianza stretta, quindi non può trovare object in base al loro contenuto.
includes()
includes() risponde a una semplice domanda sì/no: questo valore è nell'array? È più chiaro di indexOf(x) !== -1 e, a differenza di indexOf, può trovare NaN.
find() e findIndex()
Quando è necessario individuare un elemento tramite una condizione piuttosto che un valore esatto, usa find() (restituisce l'elemento) o findIndex() (restituisce il suo indice). Entrambi si fermano al primo risultato trovato.
some() e every()
some() restituisce true se almeno un elemento supera il test; every() restituisce true solo se tutti lo superano.
Iterare e Trasformare
Questi metodi accettano una funzione di callback e sono il cuore del JavaScript moderno e dichiarativo. Si combinano naturalmente con i pattern del capitolo JavaScript Loops.
forEach()
forEach() esegue una funzione una volta per ogni elemento. Restituisce sempre undefined, quindi usalo per gli effetti collaterali (come il logging), non per costruire un nuovo valore.
map()
map() crea un nuovo array trasformando ogni elemento. Il nuovo array ha sempre la stessa lunghezza dell'originale.
filter()
filter() crea un nuovo array contenente solo gli elementi per i quali la callback restituisce un valore truthy.
reduce()
reduce() riduce un array a un singolo valore applicando ripetutamente una funzione. La callback riceve un accumulatore e l'elemento corrente; il secondo argomento di reduce è il valore iniziale dell'accumulatore.
Puoi concatenare questi trasformatori: prima map, poi filter, poi reduce, ogni passaggio produce l'input per il successivo.
Riordinare e Suddividere
sort()
sort() ordina sul posto. Per impostazione predefinita confronta gli elementi come string, il che produce risultati sorprendenti per i numeri — 10 viene prima di 2 perché "10" precede "2" alfabeticamente. Passa sempre una funzione di confronto quando ordini numeri.
reverse()
reverse() inverte l'ordine degli elementi sul posto.
slice()
slice(start, end) restituisce una copia superficiale di una porzione dell'array. L'indice end non è incluso e l'originale rimane intatto — rendendo slice() un modo pratico per copiare un array.
splice()
splice(start, deleteCount, ...items) è l'editor universale sul posto: può rimuovere, sostituire e inserire. Qui inserisce "Grape" all'indice 2 senza eliminare nulla (deleteCount è 0).
concat()
concat() unisce array in un nuovo array senza modificare gli originali. La sintassi spread ([...a, ...b]) fa la stessa cosa — vedi Rest parameters e sintassi spread.
fill()
fill(value, start, end) sovrascrive un intervallo di elementi con un valore statico, sul posto.
Metodi Immutabili (di Copia)
Introdotti in ES2023, questi metodi fanno esattamente quello che fanno sort, splice e reverse — ma restituiscono un nuovo array e lasciano l'originale invariato. Sono ideali per gli stati che non devono essere mutati.
toSorted()
toSpliced()
Conclusione
Padroneggiare i metodi degli array JavaScript è una delle competenze più redditizie nel linguaggio: map, filter e reduce sostituiscono la maggior parte dei cicli manuali, mentre sapere quali metodi mutano rispetto a quelli che copiano previene un'intera classe di bug. Continua a esercitarti con gli esempi eseguibili sopra ed esplora argomenti correlati come le basi di JavaScript Array e la sintassi spread.