Come creare gli array in Javascript

Creazione di un Array

Ci sono diversi modi per creare un array in Javascript:

• Letterali di array;
• L'operatore spread ... su un oggetto iterabile;
• Il costruttore Array();
• I metodi factory Array.of() e Array.from().

Vediamo questi modi in dettaglio

Letterali di Array

Il modo di gran lunga più semplice per creare un array è con un letterale di array, che è semplicemente un elenco separato da virgole di elementi di array racchiusi tra parentesi quadre.

Ad esempio:

// Crea un array senza elementi
let vuoto = [];

// Crea un array con 5 elementi numerici
let primi = [2, 3, 5, 7, 11];

// Crea un array con 3 elementi di tipo diverso
// Inoltre, lascia una virgola finale opzionale
let misto = [ 1.1, true, "a", ];

I valori in un letterale di array non devono essere costanti; possono essere espressioni arbitrarie:

let base = 1024;
let tabella = [base, base+1, base+2, base+3];

I letterali di array possono contenere letterali di oggetto o altri letterali di array:

let b = [[1, {x: 1, y: 2}], [2, {x: 3, y: 4}]];

Se un letterale di array contiene virgole multiple di seguito, senza valore intermedio, l'array è sparso. Gli elementi dell'array per i quali i valori sono omessi non esistono ma se richiesti restituiscono undefined.:

// Un array con elementi all'indice 0 e 2.
// Nessun elemento è posto all'indice 1
// L'array avrà lunghezza 3
let conteggio = [1,,3];

// Un array senza elementi ma di lunghezza 2
let indefiniti = [,,];

L'ultimo caso è molto interessante. Infatti, la sintassi del letterale di array consente una virgola finale opzionale, quindi [,,] ha una lunghezza di 2, e non 3 come si potrebbe pensare.

L'operatore spread

In ES6 e versioni successive, è possibile utilizzare l'operatore spread, ..., per includere gli elementi di un array all'interno di un array letterale:

let a = [1, 2, 3];

// L'array b sarà composto da:
// - L'elemento 0
// - Tutti gli elementi di a
// - L'elemento 4
let b = [0, ...a, 4];

// L'array b sarà così composto:
// [0, 1, 2, 3, 4]

I tre punti spalmano (in inglese spread) l'array a in modo che i suoi elementi diventino elementi all'interno dell'array letterale che viene creato. È come se ...a fosse sostituito dagli elementi dell'array a, elencati letteralmente come parte dell'array letterale che li racchiude. Si noti che, anche se chiamiamo questi tre punti operatore spread, non si tratta di un vero e proprio operatore perché può essere utilizzato solo negli array letterali e, come vedremo più avanti nelle prossime lezioni, nelle invocazioni di funzioni.

L'operatore spread è un modo conveniente per creare una copia (superficiale) di un array:

let originale = [1,2,3];
let copia = [...originale];

// Modificare la copia non cambia l'originale
copia[0] = 0;

// Conterrà ancora 1
originale[0]

L'operatore spread funziona su qualsiasi oggetto iterabile. Gli oggetti iterabili sono ciò su cui itera il ciclo for/of. Li abbiamo introdotti già in precedenza, e li studieremo in dettaglio nelle prossime lezioni.

Le stringhe, ad esempio, sono iterabili, quindi è possibile utilizzare un operatore spread per trasformare qualsiasi stringa in un array di stringhe di singoli caratteri:

let lettere = [..."Ciao"];

// L'array lettere conterrà:
// ["C", "i", "a", "o"]

Gli oggetti Set (o insiemi, che vedremo più avanti) sono iterabili. Dato che rappresentano un insieme inteso dal punto di vista matematico, essi non possono contenere elementi ripetuti. Quindi un modo semplice per rimuovere elementi duplicati da un array è convertire l'array in un set e poi convertire immediatamente il set di nuovo in un array utilizzando l'operatore spread:

let lettere = [..."Ciao, come stai?"];

lettere = [...new Set(lettere)];

console.log(lettere);

