• Traduzione

La maggior parte delle applicazioni sviluppate oggi ha bisogno di interagire con un qualche tipo di set di dati. La gestione degli elementi nelle raccolte è un'operazione comune che potresti aver riscontrato. Quando si lavora, ad esempio, con gli array, è possibile, senza esitazione, utilizzare il solito ciclo for, che assomiglia a questo: for (var i = 0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Supponiamo di dover visualizzare un elenco di prodotti e, se necessario, dividerlo in categorie, filtrarlo, cercarlo, modificare questo elenco oi suoi elementi. Potrebbe essere necessario eseguire rapidamente alcuni calcoli che coinvolgono gli elementi dell'elenco. Diciamo che devi aggiungere qualcosa a qualcosa, moltiplicare qualcosa per qualcosa. Riesci a trovare strumenti in JavaScript che rendono più veloce e più conveniente risolvere tali problemi rispetto all'utilizzo di un normale ciclo for?

In effetti, JavaScript fornisce tali servizi. Alcuni di essi sono discussi nel materiale, la cui traduzione presentiamo oggi alla vostra attenzione. In particolare, stiamo parlando dell'operatore di estensione, del ciclo for ... of e dei metodi include(), some(), every(), filter(), map() e reduce(). Qui parleremo principalmente di array, ma le tecniche qui discusse sono generalmente adatte per lavorare con altri tipi di oggetti.

Va notato che le panoramiche dei moderni approcci allo sviluppo in JS di solito includono esempi preparati utilizzando le funzioni freccia. Forse non li usi molto spesso, forse perché non ti piacciono, forse perché non vuoi passare troppo tempo a imparare qualcosa di nuovo, o forse semplicemente non funzionano per te. Pertanto, qui, nella maggior parte delle situazioni, verranno mostrate due opzioni per eseguire le stesse azioni: utilizzando le funzioni ordinarie (ES5) e utilizzando le funzioni freccia (ES6). Per coloro che non conoscono le funzioni freccia, si noti che le funzioni freccia non sono equivalenti alle dichiarazioni di funzione e alle espressioni di funzione. Non vale la pena sostituire l'uno con l'altro. In particolare, ciò è dovuto al fatto che la parola chiave this si comporta in modo diverso nelle funzioni ordinarie e freccia.

1. Operatore di espansione

L'operatore spread consente di "espandere" gli array sostituendo i loro elementi invece degli array nel luogo in cui viene utilizzato questo operatore. Un approccio simile è stato proposto per i letterali oggetto.

▍ Punti di forza dell'operatore di diffusione

• Questo è un modo semplice e veloce per "estrarre" i suoi singoli elementi da un array.
• Questo operatore è adatto per lavorare con array e letterali oggetto.
• È un metodo veloce e intuitivo per lavorare con gli argomenti delle funzioni.
• L'operatore di diffusione non occupa molto spazio nel codice: ha l'aspetto di tre punti (...).

Esempio

Supponiamo che tu abbia il compito di elencare le tue prelibatezze preferite senza utilizzare un ciclo. Con l'operatore di diffusione, questo viene fatto in questo modo:

2. Il for... del ciclo

L'istruzione for... of è destinata all'attraversamento di oggetti iterabili. Dà accesso ai singoli elementi di tali oggetti (in particolare, agli elementi degli array), che, ad esempio, consente loro di essere modificati. Può essere considerato un sostituto del normale ciclo for.

▍Punti di forza del for... del ciclo

• Questo è un modo semplice per aggiungere o aggiornare gli elementi della raccolta.
• Il ciclo for... of consente di eseguire vari calcoli utilizzando elementi (addizione, moltiplicazione e così via).
• È conveniente usarlo quando è necessario verificare qualsiasi condizione.
• Usarlo porta a un codice più pulito e leggibile.

Esempio

Supponiamo di avere una struttura dati che descrive il contenuto di una cassetta degli attrezzi e di voler visualizzare quegli strumenti. Ecco come farlo con un ciclo for ... of:

3. Il metodo include()

Il metodo include() viene utilizzato per verificare la presenza di un determinato elemento nella raccolta, in particolare, ad esempio, una determinata stringa in un array contenente stringhe. Questo metodo restituisce true o false a seconda dei risultati del controllo. Quando lo si utilizza, è necessario tenere presente che fa distinzione tra maiuscole e minuscole. Se, ad esempio, la raccolta ha un elemento stringa SCUOLA e il controllo della sua presenza utilizzando include () viene eseguito sulla stringa scuola, il metodo restituirà false.

▍ Punti di forza del metodo include ()

• Il metodo include() è utile per creare semplici meccanismi di recupero dati.
• Offre allo sviluppatore un modo intuitivo per determinare se alcuni dati si trovano in un array.
• È conveniente utilizzarlo in espressioni condizionali per modificare, filtrare elementi e per eseguire altre operazioni.
• Il suo utilizzo porta a una migliore leggibilità del codice.

Esempio

Supponi di avere un garage rappresentato da un array con un elenco di auto e non sai se c'è una certa auto in questo garage o no. Per risolvere questo problema è necessario scrivere un codice che permetta di verificare la presenza di un'auto in garage. Usiamo il metodo include():

4. Il metodo some()

Il metodo some() ti consente di verificare se alcuni degli elementi che stai cercando esistono nell'array. Esso, in base ai risultati del controllo, restituisce vero o falso. È simile al metodo include() sopra, tranne per il fatto che il suo argomento è una funzione e non, ad esempio, una stringa normale.

▍Alcuni () punti di forza del metodo

• Il metodo some() permette di verificare se l'array contiene almeno uno degli elementi di interesse.
• Controlla la condizione usando la funzione che gli è passata.
• Questo metodo è comodo da usare.

Esempio

Supponi di essere il proprietario di un club e, in generale, non sei interessato a chi viene esattamente al tuo club. Tuttavia, alcuni visitatori non possono entrare nel club, poiché sono inclini a un consumo eccessivo di bevande alcoliche, almeno se si trovano da soli nel tuo locale e non c'è nessuno con loro che si prenda cura di loro. In questo caso, un gruppo di visitatori può entrare nel locale solo se almeno uno di loro ha almeno 18 anni. Per automatizzare questo tipo di controllo, utilizzeremo il metodo some(). Di seguito, la sua applicazione è dimostrata in due versioni.

