Raccolte indicizzate

Una raccolta indicizzata è una struttura di dati in cui gli elementi vengono archiviati e accessibili tramite indici numerati. Ai valori archiviati in una raccolta indicizzata vengono assegnati indici numerati a partire da 0, un pattern chiamato "indicizzazione zero". Potrai quindi accedere ai valori archiviati in una raccolta indicizzata facendo riferimento ai relativi indici.

Array

Un array è un container che può contenere zero o più valori di qualsiasi tipo di dati, compresi oggetti complessi o altri array. I valori archiviati in un array a volte sono denominati "elementi" dell'array.

Crea un array

Come per i tipi di dati primitivi, esistono due approcci per creare un array: come valore letterale array o richiamando il costruttore Array() integrato di JavaScript con new Array(). L'assegnazione di un array a una variabile offre un modo altamente portabile e iterabile per assegnare più valori a un singolo identificatore.

La sintassi del valore letterale array utilizza un insieme di parentesi ([]) che racchiudono zero o più valori di dati separati da virgole:

const myArray = [];

La sintassi del costruttore di array utilizza l'oggetto Array integrato di JavaScript come costruttore con la parola chiave new:

const myArray = new Array();

Le sintassi dei valori letterali e del costruttore di array consentono di compilare un array con informazioni al momento della creazione, anche se le sintassi differiscono leggermente in termini di definizione di questi valori. La sintassi del valore letterale array utilizza valori separati da virgole tra le parentesi, che hanno lo stesso aspetto dell'array risultante:

const myArray = [ true, null, "String", false ];

myArray;
> [ true, null, "String", false ]

La sintassi del costruttore di array utilizza valori separati da virgole come argomenti, con una speciale eccezione di comportamento:

const myArray = new Array( true, null, "String", false );

myArray;
> Array(4) [ true, null, "String", false ]

Quando un singolo valore numerico viene passato al costruttore Array, quel valore non viene assegnato alla posizione zero nell'array risultante. Viene invece creato un array con quel numero di slot vuoti per i valori. Ciò non impone alcuna limitazione all'array. Gli elementi possono essere aggiunti e rimossi come con un valore letterale array.

// Firefox:\
const myArray = new Array( 10 );

myArray;
> Array(10) [ <10 empty slots> ]

// Chrome:
const myArray = new Array( 10 );

myArray;
> (10) [empty × 10]

Gli array che contengono slot vuoti (a volte chiamati "array scarsi") sono casi speciali. Anziché contenere un valore undefined o null esplicito, gli slot vuoti vengono spesso, ma non sempre, trattati come valori undefined altrove nella lingua.

Puoi creare accidentalmente un array sparse utilizzando la sintassi del valore letterale array omettendo un valore tra le virgole quando crei un valore letterale dell'array:

const myArray = [ true,, true, false ];

myArray;
> Array(4) [ true, <1 empty slot>, true, false ]

Sebbene non venga considerato come un valore significativo in tutti i contesti, uno slot vuoto viene preso in considerazione nella lunghezza totale dell'array, generando potenzialmente risultati inaspettati durante l'iterazione dei valori di un array:

const myArray = [ 1,, 3, 4 ];

myArray.length;
> 4

