3 cose che non sai su array di JavaScript

Gli array sono una caratteristica ampiamente utilizzata dei linguaggi di programmazione; sono variabili speciali che possono essere utilizzate per memorizzare più valori allo stesso tempo. Tuttavia, quando si tratta di JavaScript, per quanto sia facile da 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 alle matrici

Se doveste setacciare Internet alla ricerca di una definizione completa di array di JavaScript, troverete che quasi ogni sorgente senza errori elencherà array come ciò che è realmente, un oggetto .

In effetti, quasi tutto ciò che trattiamo in JavaScript si rivelerà essere un oggetto . Esistono due tipi di tipi di dati in JavaScript, primitive e oggetti, ma le primitive sono sempre racchiuse negli oggetti .

Array, Function, Date, ecc. Sono oggetti JavaScript predefiniti che hanno metodi incorporati, proprietà e la loro sintassi standardizzata.

Gli array JavaScript possono avere tre diversi tipi di proprietà :

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

I primi due sono più noti, è possibile utilizzarli tutti i giorni, ma vediamoli rapidamente prima di passare a come è possibile aggiungere la propria proprietà personalizzata a un array.

Indici come proprietà

Gli array JavaScript usano la sintassi della parentesi quadre, come var ary = ["orange", "apple", "lychee"]; .

Gli indici degli elementi dell'array sono fondamentalmente proprietà in cui i nomi delle proprietà sono sempre interi non negativi .

La coppia indice-elemento di un array è simile alla coppia chiave-valore di un oggetto.

Gli indici sono una caratteristica unica dell'oggetto Array e, a differenza delle altre proprietà built-in, possono essere impostati con la sola sintassi delle parentesi, come ad esempio ary[3] = "peach"; .

Proprietà incorporate

Gli array hanno anche proprietà built-in, come array.length . La proprietà length contiene un valore intero che indica la lunghezza di un array .

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

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

Creare proprietà personalizzate per l'oggetto matrice

Ora parliamo di aggiungere le tue 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 usare un oggetto normale per il tuo scopo . Ma questo non significa che non ci siano casi speciali in cui è possibile fare uso del fatto che un array è un oggetto, aggiungendo ad esso una o più proprietà personalizzate.

Ad esempio, puoi aggiungere una proprietà personalizzata a una matrice che identifica il "tipo" o la "classe" dei suoi elementi, come puoi vedere nell'esempio seguente.

 var ary = ["orange", "apple", "lychee"]; ary.itemClass = "frutti"; console.log (ary + "sono" + 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 cicli come l'istruzione for…in .

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, poiché ciò che effettivamente passiamo attraverso è l' indice dell'array .

Poiché gli indici di array sono costituiti solo da numeri interi non negativi, iteriamo un valore intero che inizia tipicamente da zero e termina sull'intera lunghezza dell'array, quindi utilizziamo il valore iterato per accedere all'elemento array in un determinato indice.

Tuttavia, poiché ECMAScript6, esiste un modo per eseguire il looping diretto dei valori dell'array senza preoccuparsi degli indici, e ciò può essere fatto usando il ciclo for…of ciclo for…of .

In un array, il ciclo for...of ciclo passerà attraverso gli elementi dell'array nell'ordine degli indici, in altre parole si prenderà cura di iterare sugli indici e ottenere un valore di array esistente in un determinato 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 ciclo regolare for, 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 della lunghezza di un array, pensiamo che sia il numero di valore di un array o la lunghezza che abbiamo assegnato all'array manualmente. Tuttavia, in realtà, la lunghezza di un array dipende dal più grande indice esistente al suo interno.

La lunghezza è una 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, quindi la tua ipotesi è errata . Non ci sono realmente indici esistenti da 0 a 4 in quella matrice. Puoi verificarlo usando l'operatore in.

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

La matrice è ciò che chiamiamo una matrice "sparsa", una matrice in cui gli indici non vengono creati continuamente e presentano lacune . L'opposto di una matrice "sparsa" è la matrice "densa" in cui gli indici esistono continuamente nella matrice e il numero di elementi è uguale alla length .

La proprietà length è anche in grado di troncare un array, assicurandosi che l'indice più alto presente nell'array sia sempre inferiore a se stesso, poiché la length è sempre numericamente maggiore dell'indice più alto per impostazione predefinita.

Nell'esempio seguente, puoi vedere come perdiamo l'elemento nell'indice 5 diminuendo la length dell'array ary .

 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

21 mockup di biglietti da visita ad alta risoluzione gratuiti

Il biglietto da visita è uno dei modi migliori per lasciare un'impressione con un nuovo cliente o datore di lavoro. Ma nel mondo digitale il biglietto da visita fisico non è qualcosa che puoi semplicemente consegnare. È qui che entrano modelli di biglietti da visita come quelli mostrati in questo post.Qu

(Consigli tecnici e di design)

Perché hai bisogno di sniffer di codice per lo sviluppo Web

L'ottimizzazione del codice è paragonabile alla fase di modifica di una scrittura. Potresti aver bisogno di inserire le tue idee in codice, ma il tuo codice dovrebbe essere ottimizzato con strumenti come gli sniffer di codice per produrre il miglior prodotto possibile.Code sniffing è un termine che descrive il codice di controllo per la conformità con gli standard normativi . Q

(Consigli tecnici e di design)