ES5

ES6

5. Il metodo ogni ()

Il metodo Every() esplora l'array e controlla ciascuno dei suoi elementi rispetto a una determinata condizione, restituendo true se tutti gli elementi dell'array soddisfano la condizione e false in caso contrario. Noterai che è simile al metodo some().

▍ Punti di forza del metodo every()

• Il metodo every() consente di verificare se tutti gli elementi di un array corrispondono a una condizione.
• Le condizioni possono essere impostate utilizzando le funzioni.
• Promuove un approccio di programmazione dichiarativa.

Esempio

Torniamo all'esempio precedente. Lì hai permesso ai visitatori di età inferiore ai 18 anni di entrare nel club, ma qualcuno ha scritto una dichiarazione alla polizia, dopo di che ti sei trovato in una situazione spiacevole. Dopo che tutto è stato sistemato, hai deciso che non avevi bisogno di tutto questo e hai inasprito le regole per visitare il club. Ora un gruppo di visitatori può entrare nel club solo se l'età di ogni membro del gruppo è di almeno 18 anni. Come l'ultima volta, considereremo la soluzione al problema in due versioni, ma questa volta utilizzeremo il metodo every().

ES5

ES6

6. Il metodo filter()

Il metodo filter() consente di creare, in base a un determinato array, un nuovo array contenente solo quegli elementi dell'array originale che soddisfano la condizione specificata.

▍ Punti di forza del metodo del filtro ()

• Il metodo filter() evita di modificare l'array originale.
• Ti permette di sbarazzarti di elementi non necessari.
• Migliora la leggibilità del tuo codice.

Esempio

Supponiamo di dover selezionare dall'elenco dei prezzi solo quelli maggiori o uguali a 30. Usiamo il metodo filter() per risolvere questo problema.

ES5

ES6

7. Il metodo map()

Il metodo map() è simile al metodo filter() in quanto restituisce anche un nuovo array. Tuttavia, viene utilizzato per modificare gli elementi dell'array originale.

I punti di forza del metodo map()

• Il metodo map() evita la necessità di modificare gli elementi dell'array originale.
• È conveniente modificare gli elementi dell'array con il suo aiuto.
• Migliora la leggibilità del tuo codice.

Esempio

Supponiamo di avere un elenco di prodotti con i prezzi. Il tuo manager ha bisogno di un nuovo elenco di prodotti con prezzi ridotti del 25%. Usiamo il metodo map() per risolvere questo problema.

ES5

ES6

8. metodo reduce()

Il metodo reduce(), nella sua forma più semplice, permette di sommare gli elementi di array numerici. In altre parole, converte l'array in un singolo valore. Ciò consente di utilizzarlo per eseguire vari calcoli.

I punti di forza del metodo reduce()

• Il metodo reduce() può essere utilizzato per calcolare la somma o la media degli elementi in un array.
• Questo metodo velocizza e semplifica i calcoli.

Esempio

Supponiamo che tu debba calcolare le tue spese per la settimana, che sono memorizzate in un array. Risolviamo questo problema usando il metodo reduce().

ES5

ES6

Aggiungi i tag

matrici

Vettoreè una raccolta ordinata di valori. I valori in un array sono chiamati elementi e ogni elemento è caratterizzato da una posizione numerica nell'array, che è chiamato indice. Gli array in JavaScript non sono tipizzati: gli elementi di un array possono essere di qualsiasi tipo e diversi elementi dello stesso array possono essere di tipi diversi. Gli elementi dell'array possono anche essere oggetti o altri array, consentendo di creare strutture dati complesse come array di oggetti e array di array.

Gli indici di array in JavaScript sono a base zero e utilizzano interi a 32 bit: il primo elemento di un array ha l'indice 0. Gli array JavaScript sono dinamici: possono crescere e rimpicciolirsi secondo necessità; non è necessario dichiarare dimensioni fisse degli array quando vengono creati o riallocare la memoria quando vengono ridimensionati.

Gli array in JavaScript sono una forma specializzata di oggetti e gli indici di array significano poco più che semplici nomi di proprietà, che casualmente sono numeri interi.

Creazione di array

Il modo più semplice per creare un array è con un letterale, che è un semplice elenco separato da virgole di elementi dell'array tra parentesi quadre. I valori in un letterale array non devono essere costanti: possono essere qualsiasi espressione, inclusi i letterali oggetto:

Var vuoto =; // Numeri var array vuoti =; // Array con cinque elementi numerici var misc = [1.1, true, "a",]; // 3 elementi di tipo diverso + virgola finale var base = 1024; tabella var =; // Array con variabili var arrObj = [,]; // 2 array all'interno contenenti oggetti

La sintassi letterale dell'array consente di inserire una virgola finale facoltativa, ad es. letterale [,] corrisponde a un array con due elementi, non tre.

Un altro modo per creare un array è chiamare il costruttore Vettore ()... Il costruttore può essere chiamato in tre modi diversi:

Chiama il costruttore senza argomenti:

Var arr = new Array ();

In questo caso, verrà creato un array vuoto equivalente al letterale.

Chiama il costruttore con un singolo argomento numerico che specifica la lunghezza dell'array:

Var arr = nuovo Array (10);

In questo caso verrà creato un array vuoto della lunghezza specificata. Questa forma di chiamata al costruttore Array() può essere utilizzata per preallocare la memoria per un array se il numero dei suoi elementi è noto in anticipo. Si noti che questo non memorizza alcun valore nell'array.

Specificare esplicitamente i valori dei primi due o più elementi dell'array o di un elemento non numerico in una chiamata del costruttore:

Var arr = nuovo Array (5, 4, 3, 2, 1, "test");

