3 cose che non sai su array di JavaScript

Array sono una caratteristica ampiamente utilizzata dei linguaggi di programmazione; loro sono variabili speciali che può essere usato per memorizzare più valori allo stesso tempo. Tuttavia, quando si tratta di JavaScript, facile quanto imparare, c'è sempre altro da esplorare.

In questo post, daremo un'occhiata a tre funzionalità meno note ma importanti degli array JavaScript che potreste non aver conosciuto prima.

1. Aggiungi proprietà personalizzate agli array

Se doveste setacciare Internet alla ricerca di una definizione completa di array JavaScript, scoprirete che quasi tutte le sorgenti senza errori elencheranno array come ciò che veramente è, un oggetto.

In effetti, quasi tutto ciò di cui ci occuperemo in JavaScript lo farà si rivela essere un oggetto. Esistono due tipi di tipi di dati in JavaScript, primitivi e oggetti, ma i primitivi sono sempre racchiusi negli oggetti.

Array, funzione, data, ecc oggetti JavaScript predefiniti che hanno metodi incorporati, proprietà e la propria sintassi standardizzata.

Array JavaScript possono avere tre diversi tipi di proprietà:

1. Indici di un array sono anche proprietà
2. Proprietà incorporate
3. Proprietà personalizzate puoi aggiungere da solo

I primi due sono più noti, puoi usarli tutti i giorni, ma vediamoli rapidamente prima di passare a come puoi aggiungere la tua proprietà personalizzata a un array.

Indici come proprietà

Gli array JavaScript usano il sintassi quadrata, ad esempio var ary = ["orange", "apple", "lychee"];.

Gli indici degli elementi dell'array sono fondamentalmente proprietà dove il nomi di proprietà siamo numeri interi sempre non negativi.

Il coppia indice-elemento di un array è simile al coppia chiave-valore di un oggetto.

Gli indici sono una caratteristica unica dell'oggetto Array e, a differenza delle altre proprietà incorporate, possono essere impostato con la sintassi delle parentesi da solo, ad esempio ary [3] = "pesca";.

Proprietà incorporate

Array hanno anche proprietà incorporate, ad esempio Array.length. Il lunghezza la proprietà ha un valore intero denota la lunghezza di un array.

In generale, le proprietà integrate possono essere trovate frequentemente in oggetti JavaScript predefiniti come gli array. Insieme ai metodi integrati, aiutano personalizzare gli oggetti generici in modo che gli oggetti siano adatti a esigenze diverse.

È possibile accedere alle proprietà integrate con il object.key o il object [ "chiave"] sintassi. Quindi puoi anche scrivere ary [ "lunghezza"] per accedere alla lunghezza di un array.

Creare proprietà personalizzate per l'oggetto matrice

Adesso parliamo aggiungendo le proprie proprietà agli array. Le matrici sono oggetti predefiniti che memorizzano diversi tipi di valori in diversi indici.

Di solito non c'è molto bisogno di aggiungere proprietà personalizzate a un array; questo è uno dei motivi per cui ai principianti di solito non viene insegnata questa funzione. Infatti, se vuoi trattare un array come un oggetto normale aggiungendo coppie chiave-valore, potresti anche farlo usa un oggetto normale per il tuo scopo. Ma questo non significa che non ci siano casi speciali dove puoi fare uso del fatto che un array è un oggetto, aggiungendo ad esso una o più proprietà personalizzate.

Ad esempio, è possibile aggiungere una proprietà personalizzata a un array identifica il "tipo" o la "classe" dei suoi elementi, come puoi vederlo nell'esempio qui sotto.

 var ary = ["orange", "apple", "lychee"]; ary.itemClass = "frutti"; console.log (ary + "are" + ary.itemClass); // "arancia, mela, litchi sono frutti" 

Si noti che la proprietà personalizzata che si aggiunge a un array è enumerabile, il che significa che verrà raccolto da loop come il per ... in dichiarazione.

2. Passa attraverso gli elementi dell'array

Probabilmente dici "Lo so già", che è probabilmente vero, sai già come passare attraverso gli elementi dell'array. Ma è anche vero che dire "loop through array elements" è un po 'astratto, in quanto ciò che effettivamente passiamo attraverso è il indici dell'array.

Poiché gli indici di array sono composti solo da numeri interi non negativi, itiamo un valore intero che inizia tipicamente da zero e termina con l'intera lunghezza dell'array, quindi usa quel valore iterato per accedere all'elemento array ad un dato indice.

Tuttavia dal momento che ECMAScript6, c'è un modo per passa direttamente attraverso i valori dell'array senza preoccuparsi degli indici, e ciò può essere fatto usando il per ... di ciclo continuo.

In un array, il per ... di loop passerà attraverso gli elementi dell'array nell'ordine degli indici, in altre parole si prenderà cura di iterare sugli indici e ottenere un valore dell'array esistente ad un dato indice. Questo ciclo è l'ideale se si desidera eseguire il ciclo di tutti gli elementi dell'array e lavorare con essi.

 var ary = ["orange", "apple", "lychee"]; for (let item of ary) console.log (item);  // "orange", "apple", "lychee" 

Per confronto, con il normale per loop, otteniamo gli indici invece dei valori come output.

 var ary = ["orange", "apple", "lychee"]; for (var item = 0; item < ary.length; item++) console.log(item);  // 0, 1, 2

3. Il numero di elementi non è la sua lunghezza

In genere, quando parliamo di lunghezza di un array, pensiamo che sia il numero di valore di un array, o la lunghezza che abbiamo dato all'array manualmente. Tuttavia, in realtà, la lunghezza di un array dipende da il più grande indice esistente dentro di esso.

La lunghezza è a proprietà molto flessibile. Se hai già corretto la lunghezza di un array in anticipo o meno, se continui ad aggiungere valori all'array, la sua lunghezza continua ad aumentare di conseguenza.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6

Nell'esempio sopra, puoi vedere che ho dato all'array un solo valore nell'indice 5, e la lunghezza diventa 6. Ora, se pensi che aggiungendo un valore nell'indice 5, l'array ha creato automaticamente gli indici da 0 a 4 , poi la tua ipotesi è errata. Ci sono davvero nessun indice esistente da 0 a 4 in quella matrice. Puoi controllare questo usando il nel operatore.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 console.log (0 in ary); // falso

L'array ary è ciò che chiamiamo a array "sparse", un array dove gli indici non sono creati continuamente, e avere lacune. L'opposto di una matrice "sparsa" è il array "denso" dove gli indici esistono continuamente nella matrice e il numero di elementi è lo stesso di lunghezza.

Il lunghezza proprietà è anche in grado di troncare un array, assicurandosi che l'indice più alto presente nell'array sia sempre meno di se stesso, come lunghezza è sempre numericamente maggiore dell'indice più alto per impostazione predefinita.

Nell'esempio seguente, puoi vedere come perdiamo l'elemento all'indice 5 diminuendo il valore lunghezza del ary schieramento.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 ary.length = 2; console.log (ary.length); // 2 console.log (ary [5]); // non definito

Ulteriori letture

• 10 termini JavaScript che dovresti conoscere ormai
• 4 dichiarazioni Javascript non comuni ma utili che dovresti sapere
• Ottimizzazione del codice con JS Hint - uno strumento per linting Javascript