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 in quinta 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

Ho descritto solo una parte dei metodi per lavorare con gli array.

Qui parleremo di aggiungere, rimuovere elementi dell'array. Informazioni sull'inversione e l'ordinamento di un array, nonché l'affettatura, la sostituzione e la combinazione di array.

Aggiunta di elementi a un array.

Puoi usare la proprietà length per aggiungere nuovi elementi all'array:

Var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; myArray = "Yahoo!"; console.log (myArray); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]

Funzionerà perché gli elementi dell'array sono numerati da zero e lunghezza uno in più. Lunghezza sempre equivalente indice + 1 quindi è molto facile aggiungere un nuovo elemento alla fine dell'array. Strano, ma puoi aggiungere un elemento in una posizione molto più grande della lunghezza dell'array stesso:

Var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; myArray = "Lindsey Buckingham"; console.log (myArray); // ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards", undefined × 95, "Lindsey Buckingham"] console.log (myArray.length); // cento

Come mostrato nei commenti, alla fine dell'array verranno aggiunti 95 slot vuoti e un elemento "Lindsey Buckingham". Dopodiché, otteniamo la lunghezza 100. Un altro modo per aggiungere un nuovo elemento all'array è usare il metodo spingere ():

Var myArray = ["Paul McCartney", "John Lennon", "George Harrison"]; myArray.push ("Ringo Starr", "George Martin"); console.log (myArray); // ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr", "George Martin"]

Metodo spingere () restituisce sempre la nuova lunghezza dell'array (nel nostro caso 5). Puoi aggiungere un elemento usando giunzione ():

Var myArray = ["ghianda", "faggio", "mongongo", "macadamia"]; myArray.splice (2, 0, "anacardio"); // aggiunge "anacardio" nell'indice 2 console.log (myArray); // ["ghianda", "faggio", "anacardio", "mongongo", "macadamia"]

Quando il secondo argomento è 0, significa che nessun elemento verrà rimosso e quindi eventuali argomenti successivi verranno aggiunti all'array nella posizione specificata nel primo argomento.

Rimozione di elementi da un array

Rimuovere un elemento è un po' più difficile che aggiungerlo. Per rimuovere un elemento dalla fine di un array, si può usare pop():

Var myArray = ["7-up", "Sprite", "Ginger Ale", "Lemonade"]; myArray.pop (); console.log (myArray); // ["7-up", "Sprite", "Ginger Ale"]

Metodo pop () rimuove sempre l'ultimo elemento nell'array e lo restituisce.

Puoi anche usare giunzione () metodo:

Var myArray = ["manioca", "noce moscata", "lupino", "rabarbaro"]; myArray.splice (2, 1); // rimuove l'elemento all'indice 2 console.log (myArray); // ["manioca", "noce moscata", "rabarbaro"]

A differenza del metodo giunzione (), che viene utilizzato per aggiungere elementi, qui il secondo argomento è 1, che dice che vogliamo rimuovere l'elemento con indice 2 (o 3° di fila). In questo caso, l'elemento "lupin" è stato rimosso.

Puoi rimuovere un elemento da un array usando l'operatore eliminare:

Var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Michelangelo"]; console.log (myArray.length); // 4 cancella myArray; // rimuove Eliza console.log (myArray.length); // 4 console.log (myArray); // ["Byte Bandit", indefinito × 1, "Jeefo", "Michelangelo"]

Prima nota importante: eliminare () non cambia la lunghezza dell'array dopo che l'elemento è stato rimosso (anche se era l'ultimo elemento nell'array). Secondo: eliminare () cambia il valore dell'elemento rimosso in undefined, quindi quando si inverte myArray = indefinito.

Un buon modo per rimuovere un elemento da un array è usare Array.remove di John Resig. Di seguito è riportato un esempio di utilizzo tratto dalla sua pagina:

// Array Remove - Di John Resig (licenza MIT) Array.prototype.remove = function (from, to) (var rest = this.slice ((to || from) + 1 || this.length); this.length = da< 0 ? this.length + from: from; return this.push.apply(this, rest); }; // Удаление 2 элемента из массива array.remove(1); // Удаление 2-ого элемента с конца массива array.remove(-2); // Удаление второго и третьего элемента array.remove(1,2); // Удаление последнего и предпоследнего элемента array.remove(-2,-1);