In questo caso, gli argomenti al costruttore diventano i valori degli elementi del nuovo array. L'uso dei valori letterali dell'array è quasi sempre più semplice rispetto all'utilizzo del costruttore Array() in questo modo.

Lettura e scrittura di elementi di array

È possibile accedere agli elementi dell'array utilizzando l'operatore. Ci deve essere un riferimento all'array a sinistra delle parentesi. Un'espressione arbitraria che restituisce un valore intero non negativo deve essere tra parentesi. Questa sintassi è adatta sia per leggere che per scrivere il valore di un elemento dell'array. Pertanto, tutte le seguenti istruzioni JavaScript sono valide:

// Crea un array con un elemento var arr = ["mondo"]; // Legge l'elemento 0 var value = arr; // Scrive il valore nell'elemento 1 arr = 3.14; // Scrive un valore nell'elemento 2 i = 2; arr[i] = 3; // Scrive un valore nell'elemento 3 arr = "ciao"; // Legge gli elementi 0 e 2, scrivi il valore nell'elemento 3 arr] = arr;

Permettetemi di ricordarvi che gli array sono un tipo specializzato di oggetti. Le parentesi quadre utilizzate per accedere agli elementi dell'array agiscono esattamente come le parentesi quadre utilizzate per accedere alle proprietà di un oggetto. L'interprete JavaScript converte gli indici numerici tra parentesi in stringhe - l'indice 1 diventa la stringa "1" - e quindi utilizza le stringhe come nomi di proprietà.

Non c'è niente di speciale nel convertire indici numerici in stringhe: lo stesso può essere fatto con oggetti normali:

Var obj = (); // Crea un oggetto semplice obj = "uno"; // Indicizzalo con numeri interi

La particolarità degli array è che quando si utilizzano nomi di proprietà che sono interi non negativi, gli array determinano automaticamente il valore della proprietà lunghezza... Ad esempio, l'array arr sopra è stato creato con un singolo elemento. Quindi, i valori sono stati assegnati ai suoi elementi con gli indici 1, 2 e 3. Come risultato di queste operazioni, il valore della proprietà length dell'array è cambiato ed è diventato uguale a 4.

È necessario distinguere chiaramente tra gli indici in un array e i nomi delle proprietà degli oggetti. Tutti gli indici sono nomi di proprietà, ma solo le proprietà con nomi interi sono indici. Tutti gli array sono oggetti e puoi aggiungere loro proprietà con qualsiasi nome. Tuttavia, se si influenzano proprietà che sono indici di array, gli array reagiscono aggiornando il valore della proprietà length secondo necessità.

Si noti che come indici di array sono consentiti valori negativi e non interi. In questo caso, i numeri vengono convertiti in stringhe, che vengono utilizzate come nomi di proprietà.

Aggiunta e rimozione di elementi dell'array

Abbiamo già visto che il modo più semplice per aggiungere elementi a un array è assegnare valori a nuovi indici. Puoi anche usare il metodo per aggiungere uno o più elementi alla fine di un array spingere ():

Var arr =; // Crea un array vuoto arr.push ("zero"); // Aggiunge un valore alla fine arr.push ("uno", 2); // Aggiungi altri due valori

Puoi anche aggiungere un elemento alla fine di un array assegnando un valore all'elemento arr. Per inserire un elemento all'inizio di un array, puoi usare il metodo unshift () e gli elementi esistenti nell'array vengono spostati sugli indici più alti.

Puoi eliminare gli elementi di un array usando l'operatore delete, come le normali proprietà degli oggetti:

Var arr =; elimina arr; 2 in ar; // false, l'indice 2 nell'array non è definito arr.length; // 3: l'operatore delete non cambia la proprietà length dell'array

La rimozione di un elemento è simile (ma leggermente diversa) assegnando un valore indefinito a quell'elemento. Si noti che l'applicazione dell'operatore delete a un elemento in un array non modifica il valore della proprietà length, né sposta verso il basso gli elementi con indici più alti per riempire il vuoto lasciato dopo che l'elemento è stato eliminato.

Inoltre, è possibile rimuovere elementi alla fine di un array semplicemente assegnando un nuovo valore alla proprietà length. Gli array hanno un metodo pop ()(opposto al metodo push()), che riduce la lunghezza dell'array di 1 e restituisce il valore dell'elemento rimosso. C'è anche un metodo cambio ()(l'opposto di unshift()), che rimuove l'elemento all'inizio dell'array. A differenza dell'operatore delete, il metodo shift() sposta tutti gli elementi in basso di una posizione al di sotto dei loro indici correnti.

Finalmente c'è un metodo multiuso giunzione (), che consente di inserire, eliminare e sostituire elementi di array. Modifica il valore della proprietà length e sposta gli elementi dell'array con indici inferiori o superiori secondo necessità. Discuteremo tutti questi metodi un po 'più tardi.

Matrici multidimensionali

JavaScript non supporta array multidimensionali "reali", ma fa un buon lavoro nel imitarli usando array da array. Per accedere a un dato in un array di array è sufficiente utilizzare l'operatore due volte.

Ad esempio, supponiamo che la matrice variabile sia una matrice di matrici di numeri. Ogni elemento della matrice [x] è un array di numeri. È possibile utilizzare la matrice di espressioni [x] [y] per accedere a un numero specifico in un array. Di seguito è riportato un esempio specifico in cui un array bidimensionale viene utilizzato come tabella di moltiplicazione:

// Crea un array multidimensionale var table = new Array (10); // Ci sono 10 righe nella tabella per (var i = 0; i

Metodi di classe di array

Lo standard ECMAScript 3 definisce molte comode funzioni per lavorare con gli array come parte di Array.prototype, che sono disponibili come metodi di qualsiasi array. Questi metodi saranno presentati nelle sottosezioni seguenti.

Metodo Join()

Il metodo Array.join() converte tutti gli elementi nell'array in stringhe, li concatena e restituisce la stringa risultante. Un argomento facoltativo può essere passato al metodo con una stringa che verrà utilizzata per separare gli elementi nella stringa del risultato. Se non viene specificata alcuna stringa di delimitazione, viene utilizzata una virgola. Ad esempio, il seguente frammento risulta nella stringa "1,2,3":