for( const myValue of myArray ) {
  console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14

Questo comportamento è un trattenuta di alcune delle prime decisioni di progettazione di JavaScript. Evita di utilizzare array sparsi nello sviluppo moderno.

Come per le primitive, un valore letterale array eredita le proprietà e i metodi dal costruttore corrispondente. Poiché un array è una forma speciale di oggetto, la sintassi del valore letterale array e la sintassi new Array() creano risultati identici dal punto di vista funzionale: un oggetto che eredita il proprio prototipo dal costruttore Array.

const arrayLiteral = [];
const arrayConstructor = new Array();

typeof arrayLiteral;
> "object"

arrayLiteral;
> Array []
    length: 0
    <prototype>: Array []

typeof arrayConstructor;
> "object"

arrayConstructor;
> Array []
    length: 0
    <prototype>: Array []

Poiché i due risultati sono identici e la sintassi del valore letterale array è più concisa e letterale, consigliamo vivamente di utilizzare sempre la sintassi del valore letterale dell'array anziché la sintassi new Array().

Accedi ai valori dell'array

Puoi accedere ai singoli elementi all'interno dell'array utilizzando la notazione parentesi, un insieme di parentesi ([]) che segue l'array o il relativo identificatore contenente un numero che fa riferimento all'indice di quell'elemento:

[ "My string", "My other string" ][ 1 ];
> "My other string"

const myArray = [ "My string", 50, true ];

myArray[ 0 ];
> "My string"

myArray[ 1 ];
> 50

myArray[ 2 ];
> true

Gli array in JavaScript non sono associativi, ovvero non puoi utilizzare una stringa arbitraria come indice. Tuttavia, i valori numerici utilizzati per accedere agli elementi di un array vengono costretti a generare un valore stringa dietro le quinte, il che significa che puoi utilizzare un valore stringa contenente solo caratteri numerici:

const myArray = [ "My string", 50, true ];

myArray[ 2 ];
> true

myArray[ "2" ];
> true

Il tentativo di accedere a un elemento al di fuori di quelli definiti nell'array genera undefined, non un errore:

const myArray = [ "My string", 50, true ];

myArray[ 9 ];
> undefined

Distruzione del compito

La distruzione dell'assegnazione è un modo conciso per estrarre un intervallo di valori da array o oggetti e assegnarli a un insieme di identificatori, un processo a volte chiamato "unpacking" della struttura di dati originale, anche se non modifica l'array o l'oggetto originale.

La distruzione dei compiti utilizza un elenco di identificatori di tipo array o oggetto per tenere traccia dei valori. Nella sua forma più semplice, chiamata destrutturazione binding pattern, ogni valore viene decompresso dall'array o dall'oggetto e assegnato a una variabile corrispondente, inizializzata utilizzando let o const (o var):

const myArray = [ "A string", "A second string" ];
const [ myFirstElement, mySecondElement ] = myArray;

const myObject = { firstValue: false, secondValue: true };
const { myProp, mySecondProp } = myObject;

myFirstElement;
> "My string"

mySecondElement;
> "Second string"

myProp;
> false

mySecondProp;
> true

Utilizza le parentesi graffe ({}) per destrutturare un oggetto e le parentesi quadre ([]) per destrutturare un array.

const myArray = [ false, true ];
const myObject = { firstValue: false, secondValue: true };

const [ myProp, mySecondProp ] = myObject;
> Uncaught TypeError: myObject is not iterable

const { myElement, mySecondElement } = myArray;

myElement
> undefined

mySecondElement;
> undefined

La distruzione di un array avviene in ordine sequenziale, da sinistra a destra. Ogni identificatore nell'assegnazione di destrutturazione corrisponde all'elemento dell'array con lo stesso indice:

const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;

myElement;
> 1

mySecondElement;
> 2

myThirdElement;
> 3

Questo è anche il comportamento predefinito quando si distrugge un oggetto. Tuttavia, se gli identificatori utilizzati nell'assegnazione distruttiva corrispondono alle chiavi delle proprietà dell'oggetto, tali identificatori vengono completati con i valori delle proprietà corrispondenti, indipendentemente dall'ordine in cui sono specificati:

const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

Gli elementi possono essere ignorati omettendo un identificatore:

const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;

firstValue;
> 1

secondValue;
> 3

La sintassi di distruzione consente anche di assegnare valori predefiniti nel caso in cui un valore destrutturato sia uno slot vuoto, come nel caso di un array sparso, o un valore undefined.

const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;

firstValue;
> true

secondValue;
> "Default string."

La distruzione non forza i valori a determinati tipi. Ciò significa che i valori "falsy", come le stringhe vuote ("") o null, sono ancora considerati valori scomposti significativi:

const myArray = [ false, null, 0, "",, undefined ];
const [ falseValue = true, nullValue = true, zeroValue = true, emptyStringValue = true, emptySlot = true, undefinedValue = true ] = myArray;

falseValue;
> false;

nullValue;
> null

zeroValue;
> 0

emptyStringValue;
> ""

emptySlot;
> true

undefinedValue;
> true

Operatore di diffusione

Utilizza l'operatore di diffusione (...), introdotto in ES6 per espandere una struttura di dati iterabile, come un array, una stringa o un valore letterale oggetto, in singoli elementi. L'operatore di diffusione è immediatamente seguito dalla struttura dei dati da espandere o dall'identificatore di una variabile contenente questa struttura di dati.

const myArray = [ 1, 2, 3 ];

console.log( ...myArray );
> 1 2 3

La sintassi di diffusione viene utilizzata principalmente per copiare e combinare matrici:

const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];

mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

Puoi utilizzare la sintassi diffusa solo nei seguenti contesti:

Per array e stringhe, la sintassi differenziata si applica solo quando sono previsti zero o più argomenti in una chiamata di funzione o negli elementi di un array. Il primo esempio di sintassi degli operatori spread in questa sezione funziona perché passa ...myArray come argomento al metodo console.log integrato.

Ad esempio, non puoi assegnare i dati distribuiti a una variabile esterna a un altro array:

const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'

Tuttavia, copi un array distribuendo l'array originale in un valore letterale array:

const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];

spreadArray;
> Array(3) [ 1, 2, 3 ]

Per unire gli elementi che compongono due o più array in un unico array:

const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];

myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

In alternativa, per passare elementi di un array come singoli argomenti in una chiamata di funzione:

const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
    console.log( myArgument, mySecondArgument );
};

myFunction( ...myArray );
> true false

L'operatore di diffusione è stato ampliato per funzionare con i valori letterali oggetto in ES2018. Come per gli array, puoi utilizzare l'operatore di diffusione per duplicare o unire gli oggetti:

const myObj = { myProperty : true };
const mySecondObj = { ...myObj };

mySecondObj;
> Object { myProperty: true }

const myFirstObj = { myProperty : true };
const mySecondObj = { additionalProperty : true };
const myMergedObj = { ...myFirstObj, ...mySecondObj };

myMergedObj;
> Object { myProperty: true, additionalProperty: true }

L'operatore di diffusione crea copie "shallow". Ciò significa che non copia il prototipo e le proprietà non enumerabili dell'oggetto originale.

const myCustomPrototype = { protoProp: "My prototype." };
const myObj = Object.create( myCustomPrototype, {
    myEnumerableProp: {
        value: true,
        enumerable: true
    },
    myNonEnumerableProp: {
        value: false,
        enumerable: false
    }
});
const myNewObj = { ...myObj };

myObj;
> Object { myEnumerableProp: true, … }
    myEnumerableProp: true
    myNonEnumerableProp: false
    <prototype>: Object { protoProp: "My prototype." }

myNewObj;
> Object { myEnumerableProp: true }
    myEnumerableProp: true
    <prototype>: Object { … }

Tieni presente che gli array e gli oggetti non possono essere utilizzati in modo intercambiabile. Non puoi diffondere un oggetto in un array o un array in un oggetto.

Operatore REST

Sebbene la sintassi dell'operatore stesso sia la stessa, l'operatore resto (...) esegue la funzione opposta in base al contesto in cui viene utilizzato. Invece di espandere una struttura di dati iterabile in singoli elementi, come avviene nell'assegnazione distruttiva o come parametro di funzione, l'operatore rimanente combina gli elementi in una struttura di dati iterabile. Il nome deriva dal fatto che è utilizzato per raccogliere il resto di un insieme di valori.

Quando utilizzata con assegnazioni destrutturate, la sintassi è chiamata sintassi "proprietà rest".

const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];

[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;

myFirstElement;
> "First"

mySecondElement;
> "Second"

remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]

Quando utilizzata per fornire un numero indefinito di argomenti per una funzione, la sintassi è denominata "parametro rest":

function myFunction( ...myParameters ) {
    let result = 0;
    myParameters.forEach( ( myParam ) => {
        result += myParam;
    });
    return result;
};

myFunction( 2, 2 );
> 4

myFunction( 1, 1, 1, 10, 5 );
> 18

myFunction( 10, 11, 25 );
> 46

%TypedArray%

Gli array digitati sono una funzionalità ES6 progettata per archiviare dati binari strutturati, ad esempio quando si lavora con file caricati o WebGL.

Come per i simboli, la funzione intrinseca %TypedArray% (solitamente documentata come %TypedArray% o @@TypedArray quindi non può essere scambiata per una proprietà globale) non è una funzione del costruttore nel senso convenzionale e non può essere chiamata con new o direttamente. %TypedArray% si riferisce invece a una superclasse padre di singoli costruttori, ognuno dei quali funziona con uno specifico formato di dati binari. La superclasse intrinseca %TypedArray% fornisce proprietà e metodi di utilità che tutte le sottoclassi del costruttore %TypedArray% e le relative istanze ereditano.

Verifica le tue conoscenze