Potresti voler dare un'occhiata alla soluzione di Viral Patel, una delle funzioni in Underscore.js, o grep() di jQuery.

Inoltre, in JavaScript c'è un metodo cambio (), che rimuove il primo elemento nell'array e ne restituisce il valore. Vediamo il codice:

Var myArray = ["Matt Kramer", "Jason Bieler", "Tom Defile", "Phil Varone"]; console.log (myArray.length); // 4 var firstItem = myArray.shift (); console.log (firstItem); // Matt Kramer console.log (myArray.length); // 3 console.log (myArray); // ["Jason Bieler", "Tom Defile", "Phil Varone"]

Usando il metodo cambio () abbiamo rimosso l'elemento, ma ne abbiamo salvato il valore nella nostra variabile firstItem. La lunghezza dell'array è cambiata da 4 a 3.

Questo metodo può essere utile in combinazione con il metodo spingere (). Usandoli insieme, possiamo mettere in coda in modo efficiente gli elementi in un array. Manteniamo la lunghezza dell'array rimuovendo un elemento dall'inizio e aggiungendone uno nuovo alla fine.

Al contrario, possiamo usare il metodo unshift () per aggiungere un elemento all'inizio dell'array:

Var myArray = ["apito", "nacchere", "maraca"]; console.log (myArray.length); // 3 myArray.unshift ("barra del suono", "tan-tan"); console.log (myArray.length); // 5 console.log (myArray); // ["chime bar", "tan-tan", "apito", "nacchere", "maraca"]

Usando il metodo unshift () con metodo pop (), puoi fare la coda all'indietro aggiungendo elementi all'inizio e rimuovendo dalla fine dell'array.

Inversione e ordinamento degli elementi dell'array.

Per capovolgere gli elementi in un array, possiamo usare inversione ():

Var myArray = ["conto alla rovescia", "finale", "il"]; console.log (myArray); // ["countdown", "final", "the"] myArray = myArray.reverse (); console.log (myArray); // ["il conto alla rovescia finale"]

L'ordinamento alfabetico degli elementi di un array è possibile utilizzando il metodo ordinare ():

Var myArray = ["xilofoni", "zebre", "juggernauts", "avocadi"]; console.log (myArray); // ["xilofoni", "zebre", "juggernauts", "avocadi"] myArray = myArray.sort (); console.log (myArray); // ["avocadi", "juggernauts", "xilofoni", "zebre"]

Ma questo non funzionerà con i numeri.

Var mioArray =; console.log (myArray); // mioArray = mioArray.sort (); console.log (myArray); //

Se è necessario ordinare i numeri, è possibile utilizzare il seguente codice:

Funzione compareNumbers (a, b) (restituisce a - b;) var myArray =; console.log (myArray); // myArray = myArray.sort (compareNumbers); console.log (myArray); //

Come mostrato sopra con una semplice funzione incollata in ordinare (), l'array contenente i numeri verrà ordinato correttamente.

Combinazione di array.