Var arr =; arr.join(); // "1,2,3" arr.join ("-"); // "1-2-3"

Il metodo inverso()

Il metodo Array.reverse() inverte l'ordine degli elementi in una matrice e restituisce una matrice riordinata. La permutazione viene eseguita direttamente sull'array originale, ad es. questo metodo non crea un nuovo array con elementi riordinati, ma li riordina in un array già esistente. Ad esempio, il seguente frammento, che utilizza i metodi reverse() e join(), restituisce la stringa "3,2,1":

Var arr =; arr.reverse().join(); // "3,2,1"

Sort() metodo

Il metodo Array.sort() ordina gli elementi nell'array originale e restituisce l'array ordinato. Se il metodo sort() viene chiamato senza argomenti, l'ordinamento viene eseguito in ordine alfabetico (per il confronto, gli elementi vengono temporaneamente convertiti in stringhe se necessario). Gli elementi non definiti vengono racchiusi alla fine dell'array.

Puoi passare una funzione di confronto come argomento a sort() per ordinare in qualsiasi altro ordine non alfabetico. Questa funzione imposta quale dei suoi due argomenti viene prima nell'elenco ordinato. Se il primo argomento deve precedere il secondo, la funzione di confronto deve restituire un numero negativo. Se il primo argomento deve seguire il secondo nell'array ordinato, la funzione deve restituire un numero maggiore di zero. E se due valori sono equivalenti (cioè l'ordine non è importante), la funzione di confronto dovrebbe restituire 0:

Var arr =; arr.sort (); // Ordine alfabetico: 1111, 222, 33, 4 arr.sort (funzione (a, b) (// Ordine numerico: 4, 33, 222, 1111 return ab; // Restituisce il valore 0 // a seconda dell'ordinamento ordine a e b)); // Ordina all'indietro, dal più alto al più basso arr.sort (funzione (a, b) (return b-a));

Nota quanto è conveniente usare una funzione senza nome in questo frammento. La funzione di confronto viene utilizzata solo qui, quindi non è necessario dargli un nome.

Il metodo concat()

Il metodo Array.concat() crea e restituisce un nuovo array contenente gli elementi dell'array originale su cui è stato chiamato il metodo concat() e i valori di eventuali argomenti passati al metodo concat(). Se uno qualsiasi di questi argomenti è di per sé un array, i suoi elementi vengono aggiunti all'array restituito. Va notato, tuttavia, che non esiste una conversione ricorsiva di un array da array a un array unidimensionale. Il metodo concat() non modifica l'array originale. Di seguito alcuni esempi:

Var arr =; arr.concat (4, 5); // Restituisce arr.concat (); // Restituisce arr.concat (,) // Restituisce arr.concat (4,]) // Restituisce]

Metodo Slice()

Il metodo Array.slice() restituisce una sezione, o sottoarray, della matrice specificata. I due argomenti del metodo definiscono l'inizio e la fine del pezzo restituito. L'array restituito contiene l'elemento numerato nel primo argomento più tutti gli elementi successivi fino (ma non includendo) l'elemento numerato nel secondo argomento.

Se viene specificato un solo argomento, l'array restituito contiene tutti gli elementi dalla posizione iniziale alla fine dell'array. Se uno qualsiasi degli argomenti è negativo, specifica il numero dell'elemento relativo alla fine dell'array. Quindi, l'argomento -1 corrisponde all'ultimo elemento dell'array e l'argomento -3 corrisponde al terzo elemento dell'array dalla fine. Ecco alcuni esempi:

Var arr =; arr.fetta (0.3); // Restituisce arr.slice (3); // Restituisce arr.slice (1, -1); // Restituisce arr.slice (-3, -2); // Sarà di ritorno

Metodo di giunzione ()

Il metodo Array.splice() è un metodo generico che inserisce o rimuove elementi da una matrice. A differenza dei metodi slice() e concat(), il metodo splice() modifica l'array originale su cui è stato chiamato. Si noti che i metodi splice() e slice() hanno nomi molto simili ma eseguono operazioni completamente diverse.

Il metodo splice() può rimuovere elementi da un array, inserire nuovi elementi o eseguire entrambe le operazioni contemporaneamente. Gli elementi dell'array vengono spostati secondo necessità in modo che dopo l'inserimento o l'eliminazione si formi una sequenza contigua.

Il primo argomento del metodo splice() specifica la posizione nell'array da cui inserire e/o eliminare. Il secondo argomento specifica il numero di elementi da rimuovere (tagliare) dall'array. Se il secondo argomento viene omesso, tutti gli elementi dell'array dall'array specificato fino alla fine dell'array vengono rimossi. Il metodo splice() restituisce un array degli elementi rimossi o (se nessuno degli elementi è stato rimosso) un array vuoto.

I primi due argomenti del metodo splice() specificano gli elementi dell'array da rimuovere. Questi argomenti possono essere seguiti da un numero qualsiasi di argomenti aggiuntivi che specificano gli elementi da inserire nell'array, a partire dalla posizione specificata nel primo argomento.

Var arr =; arr.giunzione (4); // Restituisce arr = arr.splice (1,2); // Restituisce arr = arr.splice (1,1); // Sarà di ritorno; arr = arr =; arr.splice (2,0, "a", "b"); // Sarà di ritorno; arr =

I metodi push() e pop()

I metodi push() e pop() consentono di trattare gli array come pile. Il metodo push() aggiunge uno o più nuovi elementi alla fine dell'array e ne restituisce la nuova lunghezza. Il metodo pop() esegue l'operazione opposta: rimuove l'ultimo elemento dell'array, riduce la lunghezza dell'array e restituisce il valore rimosso. Si noti che entrambi questi metodi modificano l'array originale e non ne creano una copia modificata.

I metodi unshift() e shift()

I metodi unshift() e shift() si comportano più o meno allo stesso modo di push() e pop(), tranne per il fatto che inseriscono e rimuovono elementi all'inizio dell'array, non alla fine. Il metodo unshift() sposta gli elementi esistenti verso indici più grandi per fare spazio, aggiunge l'elemento o gli elementi all'inizio dell'array e restituisce la nuova lunghezza dell'array. Il metodo shift() rimuove e restituisce il primo elemento dell'array, spostando tutti gli elementi successivi in ​​basso di una posizione per occupare lo spazio lasciato libero all'inizio dell'array.

• Traduzione

• I. Iterazione su array reali
  1. Per ogni metodo e metodi correlati
  2. Per il ciclo
  3. Uso corretto del for... in loop
  4. For... of loop (uso implicito di un iteratore)
  5. Uso esplicito di un iteratore
• 1. Utilizzo di metodi per iterare su array reali
  2. Conversione in un vero array
  3. Una nota sugli oggetti runtime

I. Iterazione su array reali

Al momento, ci sono tre modi per scorrere gli elementi di un array reale:

1. Metodo Array.prototype.forEach;
2. classico per ciclo;
3. Un "ben formato" per ... in loop.

Inoltre, presto, con l'avvento del nuovo standard ECMAScript 6 (ES 6), sono previste altre due modalità:

1. for ... of loop (uso implicito di un iteratore);
2. uso esplicito di un iteratore.

1. Il metodo forEach e i metodi correlati

Se il tuo progetto è progettato per supportare le capacità dello standard ECMAScript 5 (ES5), puoi utilizzare una delle sue innovazioni: il metodo forEach.

Esempio di utilizzo:
var a = ["a", "b", "c"]; a.forEach (funzione (voce) (console.log (voce);));
In generale, l'utilizzo di forEach richiede la connessione della libreria di emulazione es5-shim per i browser che non dispongono del supporto nativo per questo metodo. Questi includono IE 8 e versioni precedenti, che sono ancora in uso oggi.

Il vantaggio di forEach è che non è necessario dichiarare variabili locali per memorizzare l'indice e il valore dell'elemento dell'array corrente, poiché vengono passati automaticamente alla funzione di callback come argomenti.

Se sei preoccupato per il costo potenziale della richiamata per ogni articolo, non preoccuparti e leggi questo.

ForEach è progettato per eseguire l'iterazione su tutti gli elementi di un array, ma a parte questo ES5 offre molti metodi più utili per l'iterazione su tutti o su alcuni elementi, oltre a eseguire alcune azioni con essi:

• ogni - restituisce vero se per ogni elemento dell'array il callback restituisce un valore che viene convertito a vero.
• some - restituisce vero se per almeno un elemento dell'array il callback restituisce un valore che viene convertito a vero.
• filtro: crea un nuovo array che include quegli elementi dell'array originale per i quali il callback restituisce true.
• map - crea un nuovo array composto dai valori restituiti dal callback.
• riduci - riduce un array a un singolo valore, applicando a sua volta un callback a ciascun elemento dell'array, a partire dal primo (può essere utile per calcolare la somma degli elementi dell'array e altre funzioni finali).
• reduceRight - Funziona in modo simile a reduce, ma scorre gli elementi in ordine inverso.