L'output, in questo caso, sarà:

[
  'C', 'i', 'a', 'o',
  ',', ' ', 'c', 'm',
  'e', 's', 't', '?'
]

Il costruttore Array

Un altro modo per creare un array è con il costruttore Array().

Possiamo invocare questo costruttore in tre modi distinti:

• Chiamarlo senza argomenti:

  let a = new Array();
  

  Questo metodo crea un array vuoto senza elementi ed è equivalente al letterale di array [].

• Chiamarlo con un singolo argomento numerico, che specifica una lunghezza:

  let a = new Array(10);
  

  Questa tecnica crea un array con la lunghezza specificata.

  Questa forma del costruttore Array() può essere usata per pre-allocare un array quando sappiamo in anticipo quanti elementi saranno richiesti. Si noti che nessun valore è memorizzato nell'array, e le proprietà di indice dell'array "0", "1", e così via non sono nemmeno definite per l'array.

• Specificare esplicitamente due o più elementi dell'array o un singolo elemento non numerico per l'array:

  let a = new Array(5, 4, 3, 2, 1, "prova");
  

  In questa forma, gli argomenti del costruttore diventano gli elementi del nuovo array. Usare un letterale di array è quasi sempre più semplice di questo utilizzo del costruttore Array(). Pertanto è molto raro trovare codice che utilizza questa forma del costruttore Array().

Array.of

Quando la funzione costruttore Array() viene invocata con un argomento numerico, utilizza quell'argomento come lunghezza dell'array. Ma quando viene invocata con più di un argomento numerico, tratta quegli argomenti come elementi per l'array da creare. Questo significa che il costruttore Array() non può essere utilizzato per creare un array con un singolo elemento numerico.

In ES6, la funzione Array.of() affronta questo problema: è un metodo factory che crea e restituisce un nuovo array, utilizzando i valori dei suoi argomenti (indipendentemente da quanti ce ne siano) come elementi dell'array:

Array.of()        // => []; restituisce un array vuoto senza argomenti
Array.of(10)      // => [10]; può creare array con un singolo argomento numerico
Array.of(1,2,3)   // => [1, 2, 3]

Array.from

Array.from è un altro metodo factory degli array introdotto in ES6. Si aspetta un oggetto iterabile o simile ad un array come primo argomento e restituisce un nuovo array che contiene gli elementi di quell'oggetto. Con un argomento iterabile, Array.from(iterabile) funziona come l'operatore spread [...iterabile]. È anche un modo semplice per effettuare una copia di un array:

let copia = Array.from(originale);

Array.from() è anche importante perché definisce un modo per fare una vera copia array di un oggetto simile ad un array. Gli oggetti simili ad array sono oggetti non-array che hanno una proprietà numerica length e hanno valori memorizzati con proprietà i cui nomi risultano essere interi. Quando si lavora con JavaScript lato client, i valori di ritorno di alcuni metodi del browser web sono simili ad array, e può essere più facile lavorare con essi se prima li si converte in veri array:

let veroarray = Array.from(simileararray);

Array.from() accetta anche un secondo argomento opzionale. Se si passa una funzione come secondo argomento, allora mentre il nuovo array viene costruito, ogni elemento dall'oggetto sorgente verrà passato alla funzione specificata, e il valore di ritorno della funzione verrà memorizzato nell'array invece del valore originale. Questo è molto simile al metodo map() degli array che verrà introdotto nelle prossime lezioni, ma è più efficiente eseguire la mappatura mentre l'array viene costruito piuttosto che costruire l'array e poi mapparlo in un altro nuovo array.

Verificare se un oggetto è un array

Per verificare se un oggetto è un array, si può usare il metodo Array.isArray(). Questo metodo accetta un singolo argomento e restituisce true se l'argomento è un array, altrimenti restituisce false:

Array.isArray([])          // => true
Array.isArray([1,2,3])    // => true
Array.isArray({})          // => false
Array.isArray("ciao")      // => false
Array.isArray(new Array()) // => true