Puoi concatenare 2 o più array e ottenere 1 array che contiene gli elementi degli array concatenati. Per questo usiamo il metodo concat():

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myArray2 = ["Chris Murphy", "Patrick Pentland"]; var myNewArray = myArray.concat (myArray2); console.log (myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myNewArray = myArray.concat ("Chris Murphy", "Patrick Pentland"); console.log (myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Divisione di un array.

Puoi creare un nuovo array contenente 1 o più elementi da un array esistente usando la funzione fetta ():

Var myArray = ["Voce", "Basso", "Chitarra", "Batteria", "Mele", "Arance"]; var myNewArray = myArray.slice (4); console.log (myNewArray); // ["Mele", "Arance"]

Metodo fetta () accetta 1 o 2 argomenti. Se viene passato 1 argomento (indice), viene creato un nuovo array da tutti gli elementi di quello vecchio, a partire dall'indice specificato. Se vengono passati 2 argomenti, viene creato un nuovo array dagli elementi a partire dal primo argomento e fino all'elemento all'indice passato nel secondo parametro, escluso l'ultimo. Per rendere più chiaro, vediamo il codice qui sotto:

Var myArray = ["Voce", "Basso", "Chitarra", "Batteria", "Mele", "Arance"]; var myNewArray = myArray.slice (0, 4); console.log (myNewArray); // ["Voce", "Basso", "Chitarra", "Batteria"]

Sostituzione di elementi in un array.

Noi usiamo giunzione () per rimuovere elementi da un array, ma possiamo anche sostituire un elemento in un array con nuovi elementi:

Var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"]; myArray.splice (3, 1, "Scott Shriner"); // sostituisce 1 elemento con indice 3 console.log (myArray); // ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]

Metodo giunzione () restituisce sempre un array contenente gli elementi che sono stati rimossi. La riga 2 restituirà 1 elemento "Brian Bell".

Conclusione

Questi articoli hanno descritto i metodi per lavorare con gli array in JavaScript. Alcuni elementi aggiuntivi possono essere visualizzati su MDN che non ho incluso in questo post. Funzionano solo in IE9+, quindi potrebbero non essere utili.

Qualcosa da aggiungere? O conosci qualche libreria interessante che ti aiuterà a gestire gli array? Per favore, commenta!

In questo articolo, daremo un'occhiata all'array JavaScript e ai suoi componenti. JavaScript è progettato idealmente per la programmazione. Infatti implementa il linguaggio ECMAScript (riferimento ECMA-262).

Dove viene utilizzato JavaScript? Viene utilizzato come linguaggio incorporato per definire un percorso programmatico per un soggetto dell'applicazione. Può essere trovato nei browser: è usato lì come linguaggio di scripting che dà interattività alle pagine web.

Le caratteristiche architetturali più importanti di questo prodotto sono la digitazione dinamica e debole, la gestione automatica della memoria, la programmazione perfetta, funzioni che sono oggetti della prima categoria.

In generale, JavaScript è stato influenzato da vari motivi, perché durante lo sviluppo volevano creare un linguaggio simile a Java, ma facile da usare per i programmatori. A proposito, JavaScript non è di proprietà di alcuna azienda o organizzazione, il che lo rende diverso da molti stili di programmazione utilizzati dagli sviluppatori web.

Si noti che JavaScript è un marchio registrato di Oracle Corporation.

Che cos'è un array?

Un array è chiamato array che memorizza valori numerati. Ciascuno di questi valori è indicato come un componente dell'array e la cifra a cui è associato il componente è indicata come un indice. L'array JavaScript non è stato digitato. Ciò significa che le parti di un array possono essere di qualsiasi tipo e parti diverse appartenenti allo stesso array sono di tipi completamente diversi.

Inoltre, l'array JavaScript è dinamico, il che significa che non è necessario dichiarare una dimensione fissa. Dopotutto, puoi aggiungere nuovi dettagli in qualsiasi momento.

Produzione di array

Utilizzando JavaScript, la creazione di un array non è affatto difficile. Ci sono due metodi per questo. Il primo prevede la creazione di un array utilizzando un letterale - parentesi quadre, all'interno delle quali è presente un elenco di parti separate da virgole.

• var vuoto =; //array vuoto;
• var numeri =; // un array con cinque componenti digitali;
• var diff =; // un array con tre elementi di tipo diverso.

In genere, questo non richiede che i valori siano semplici (stringhe e numeri). Può anche essere qualsiasi altra espressione, ad esempio letterali soggetto, altre funzioni e array.

Il secondo modo per creare un array è chiamare il designer Array(). Puoi invitarlo in tre modi:

• Chiamare il designer senza motivo: var b - new Array (). Ciò prevede la creazione di un array vuoto equivalente a un letterale vuoto.
• Il costruttore specifica esplicitamente il valore degli n componenti dell'array: var b = new Array (1, 3, 5, 8, "string", true). In questo caso, al progettista viene presentato un elenco di argomenti che vengono convertiti in componenti del nuovo array. Gli argomenti vengono scritti nell'array nella posizione in cui sono specificati.
• Determinazione dell'area per la successiva attribuzione dei valori. Questo viene fatto specificando, quando si rileva un array, un numero racchiuso tra parentesi: var b = new Array (5). Questo metodo di rilevamento prevede l'assegnazione del numero richiesto di componenti all'array (ognuno dei quali è elencato come indefinito) con la possibilità di una successiva assegnazione di valori nel corso della presentazione. Questo modulo viene solitamente utilizzato per preposizionare un array Javascript la cui lunghezza è nota in anticipo.

Scrivere, leggere e aggiungere dettagli dell'array

È possibile accedere ai componenti dell'array utilizzando l'operatore. A proposito, tutti i componenti in JavaScript sono numerati a partire da zero. Per ottenere l'articolo richiesto, indicare il suo numero in. Di norma, i dettagli possono essere modificati. E per aggiungere JavaScript all'array, devi solo assegnare un nuovo valore.

Va notato che gli array JavaScript possono memorizzare un numero qualsiasi di elementi di qualsiasi tipo.

Lunghezza matrice

Quindi, lo sappiamo, la lunghezza dell'array è generalmente un fenomeno interessante. Consideriamolo in modo più dettagliato. Tutti gli array, che siano costruiti utilizzando la finestra di progettazione Array() o identificati utilizzando un letterale array, hanno una proprietà di lunghezza specifica che richiama il numero totale di elementi archiviati. Poiché l'array può contenere dettagli indefiniti (indicati con undefined), un'espressione più accurata suona così: la qualità della lunghezza è sempre maggiore di uno rispetto al numero più grande (indice) del componente dell'array. La qualità della lunghezza viene regolata automaticamente per rimanere precisa quando nuove parti compaiono nell'array.

È possibile utilizzare la proprietà length per visualizzare il componente finale di un array.

L'ultima parte ha un indice inferiore di uno alla dimensione dell'array. Dopotutto, il conto alla rovescia parte sempre da zero. Oh, questo JavaScript! La lunghezza dell'array dipende dal numero esatto di elementi. Pertanto, se non sai quanti dovrebbero essere, ma devi fare riferimento all'elemento finale dell'array, devi usare la notazione: v.length - 1.

Iterando sui dettagli di un array

Molto spesso, la proprietà length viene utilizzata per scorrere i dettagli di un array in un ciclo:

• var fruit = ["fragola", "pesca", "mela", "banana"];
• per (var I = 0; i< fruits.lenght; i++);
• document.write (frutti [i] + "...").

In questo esempio, i componenti sembrano essere nidificati in modo contiguo e iniziano dalla prima parte indicizzata a zero. In caso contrario, prima di chiamare ogni elemento dell'array, è necessario verificare se è definito.

A volte viene utilizzato anche un ciclo per inizializzare i componenti.

Crescita e troncamento di un array

Mi chiedo come usare JavaScript per aggiungere una stringa a un array? Nel processo di lavoro con gli array, la qualità della lunghezza viene automaticamente migliorata, motivo per cui dobbiamo occuparcene noi stessi. Una cosa da ricordare è che la proprietà length non è solo leggibile, ma anche scrivibile. Se alla qualità della lunghezza viene assegnato un valore di dimensioni inferiori a quello corrente, l'array viene ridotto al valore specificato. Tutti i componenti che non rientrano nel nuovo intervallo di indici vengono eliminati e i loro valori vengono persi, anche se la lunghezza viene successivamente restituita: i valori non vengono ripristinati.

È abbastanza facile cancellare l'array in questo modo: foo.length = 0.

Se la qualità della lunghezza è maggiore del suo valore corrente, nuovi dettagli non identificati appariranno alla fine dell'array, che lo aumenteranno fino alla dimensione richiesta.

Rimozione di parti del modello

L'operatore delete specifica undefined nel componente array, ma continua a esistere. Se è necessario rimuovere un elemento da un array JavaScript in modo che le parti rimanenti si spostino nello spazio vuoto, è necessario utilizzare uno dei metodi di array predefiniti. Il metodo Array.shift() elimina il primo componente, pop() il componente di terminazione e il metodo splice() elimina uno o un intervallo di componenti in qualsiasi punto dell'array.

Gli array sono multidimensionali

Sembra che l'abbiamo capito un po', gli array bidimensionali sono ciò che deve essere considerato in seguito. Ricordi che gli array JavaScript possono contenere altri elementi come componenti? Questa funzione viene utilizzata per produrre array multidimensionali. Per visitare i componenti in un array di array è sufficiente applicare due volte le parentesi quadre.

Array associativi

Ora esploriamo come il marchio JavaScript utilizza gli array associativi. Per fare ciò, dobbiamo esaminare la teoria: gli array associativi sono talvolta chiamati tabelle hash. Grazie a loro, le stringhe vengono utilizzate al posto degli indici. L'uso di tali costrutti è simile all'uso del nome della proprietà di un oggetto semplice, ma in questo caso, quando si esegue il lavoro in un formato array. Poiché non ci sono modi per operare su array associativi in ​​JavaScript, vengono utilizzati molto meno spesso di quelli ordinari. Va notato che possono comunque essere utili per l'archiviazione dei dati e facilitare la memorizzazione dei dettagli a cui è necessario accedere.

Uscita array

Ora cosa impariamo nel sistema JavaScript? Visualizzazione di un array in una finestra di dialogo (sullo schermo del monitor), oltre a visualizzare i valori dei componenti dell'array.

Se è necessario visualizzare i valori di tutti i componenti in un programma, è conveniente utilizzare l'istruzione for per questo. È interessante notare che la variabile contatore di regole for viene utilizzata come indice del componente dell'array.

Pulizia

Per filtrare un array JavaScript, devi azzerare la sua lunghezza:

• var mioArray =;
• myArray.length = 0.

• chiaro: funzione() (;
• questo.lunghezza = 0;
• restituire questo;

Aggiunta e rimozione di componenti

Bene, continuiamo a studiare ulteriormente questo interessante linguaggio JavaScript. Un elemento dell'array può essere rimosso e aggiunto allo stesso modo delle proprietà ordinarie di altri oggetti. Ma ci sono alcune differenze: l'aggiunta di proprietà numeriche può modificare la qualità della lunghezza e la modifica della proprietà della lunghezza può eliminare le qualità numeriche. In linea di principio, l'algoritmo per impostare le qualità degli array è il seguente:

• Quando si aggiunge una proprietà digitale sconosciuta i, se la lunghezza è uguale o inferiore a i, la lunghezza è determinata come i + 1.
• Quando si modifica la qualità della lunghezza, vengono eseguite le seguenti azioni: se il valore assegnato è inferiore a zero, viene generato un RangeError. Tutte le qualità numeriche e gli indici uguali alla nuova lunghezza e maggiori vengono eliminati.

In generale, la rimozione di un elemento da un array JavaScript non è difficile. Dopotutto, anche impostando la lunghezza, è necessario rimuovere i componenti "extra" da esso. Quindi segue l'opzione di pulire l'array. Se la variabile assegnata del nuovo array vuoto non si adatta per qualche motivo, ma è necessario azzerare quella corrente, è sufficiente assegnare il valore zero alla sua qualità di lunghezza.

I metodi unshift, shift, pop e push

Sebbene i componenti dell'array vengano modificati manualmente, molti consigliano di utilizzare metodi incorporati per farlo. È questa sfumatura che garantisce il valore corretto della qualità della lunghezza e l'assenza di spazi vuoti nell'array. A proposito, la lunghezza della qualità corretta corrisponderà al numero di componenti.

Il metodo push trasferisce le parti trasferite alla fine dell'array. Il metodo pop restituisce il componente di terminazione e lo rimuove.

In generale, in Internet Explorer precedente all'ottava versione, unshift può restituire indefinito, in altri browser, un nuovo valore per la lunghezza. Quindi è meglio non fare affidamento sul valore restituito da unshift.

Aggiunta e rimozione di parti al centro del pattern

Se devi eliminare un array JavaScript, cosa devi fare? È noto che il metodo di giunzione ha la firma Array.prototype.splice.

Rimuove il deleteCount dei componenti dall'array, a partire dall'indice iniziale. Se vengono passati più di due argomenti, tutti gli argomenti successivi nell'array vengono inseriti al posto di quelli annullati. Se inizio è meno, l'indice da cui riprenderà il checkout sarà uguale a lunghezza + inizio. Il ritorno all'array avviene dagli elementi rimossi.

In effetti, usando il metodo di giunzione, puoi rimuovere i componenti dal centro dell'array o aggiungerne quanti ne vuoi in qualsiasi punto dell'array.

Nella sua forma più semplice, se è necessario eliminare un componente con indice i, è necessario richiedere il metodo di giunzione dall'array con i parametri i e 1.

Fondamentalmente, il secondo parametro per il metodo splice è facoltativo, ma il comportamento di una funzione con un argomento è diverso in ogni browser.

Ad esempio, in Firefox, nelle ultime varianti di Opera, in Safari e in Chrome, tutti i dettagli verranno rimossi fino alla fine dell'array.

Nessun componente verrà eliminato in IE. Nelle prime versioni di Opera, il comportamento non può essere previsto - verrà rimossa una parte con l'indice start - 1. Pertanto, dovresti sempre passare almeno due componenti a questo metodo.

chiavi

Ovviamente, durante l'apprendimento di JavaScript, è necessario tenere a mente anche gli array associativi, come accennato in precedenza. Questo è un tipo astratto di informazioni (un'interfaccia per l'archivio dati) che consente di salvare coppie del modulo "(chiave, valore)" e supportare le operazioni di aggiunta di una coppia, nonché rimuovere e cercare una coppia tramite chiave:

TROVA (tasto).

INSERT (valore, chiave).

RIMUOVI (tasto).

Si presume che due coppie con chiavi simili non possano essere memorizzate in un array associativo. Nella coppia k + v, v è chiamato il valore associato alla chiave k. La semantica e i nomi delle operazioni di cui sopra in diverse implementazioni di tali array possono essere differenti.

Pertanto, l'azione TROVA (chiave) restituisce il valore associato alla chiave data, o un oggetto UNDEF specifico, il che significa che non esiste alcun valore associato alla chiave data. Le altre due azioni non restituiscono nulla (tranne se l'operazione ha avuto successo).

In generale, dal punto di vista dell'interfaccia, è conveniente considerare un array associativo come un semplice array, in cui non solo gli interi possono essere utilizzati come indici, ma anche valori di altri tipi, ad esempio stringhe.

A proposito, il supporto per tali array è disponibile in molti linguaggi di programmazione interpretati di alto livello come PHP, Perl, Ruby, Python, Tcl, JavaScript e altri. Per i linguaggi che non dispongono di strumenti integrati per lavorare con array associativi, è stato creato un numero enorme di implementazioni sotto forma di librerie.

Un esempio di array associativo è un elenco telefonico. In questa variante il valore è il complesso "F. Nome + indirizzo ", e la chiave - il numero di telefono. Un numero di telefono ha un proprietario, ma una persona può possedere più numeri.

Estensioni associative

Va notato che le estensioni più famose includono le seguenti azioni:

• EACH - "cammina" attraverso tutte le coppie da salvare.
• CLEAR - rimuove tutti i record.
• MIN - trova la coppia con il valore chiave più basso.
• MAX - trova la coppia con il valore chiave più alto.

Nelle ultime due opzioni, è necessario specificare l'azione di confronto sulle chiavi.

Implementazioni di array associativi

Esistono molte diverse implementazioni dell'array associativo. L'implementazione più comune può essere basata su un semplice array, i cui componenti sono coppie (valore, chiave). Per accelerare le azioni di ricerca, puoi ordinare i componenti di questo array per chiave e trovare usando Ma questo aumenterà il tempo necessario per aggiungere una nuova coppia, poiché dovrai "spostare" i componenti dell'array per imballare un nuovo record nella cella vuota che appare.

Le implementazioni più note si basano su vari alberi di ricerca. Ad esempio, in una tipica sala di lettura C++ STL, il contenitore della mappa è implementato sulla base di un albero nero-rosso. Negli stili di Ruby, Tcl, Python viene utilizzato uno dei tipi di tabelle hash. Ci sono anche altre implementazioni.

In generale, ogni implementazione ha i suoi vantaggi e svantaggi. È importante che tutte e tre le azioni vengano eseguite sia in media che nella peggiore sfumatura in un periodo di O (log n), dove n è il numero corrente di coppie salvate. Per gli alberi di ricerca corrispondenti (inclusi gli alberi nero-rosso) questa condizione è soddisfatta.

È noto che nelle implementazioni basate su tabelle hash, il tempo medio è definito come O (1), che è migliore rispetto alle azioni basate su alberi di ricerca. Naturalmente, questo non garantisce l'esecuzione ad alta velocità delle singole operazioni: la durata di un INSERT è indicata nel caso peggiore come O (n). Il processo INSERT richiede molto tempo, quando il fattore di riempimento raggiunge il suo punto più alto e diventa necessario ricostruire l'indice della tabella hash.

A proposito, queste liste di hash sono cattive perché non possono essere utilizzate per eseguire azioni aggiuntive veloci MAX, MIN e un algoritmo per bypassare tutte le coppie salvate in ordine di chiavi decrescente o crescente.

• 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

• 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 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 (chiave in a) (if (a.hasOwnProperty (chiave) && String (parseInt (chiave, 10)) === chiave) (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