2. Il ciclo for

Il buon vecchio per le regole:

Var a = ["a", "b", "c"]; indice var; for (indice = 0; indice< a.length; ++index) { console.log(a); }
Se la lunghezza dell'array rimane invariata durante l'intero ciclo e il ciclo stesso appartiene a un pezzo di codice critico per le prestazioni (il che è improbabile), è possibile utilizzare la versione "più ottimale" di for con la memorizzazione della lunghezza del Vettore:

Var a = ["a", "b", "c"]; var indice, lente; for (indice = 0, len = a.lunghezza; indice< len; ++index) { console.log(a); }
In teoria, questo codice dovrebbe essere leggermente più veloce del precedente.

Se l'ordine di iterazione non è importante, puoi andare ancora oltre in termini di ottimizzazione ed eliminare la variabile per memorizzare la lunghezza dell'array modificando l'ordine di iterazione al contrario:

Var a = ["a", "b", "c"]; indice var; for (indice = a.lunghezza - 1; indice> = 0; --indice) (console.log (a);)
Tuttavia, nei moderni motori JavaScript, questi giochi ottimizzati di solito non significano nulla.

3. Uso corretto del for ... in loop

Se ti viene consigliato di utilizzare un ciclo for ... in, ricorda che l'iterazione su array non è ciò a cui è destinato. Contrariamente all'idea sbagliata comune, il ciclo for ... in non esegue l'iterazione sugli indici dell'array, ma sulle proprietà enumerate dell'oggetto.

Tuttavia, in alcuni casi, come l'iterazione su array sparsi, for ... in può essere utile, a patto di prendere alcune precauzioni, come mostrato nell'esempio seguente:

// a è un array sparso var a =; un = "un"; a = "b"; a = "c"; for (chiave var in a) (if (a.hasOwnProperty (chiave) && /^0$|^\d*$/.test(chiave) && chiave<= 4294967294) { console.log(a); } }
In questo esempio, ad ogni iterazione del ciclo, vengono eseguiti due controlli:

1. che l'array ha una sua proprietà denominata key (non ereditata dal suo prototipo).
2. quella chiave è una stringa contenente la notazione decimale di un numero intero il cui valore è inferiore a 4294967294. Da dove viene l'ultimo numero? Dalla definizione di un indice di array in ES5, il che implica che l'indice più grande che un elemento in un array può avere è (2 ^ 32 - 2) = 4294967294.

Naturalmente, tali controlli richiederanno più tempo durante l'esecuzione del ciclo. Ma nel caso di un array sparso, questo metodo è più efficiente di un ciclo for, poiché in questo caso vengono iterati solo quegli elementi che sono esplicitamente definiti nell'array. Quindi, nell'esempio sopra, verranno eseguite solo 3 iterazioni (per gli indici 0, 10 e 10000) - rispetto a 10001 nel ciclo for.

Per non scrivere un codice di controlli così ingombrante ogni volta che devi iterare su un array, puoi progettarlo come una funzione separata:

