Raccolte indicizzate

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

Array

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

Crea un array

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

La sintassi dei valori letterali array utilizza un insieme di parentesi ([]) che circondano 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 con la parola chiave new:

const myArray = new Array();

Sia la sintassi dei valori letterali dell'array che la sintassi dei costruttori dell'array consentono di compilare un array con informazioni al momento della creazione, sebbene le sintassi siano leggermente diverse da quelle vengono definiti. La sintassi dei valori letterali array utilizza valori separati da virgole tra parentesi quadre, 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 prende come argomenti valori separati da virgole, con eccezione comportamentale speciale:

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

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

Quando al costruttore Array viene passato un singolo valore numerico, tale valore non viene assegnata alla posizione zero nell'array risultante. Invece, un array viene creato con il numero di aree vuote per i valori. Ciò non impone alcun limitazioni all'array. Gli elementi possono essere aggiunti e rimossi nello stesso modo. come nel caso di un valore letterale di 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 contenenti slot vuoti (a volte chiamati "matrici sparse") sono speciali d'uso diversi. Anziché contenere un valore undefined o null in modo esplicito, vuoto gli slot vengono spesso, ma non sempre, trattati come valori undefined altrove in lingua.

Puoi creare accidentalmente un array sparso utilizzando la sintassi letterale dell'array omissione di un valore tra le virgole quando crei un valore letterale di array:

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

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

Nonostante non venga considerato un valore significativo in tutti i contesti, uno spazio vuoto viene preso in considerazione nella lunghezza totale dell'array, generando potenzialmente risultati imprevisti durante l'iterazione oltre i 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 blocco di alcune delle prime decisioni di progettazione di JavaScript. Evita di utilizzare array sparsi in uno sviluppo moderno.

Come per le primitive, un valore letterale array eredita proprietà e metodi dal costruttore corrispondente. Poiché un array è una forma speciale di oggetto, la sintassi letterale dell'array e La sintassi new Array() genera risultati funzionalmente identici: un oggetto che eredita il 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 dei valori letterali dell'array è più concisa e letterale, consigliamo vivamente di utilizzare sempre la sintassi del valore letterale dell'array anziché Sintassi new Array().

Accedi ai valori degli array

Puoi accedere ai singoli elementi all'interno dell'array utilizzando la notazione parentesi quadra, un insieme di parentesi ([]) dopo l'array o il relativo identificatore che contiene 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, il che significa che non puoi usare una stringa arbitraria come indice. Tuttavia, il valore numerico valori utilizzati per accedere agli elementi in un array sono costretti a un valore di stringa dietro le scene, vale a dire che è possibile usare un valore stringa contenente solo caratteri:

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

myArray[ 2 ];
> true

myArray[ "2" ];
> true

Se provi ad accedere a un elemento esterno a quelli definiti nell'array, undefined, non è un errore:

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

myArray[ 9 ];
> undefined

Destrutturazione del compito

La destrutturazione dell'assegnazione è un modo conciso per estrarre un intervallo di valori o oggetti e assegnandoli a un insieme una procedura chiamata a volte "unpacking" la struttura originale dei dati, senza modificare l'array o l'oggetto originale.

La distruzione dell’assegnazione utilizza un elenco di identificatori di tipo array o oggetto per tenere traccia dei valori. Nella sua forma più semplice, chiamata binding pattern. destrutturante, ogni valore viene estratto dall'array o dall'oggetto e assegnato a un 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. Ciascuna identificatore nell'assegnazione destrutturante corrisponde all'elemento del 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 destruttura un oggetto. Tuttavia, se utilizzati nell'assegnazione destrutturante corrispondono alle chiavi del modello proprietà, questi identificatori vengono compilati con la proprietà corrispondente a prescindere 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 destrutturazione della sintassi consente anche di assegnare valori predefiniti nel caso in cui una struttura è uno spazio vuoto, come nel caso di un array sparsa, oppure Valore undefined.

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

firstValue;
> true

secondValue;
> "Default string."

La decostruzione non forza i valori a tipi particolari. Ciò significa che Valori "falsy", ad esempio vuoto stringhe ("") o null, sono comunque considerate 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 distribuzione

Utilizza l'operatore di distribuzione (...), introdotto in ES6 per espandere un dati iterabile come un array, una stringa o un oggetto letterale in singoli elementi. L'operatore distribuito è immediatamente seguito dalla struttura dei dati da espandere o l'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 array:

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

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

Puoi utilizzare la sintassi distribuita solo nei seguenti contesti:

Per array e stringhe, la sintassi di diffusione si applica solo dove zero o più argomenti in una chiamata di funzione o gli elementi di un array. Il primo esempio la sintassi dell'operatore di diffusione in questa sezione funziona perché trasmette ...myArray come un argomento al metodo console.log integrato.

Ad esempio, non puoi assegnare i dati distribuiti a una variabile esterna con 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 dell'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 ]

Oppure per passare gli 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 distribuzione è stato ampliato per lavorare con i valori letterali degli oggetti in ES2018. Come per gli array, puoi utilizzare l'operatore di diffusione per duplicare o unire 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 "shallow" copie. Ciò significa che non vengono copiati prototipo dell'oggetto originale e non enumerabile proprietà.

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 array e oggetti non possono essere utilizzati in modo intercambiabile. Non puoi distribuire 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 è utilizzata. Invece di espandere una struttura di dati iterabile in singoli elementi, come avviene per destrutturare un compito o come parametro di funzione, l'operatore rimanente combina in una struttura di dati iterabile. Il nome deriva dal fatto che si tratta di utilizzato per raccogliere "il resto" di un insieme di valori di dati.

Quando viene utilizzata con un'assegnazione destrutturante, la sintassi è denominata "proprietà REST" a riga di comando.

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

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

myFirstElement;
> "First"

mySecondElement;
> "Second"

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

Quando utilizzato per fornire un numero indefinito di argomenti a una funzione, la sintassi è chiamata "parametro resto" sintassi:

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à di ES6 progettata per archiviare dati binari strutturati, per ad esempio quando lavori con i file caricati WebGL.

Come per i simboli, %TypedArray% funzione intrinseca (generalmente documentata come %TypedArray% o @@TypedArray pertanto non può essere scambiata per una proprietà globale) non è una funzione costruttore in vale a dire convenzionale e non è possibile richiamarlo con new o chiamarlo direttamente. %TypedArray% si riferisce invece a una superclasse principale di un individuo ognuno dei quali funziona con uno specifico formato di dati binari. La la superclasse %TypedArray% intrinseca fornisce proprietà e metodi di utilità che tutte le sottoclassi del costruttore %TypedArray% e le relative istanze ereditano.

Verifica le tue conoscenze