Funzione arrayHasOwnIndex (array, chiave) (restituisce array.hasOwnProperty (chiave) && /^0$|^\d*$/.test(key) && chiave<= 4294967294; }
Quindi il corpo del ciclo dell'esempio sarà notevolmente ridotto:

For (chiave in a) (if (arrayHasOwnIndex (a, chiave)) (console.log (a);))
Il suddetto codice dei controlli è universale, adatto a tutti i casi. Ma invece, puoi usare una versione più breve, anche se formalmente non del tutto corretta, ma comunque adatta alla maggior parte dei casi:

For (key in a) (if (a.hasOwnProperty (key) && String (parseInt (key, 10)) === key) (console.log (a);))

4. Il ciclo for ... of (uso implicito di un iteratore)

ES6, mentre è ancora in stato di bozza, dovrebbe introdurre gli iteratori in JavaScript.

un iteratore è un protocollo implementato a oggetti che definisce un modo standard per ottenere una sequenza di valori (finiti o infiniti).
Un iteratore è un oggetto in cui è definito il metodo next(), una funzione senza argomenti che restituisce un oggetto con due proprietà:

1. done (boolean) - true se l'iteratore ha raggiunto la fine della sequenza da iterare. Altrimenti, falso.
2. valore - definisce il valore restituito dall'iteratore. Può essere indefinito (assente) se la proprietà done è vera.

Molti oggetti incorporati, incl. gli array reali hanno iteratori predefiniti. Il modo più semplice per utilizzare un iteratore su array reali consiste nell'utilizzare il nuovo for... di construct.

Un esempio di utilizzo per ... di:

Var val; var a = ["a", "b", "c"]; for (val of a) (console.log (val);)
Nell'esempio sopra, il ciclo for ... of chiama implicitamente l'iteratore dell'oggetto Array per ottenere ogni valore nell'array.

5. Uso esplicito di un iteratore

Gli iteratori possono essere utilizzati anche in modo esplicito, tuttavia, in questo caso il codice diventa molto più complicato rispetto al ciclo for... of. Sembra così:

Var a = ["a", "b", "c"]; var it = a.entries (); voce variabile; while (! (entry = it.next()). done) (console.log (entry.value);)
In questo esempio, il metodo Array.prototype.entries restituisce un iteratore che viene utilizzato per visualizzare i valori dell'array. Ad ogni iterazione, entry.value contiene un array della forma [chiave, valore].

II. Iterando su oggetti di tipo array

Oltre agli array reali, JavaScript contiene anche oggetti simili a array ... Ciò che hanno in comune con gli array reali è che hanno una proprietà length e proprietà con nomi sotto forma di numeri corrispondenti agli elementi dell'array. Gli esempi includono il DOM della collezione NodeList e gli pseudo-array di argomenti disponibili all'interno di qualsiasi funzione/metodo.

1. Utilizzo di metodi di iterazione su array reali

Almeno la maggior parte, se non tutti, i metodi di iterazione su array reali possono essere utilizzati per iterare su oggetti simili a array.

I costrutti for e for ... in possono essere applicati a oggetti simili a array esattamente nello stesso modo degli array reali.

ForEach e altri metodi Array.prototype si applicano anche agli oggetti di tipo array. Per fare ciò, è necessario utilizzare una chiamata a Function.call o Function.apply.

Ad esempio, se vuoi applicare forEach alla proprietà childNodes di un oggetto Node, puoi farlo in questo modo:

Array.prototype.forEach.call (node.childNodes, function (child) (// fai qualcosa con l'oggetto figlio));
Per facilitare il riutilizzo di questa tecnica, puoi dichiarare un riferimento al metodo Array.prototype.forEach in una variabile separata e utilizzarlo come scorciatoia:

// (Questo presuppone che tutto il codice sotto sia nello stesso ambito) var forEach = Array.prototype.forEach; // ... forEach.call (node.childNodes, function (child) (// fai qualcosa con l'oggetto figlio));
Se un oggetto simile a un array ha un iteratore, può essere utilizzato esplicitamente o implicitamente per scorrere l'oggetto allo stesso modo degli array reali.

2. Converti in un vero array

C'è anche un altro modo molto semplice per eseguire l'iterazione su un oggetto simile a un array: convertirlo in un array reale e utilizzare uno dei metodi sopra indicati per iterare su array reali. Per la conversione, puoi utilizzare il metodo Array.prototype.slice generico, che può essere applicato a qualsiasi oggetto simile a un array. Questo è fatto in modo molto semplice, come mostrato nell'esempio seguente:

Var trueArray = Array.prototype.slice.call (arrayLikeObject, 0);
Ad esempio, se vuoi convertire una raccolta NodeList in un array reale, hai bisogno di un codice come questo:

Var divs = Array.prototype.slice.call (document.querySelectorAll ("div"), 0);
Aggiornare: Come notato nei commenti

Gli array sono uno dei tipi di variabili più comunemente usati che consentono di memorizzare molti valori consecutivi in ​​"un posto". Tuttavia, quando si tratta di JavaScript, c'è molto da perdere.

In questo articolo, daremo un'occhiata a tre tecniche poco conosciute che puoi applicare quando lavori con gli array.

1. Aggiunta di proprietà personalizzate agli array

Se usi la ricerca per trovare la definizione di un array in JavaScript, la maggior parte delle fonti affermerà che un determinato tipo di valore di variabile è rappresentato come un oggetto.

In generale, molte cose che incontriamo in JavaScript sono oggetti. Sarà giusto notare che il linguaggio contiene anche tipi di dati "primitivi", ma i loro valori sono in qualche modo usati nelle proprietà all'interno degli oggetti.

2. Accesso agli elementi dell'array all'interno di un ciclo

Poiché gli indici di array possono assumere solo valori positivi, l'origine inizia da zero. Successivamente, possiamo usare questo indice per accedere all'elemento dell'array a questa iterazione del ciclo.

ECMAScript6 ha introdotto un modo per eseguire il ciclo attraverso un array senza utilizzare gli indici e attraverso un nuovo ciclo for... of.

Il ciclo for ... of è progettato per scorrere gli elementi di un array senza influire sull'indice dell'elemento.

Var ary = ["arancia", "mela", "litchi"]; for (let item of ary) (console.log (item);) // "orange", "apple", "lychee" Per confronto: visualizzazione degli indici degli elementi in un ciclo for. var ary = ["arancione", "mela", "litchi"]; for (var oggetto = 0; oggetto< ary.length; item++){ console.log(item); } // 0, 1, 2

3. Il numero di elementi non è la dimensione dell'array

Quando parliamo della dimensione di un array, di solito pensiamo che intendiamo il numero di elementi in esso contenuti. In realtà, questo non è del tutto vero: la proprietà della lunghezza viene calcolata in base all'indice massimo dell'elemento.

La proprietà length è altamente ambigua. Per convincersene, basta guardare le seguenti manipolazioni:

Variabile =; ario.lunghezza = 3; console.log (ary.length); // 3 ary = "abcd"; console.log (ary.length); // 6

Nell'ultimo esempio, è stato sufficiente mettere l'elemento nella 5a posizione, per cui la lunghezza dell'array è diventata uguale a 6. Se pensi che gli indici da 0 a 4 verranno creati automaticamente, allora sarai sbagliato. Questo può essere verificato utilizzando l'operatore in.

Variabile =; ario.lunghezza = 3; console.log (ary.length); // 3 ary = "abcd"; console.log (ary.length); // 6 console.log (0 in ario); // falso

In questo caso, sarebbe corretto chiamare l'array "sparso".

Possiamo anche manipolare la proprietà length per tagliare gli array. L'esempio seguente mostra la "perdita" dell'elemento all'indice 5 diminuendo il valore della proprietà length dell'array ary.

Variabile =; ario.lunghezza = 3; console.log (ary.length); // 3 ary = "abcd"; console.log (ary.length); // 6 ary.length = 2; console.log (ary.length); // 2 console.log (ary); // non definito

In questa lezione faremo conoscenza con gli array, impareremo come crearli, eseguire operazioni sui loro elementi e prenderemo in considerazione anche i metodi e le proprietà di base disponibili quando si lavora con essi.

concetto di matrice

Un array è una raccolta ordinata di dati che ha un nome ed è un'istanza di un oggetto Array. Consiste di elementi a cui si accede utilizzando il loro numero ordinale (indice). La numerazione degli elementi in un array non inizia da 1, ma da 0.

La figura seguente mostra un array numerico con 7 elementi. Gli elementi di questo array contengono i seguenti dati: 1 elemento (0 indice) - numero 123, 2 elementi (1 indice) - numero 214, 3 elementi (2 indice) - numero 315, ecc.

// elemento in cui produrremo l'array

Crea (dichiara) un array

Un array in JavaScript viene creato utilizzando l'operatore new e la funzione di costruzione dell'array. È possibile specificare uno dei seguenti valori tra parentesi della funzione di costruzione Array:

• Numero. In questo caso, questa funzione creerà un array del numero di elementi specificato. Tutti questi elementi avranno valori indefiniti.
• Diversi valori separati da virgole. In questo caso, la funzione di costruzione Array creerà un array del numero di elementi specificato e assegnerà loro i valori appropriati.
• Niente. In questo caso, questa funzione creerà un array vuoto.

A differenza di molti altri linguaggi di programmazione, gli array in JavaScript vengono ridimensionati automaticamente, ad es. sono intrinsecamente dinamici. Questi array non devono essere dimensionati. Un'altra caratteristica distintiva degli array JavaScript è che diversi elementi dello stesso array possono contenere diversi tipi di dati.

Lavorare con gli elementi dell'array

Per fare riferimento a un elemento specifico di un array, è necessario specificare il nome di questo array e il suo indice tra parentesi quadre. Questa operazione è anche chiamata operazione di indicizzazione.

Ad esempio, creiamo un array vuoto e aggiungiamo 4 elementi di testo:

// crea un array vuoto smartphoneColors var smartphoneColors = new Array (); // assegna ad 1 elemento dell'array (indice 0) il valore "Black" smartphoneColors = "Black"; // assegna al 2° elemento dell'array (indice 1) il valore "White" smartphoneColors = "White"; // assegna a 3 elementi dell'array (indice 2) il valore "Gray" smartphoneColors = "Gray"; // assegna al 4° elemento dell'array (indice 3) il valore "Blue" smartphoneColors = "Blue";

Ad esempio, stampiamo sulla console del browser (F12) i valori 2 e 4 dell'array smartphoneColors:

Console.log ("2 elementi =" + smartphoneColors); console.log ("4° elemento =" + smartphoneColors);

Lunghezza dell'array (numero di elementi nell'array)

Il numero di elementi in un array è determinato utilizzando la proprietà length.

// crea un array elencando i valori degli elementi nella funzione Array var volumeHDDs = new Array ("500Gb", "1Tb", "2Tb"); // variabile lengthArray assegna la lunghezza dell'array volumeHDDs var lengthArray = volumeHDDs.length;

Come ottenere il primo elemento di un array

Il valore del primo elemento dell'array si ottiene specificando il numero 0 tra parentesi quadre di questo array:

// crea un array di 3 elementi var volumeHDDs = new Array ("500Gb", "1Tb", "2Tb"); // ottiene il valore del primo elemento dell'array var firstValue = volumeHDDs;

Come ottenere l'ultimo elemento di un array

Il valore dell'ultimo elemento dell'array si ottiene specificando l'espressione nome_array.length-1 tra parentesi quadre di questo array:

// crea un array di 3 elementi var volumeHDDs = new Array ("500Gb", "1Tb", "2Tb"); // ottiene il valore dell'ultimo elemento dell'array var lastValue = volumeHDDs;

Iterando su un array

L'iterazione sugli elementi dell'array viene eseguita utilizzando il ciclo for.

Ad esempio, iteriamo su tutti gli elementi dell'array e visualizziamo i loro valori nella console del browser (F12):

// creazione di un array nameStudents, composto da 4 elementi var nameStudents = new Array ("Petya", "Vasya", "Kolya", "Maxim"); // itera sugli elementi dell'array da 0 alla lunghezza dell'array-1 for (var i = 0; i<= nameStudents.length-1; i++) { console.log(i+1 + " элемент массива = " + nameStudents[i]); }

A cosa serve l'operatore di cancellazione?

L'operatore delete viene utilizzato non per rimuovere un elemento da un array, ma per assegnare un valore indefinito a un dato elemento dell'array.

Var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); elimina nomePianeti; per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Metodi degli oggetti array

L'oggetto Array contiene i seguenti metodi per lavorare con gli elementi dell'array: pop (), push (), shift (), unshift (), slice (), splice (), join (), split (), reverse (), sort () ...

Rimozione dell'ultimo elemento di un array - pop

Il metodo pop è progettato per rimuovere l'ultimo elemento di un array. Questo metodo non ha parametri. Di conseguenza, restituisce il valore dell'ultimo elemento (rimosso) dell'array.

Var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); nomePianeti.pop (); console.log ("Numero di elementi nell'array:" + namePlanets.length); per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Aggiungere un elemento alla fine di un array - push

Il metodo push è progettato per aggiungere un elemento alla fine di un array. Il valore di questo elemento viene specificato come parametro di questo metodo. Di conseguenza, il metodo push restituisce il numero di elementi nell'array, tenendo conto del valore aggiunto.

Var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); namePlanets.push ("Giove"); console.log ("Numero di elementi nell'array:" + namePlanets.length); per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Rimozione del primo elemento di un array - shift

Il metodo shift è progettato per rimuovere il primo elemento da un array, ad es. elemento con indice 0. Tutti gli altri elementi dell'array vengono spostati all'inizio, ad es. il loro indice viene decrementato di 1. Questo metodo restituisce il valore dell'elemento dell'array eliminato come risultato dell'esecuzione.

Var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); nomePianeti.shift (); console.log ("Numero di elementi nell'array:" + namePlanets.length); per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Aggiunta di un elemento all'inizio di un array - unshift

Il metodo unshift è progettato per aggiungere un elemento all'inizio di un array. Il valore di questo elemento viene specificato come parametro di questo metodo. Di conseguenza, questo metodo restituisce il numero di elementi nell'array, tenendo conto del valore aggiunto.

Var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); namePlanets.unshift ("Giove"); console.log ("Numero di elementi nell'array:" + namePlanets.length); per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Copiare gli elementi dell'array - slice

Il metodo slice è progettato per copiare gli elementi dell'array specificati. Questo metodo non modifica l'array originale, ma restituisce come risultato un nuovo array degli elementi copiati.

Il metodo slice ha 2 parametri:

• 1 parametro (obbligatorio) - utilizzato per indicare l'indice dell'elemento da cui iniziare a copiare gli elementi;
• Parametro 2 (facoltativo) - utilizzato per indicare l'indice dell'elemento su cui si desidera copiare. Se non lo specifichi, verranno copiati gli elementi alla fine dell'array specificato.

var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); namePlanets = namePlanets.slice (2,3); console.log ("Numero di elementi nell'array:" + namePlanets.length); per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Aggiunta e/o rimozione di elementi - giunzione

Il metodo di giunzione serve per aggiungere e/o rimuovere elementi dell'array.

1. Il metodo di giunzione consente di ritagliare alcuni dei suoi elementi da un array, ad es. verranno rimossi dall'array:

Var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); nomePianeti.giunto (2,2); console.log ("Numero di elementi nell'array:" + namePlanets.length); per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

2. Il metodo di giunzione consente anche di aggiungere (se il parametro 2 è 0) elementi all'array o aggiungere e rimuovere contemporaneamente (se il parametro 2 è maggiore di 0) elementi dell'array.

Questo metodo ha 3 parametri:

• 1 parametro (obbligatorio) - destinato ad indicare l'indice dell'elemento da cui iniziamo a tagliare gli elementi;
• Parametro 2 (richiesto) - destinato a specificare il numero di elementi da tagliare;
• 3 e successivi parametri (opzionali) - sono destinati all'aggiunta di elementi all'array.

var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); nomePianeti.splice (1,1, "Urano", "Nettuno", "Saturno"); console.log ("Numero di elementi nell'array:" + namePlanets.length); per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Converti array in stringa - join

Il metodo join serve per convertire un array in una stringa. Questo metodo ha un parametro che viene utilizzato come stringa di connessione tra gli elementi della matrice durante la conversione in una stringa. Se non viene specificato nulla come parametro, verrà utilizzata una virgola (",") per unire gli elementi dell'array.

Var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); var strPlanets = namePlanets.join (); console.log ("Linea:" + strPlanets); var strPlanets2 = namePlanets.join (""); console.log ("Linea:" + strPlanets2);

Converti stringa in array - split

Il metodo split serve per convertire una stringa in un array. Questo metodo ha un parametro, in base al quale è possibile specificare una stringa, in base alla quale la stringa data verrà suddivisa in un array di stringhe.

Var strElementComputers = "Unità di sistema, monitor, tastiera, mouse, colonne, stampante"; var elementComputers = strElementComputers.split (","); console.log ("Numero di elementi nell'array:" + elementComputers.length); per (var i = 0; i<= elementComputers.length-1; i++) { console.log(i + " элемент массива = " + elementComputers[i]); }

Riordinare gli elementi dell'array in ordine inverso - inverso

Il metodo inverso è progettato per riordinare gli elementi dell'array in ordine inverso.

Var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); nomePianeti.reverse (); console.log ("Numero di elementi nell'array:" + namePlanets.length); per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Ordinamento degli elementi di un array - sort

Il metodo sort serve per ordinare gli elementi di un array. Per impostazione predefinita, questo metodo ordina l'array come stringhe.

Var namePlanets = new Array ("Venere", "Mercurio", "Terra", "Marte"); namePlanets.sort (); console.log ("Numero di elementi nell'array:" + namePlanets.length); per (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }