Tecniche utili per lavorare con gli array in JavaScript. Lavorare con gli array in JavaScript come un professionista

In questo articolo, esamineremo un array JavaScript e i suoi componenti. JavaScript è idealmente orientato e progettato per la programmazione. Infatti, implementa il linguaggio ECMAScript (riferimento ECMA-262).

Dove viene utilizzato JavaScript? Viene utilizzato come linguaggio incorporabile per definire un percorso programmatico a un oggetto dell'applicazione. Può essere trovato nei browser, dove viene utilizzato come linguaggio di scripting che rende le pagine Web interattive.

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

In generale, JavaScript è stato influenzato da vari motivi, perché durante lo sviluppo si voleva creare un linguaggio simile a Java, ma facile da usare per i programmatori. Per inciso, JavaScript non è nativo per nessuna azienda o organizzazione, il che lo rende diverso da un certo numero di stili di programmazione utilizzati dagli sviluppatori web.

Va notato che JavaScript è un marchio registrato di Oracle Corporation.

Che cos'è un array?

Viene chiamato un array che memorizza valori numerati. Ciascuno di questi valori è chiamato componente dell'array e la cifra a cui è associato il componente è chiamata indice. L'array JavaScript non è tipizzato. Ciò significa che le parti dell'array possono essere di qualsiasi tipo e le parti diverse appartenenti allo stesso array hanno 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 una matrice utilizzando un letterale - parentesi quadre, all'interno delle quali è presente un elenco di parti, separate da virgole.

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

Di norma, qui non è richiesto che i valori siano semplici (stringhe e numeri). Può anche essere qualsiasi altra espressione, ad esempio valori letterali oggetto, altre funzioni e matrici.

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

• Chiamando il designer senza argomenti: var b - new Array(). Ciò prevede la creazione di un array vuoto, equivalente a un valore letterale vuoto.
• Il costruttore specifica in modo esplicito 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 trasformati in componenti di un nuovo array. Gli argomenti vengono scritti nell'array nella posizione in cui sono specificati.
• Determinazione dell'area per la successiva assegnazione dei valori. Questo viene fatto specificando un array di un singolo numero racchiuso tra parentesi quando si identifica: var b = new Array(5). Questo metodo di rilevamento prevede l'allocazione all'array del numero richiesto di componenti (ciascuno dei quali è elencato come non definito) con possibilità di successiva assegnazione di valori in fase di presentazione. Questo modulo viene solitamente utilizzato per preallocare un array Javascript la cui lunghezza è nota in anticipo.

Scrittura, lettura e aggiunta di dettagli di array

È possibile accedere ai componenti di un array utilizzando . A proposito, tutti i componenti in JavaScript, a partire da zero, sono numerati. Per ottenere l'elemento richiesto, il suo numero è indicato in Di norma, i dettagli possono essere modificati. E affinché JavaScript si aggiunga all'array, è sufficiente assegnare un nuovo valore.

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

Lunghezza della matrice

Quindi, sappiamo, la lunghezza di un array in generale è un fenomeno interessante. Consideriamolo più in dettaglio. Tutti gli array, costruiti con il designer Array() o identificati con un valore letterale di array, hanno una proprietà di lunghezza specifica che restituisce il numero totale di elementi da salvare. Poiché un array può contenere parti indefinite (indicate con undefined), un'espressione più precisa è: la qualità della lunghezza è sempre uno in più rispetto al numero più grande (indice) del componente dell'array. La qualità della lunghezza viene regolata automaticamente, rimanendo precisa quando compaiono nuove parti nell'array.

È possibile utilizzare la proprietà length per visualizzare il componente finale di una matrice.

L'ultima parte ha un indice inferiore alla dimensione dell'array. Dopotutto, il conto alla rovescia parte sempre da zero. Oh che JavaScript! La lunghezza di un 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.

Iterazione sui dettagli di un array

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

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

In questo esempio, i componenti sembrano essere posizionati contigui e iniziano dalla prima parte che possiede l'indice zero. In caso contrario, prima di chiamare ogni elemento dell'array, è necessario verificare se è definito.

Un ciclo viene talvolta utilizzato anche per inizializzare i componenti.

Incremento e troncamento dell'array

Mi chiedo come aggiungere una stringa a un array usando JavaScript? Nel processo di lavoro con gli array, la qualità della lunghezza viene automaticamente migliorata, motivo per cui dobbiamo occuparcene noi stessi. È necessario ricordare un dettaglio: la proprietà della lunghezza non è solo leggibile, ma anche scrivibile. Se alla qualità della lunghezza viene assegnato un valore di dimensioni inferiori a quella corrente, l'array viene ridotto al valore specificato. Eventuali componenti non 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 un array come questo: foo.length = 0.

Se la qualità della lunghezza viene aumentata rispetto al valore corrente, alla fine dell'array verranno visualizzate nuove parti non impostate, che lo aumenteranno alla dimensione desiderata.

Rimozione dei dettagli del modello

L'operatore di eliminazione imposta il componente dell'array su undefined, mentre continua ad esistere. Se si desidera rimuovere un elemento di un array JavaScript in modo che le parti rimanenti vengano spostate nello spazio lasciato libero, è necessario utilizzare uno dei metodi dell'array forniti. Il metodo Array.shift() elimina il primo componente, pop() il componente finale e il metodo splice() elimina uno o un intervallo di componenti in qualsiasi punto dell'array.

Gli array sono multidimensionali

Sembra che abbiamo un po' di vantaggio, gli array 2D sono ciò che dobbiamo guardare 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 una serie di array, basta applicare due volte le parentesi quadre.

Matrici associative

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 costruzioni assomiglia all'uso del nome di una proprietà di un oggetto semplice, ma in questo caso, quando si esegue un lavoro in un formato array. Poiché non ci sono modi in JavaScript per operare su array associativi, vengono usati molto meno frequentemente di quelli normali. Va notato che possono comunque essere utili per memorizzare i dati e rendere più facile ricordare i dettagli a cui è necessario accedere.

Uscita array

E cosa studieremo ora nel sistema JavaScript? Visualizzazione di un array in una finestra di dialogo (sullo schermo del monitor), nonché emettere i valori dei componenti dell'array.

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

pulizia

Per filtrare un array JavaScript, devi impostarne la lunghezza su zero:

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

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

Aggiunta e rimozione di componenti

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

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

In generale, eliminare un elemento di un array JavaScript è facile. Dopotutto, anche impostando la lunghezza, è necessario rimuovere i componenti "extra". Da qui l'opzione per cancellare l'array. Se per qualche motivo la variabile assegnata di un nuovo array vuoto non ti soddisfa, ma è necessario reimpostare quella corrente, è sufficiente impostarne la qualità della lunghezza a zero.

metodi unshift, shift, pop e push

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

Il metodo push sposta le parti passate alla fine dell'array. Il metodo pop restituisce il componente finale e lo rimuove.

In generale, in Internet Explorer precedente alla versione 8, unshift potrebbe restituire undefined, in altri browser potrebbe restituire il nuovo valore di lunghezza. Quindi è meglio non fare affidamento sul valore restituito da unshift.

Aggiunta ed eliminazione di dettagli nel mezzo di un array

Se devi eliminare un array JavaScript, cosa dovresti fare? Il metodo di giunzione è noto per avere la firma Array.prototype.splice.

Rimuove i componenti deleteCount 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 eliminati. Se l'inizio è negativo, l'indice da cui riprenderà il ritiro sarà uguale a lunghezza + inizio. Il ritorno all'array proviene dagli elementi rimossi.

In effetti, utilizzando il metodo di giunzione, puoi rimuovere componenti dal centro dell'array o aggiungere un numero qualsiasi di componenti in qualsiasi punto dell'array.

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

In linea di principio, il secondo parametro del metodo di giunzione è opzionale, ma il comportamento di una funzione con un argomento è diverso in ciascun browser.

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

In IE, nessuno dei componenti verrà distrutto. Nelle prime varianti di Opera, il comportamento è impossibile da prevedere - una parte con inizio indice - verrà rimossa 1. Pertanto, almeno due componenti devono essere sempre passati a questo metodo.

Chiavi

Naturalmente, quando si impara JavaScript, anche gli array associativi, come accennato in precedenza, non dovrebbero essere trascurati. Si tratta di un tipo astratto di informazione (interfaccia al datastore), che permette di salvare coppie del modulo "(chiave, valore)" e supportare le operazioni di aggiunta di una coppia, nonché di eliminazione e ricerca di una coppia tramite chiave:

TROVA (chiave).

INSERT(valore, chiave).

RIMUOVI (chiave).

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 precedenti in diverse implementazioni di tali array possono essere diversi.

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 è riuscita o meno).

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

A proposito, il supporto per tali array è disponibile in molti linguaggi di programmazione di alto livello, come PHP, Perl, Ruby, Python, Tcl, JavaScript e altri. Per i linguaggi che non dispongono di strumenti integrati per lavorare con gli 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. I. O. + 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 salvate.
• CANCELLA - rimuove tutte le voci.
• MIN - trova la coppia con il valore chiave più piccolo.
• MAX - trova la coppia con il valore chiave più alto.

Nelle ultime due opzioni è necessario che l'azione di confronto sia indicata sui tasti.

Implementazioni di array associativi

Esistono molte diverse implementazioni di un array associativo. L'implementazione più comune può essere basata su un semplice array i cui componenti sono coppie (valore, chiave). Per velocizzare la ricerca, puoi ordinare i componenti di questo array per chiave e trovare using Ma questo aumenterà il tempo necessario per aggiungere una nuova coppia, dal momento che dovrai "spingere a parte" i componenti dell'array per confezionare un nuovo entrare nella cella vuota che appare.

Le implementazioni più note si basano su vari alberi di ricerca. Ad esempio, in un tipico lettore STL C++, il contenitore della mappa è implementato sulla base di un albero nero e mogano. Gli stili Ruby, Tcl, Python usano 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 sfumatura peggiore nel periodo O(log n), dove n è il numero corrente di coppie salvate. Per gli alberi di ricerca abbinati (compresi gli alberi nero-rossi), 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, ciò non garantisce l'esecuzione ad alta velocità delle singole operazioni: il tempo di esecuzione di INSERT è indicato come O(n) nel peggiore dei casi. Il processo INSERT richiede molto tempo quando il fattore di riempimento raggiunge il punto più alto e diventa necessario ricostruire l'indice della tabella hash.

A proposito, queste liste hash sono pessime perché sulla loro base è impossibile eseguire azioni aggiuntive veloci MAX, MIN e l'algoritmo per bypassare tutte le coppie salvate in ordine decrescente o crescente di chiavi.

• Traduzione

La maggior parte delle applicazioni che vengono sviluppate oggi richiedono l'interazione con una sorta di set di dati. La gestione degli elementi nelle raccolte è un'operazione comune che probabilmente ti sei imbattuto. 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 o i suoi elementi. Forse è necessario eseguire rapidamente alcuni calcoli che coinvolgeranno gli elementi dell'elenco. Ad esempio, devi aggiungere qualcosa a qualcosa, moltiplicare qualcosa per qualcosa. Ci sono funzionalità in JavaScript che ti consentono di risolvere tali problemi più velocemente e in modo più conveniente rispetto all'utilizzo di un normale ciclo for?

In effetti, ci sono tali strutture in JavaScript. Alcuni di essi sono considerati nel materiale, la cui traduzione oggi presentiamo alla vostra attenzione. In particolare, stiamo parlando dell'operatore spread, del ciclo for…of e dei metodi includes() , some() , every() , filter() , map() e reduce(). Qui parleremo principalmente di array, ma le tecniche qui discusse sono generalmente adatte per lavorare con oggetti di altro tipo.

Va notato che le revisioni degli approcci moderni allo sviluppo in JS di solito includono esempi preparati utilizzando le funzioni delle frecce. 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 ti si addicono. Pertanto, qui, nella maggior parte delle situazioni, verranno mostrate due opzioni per eseguire le stesse azioni: utilizzare le funzioni ordinarie (ES5) e utilizzare 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 dovresti sostituirne uno con l'altro. In particolare, ciò è dovuto al fatto che la parola chiave this si comporta in modo diverso nelle funzioni regolari e freccia.

1. Operatore interno

L'operatore spread (operatore spread) consente di "espandere" gli array, sostituendo nel punto in cui viene utilizzato questo operatore, al posto degli array, i loro elementi. Un approccio simile è proposto per gli oggetti letterali.

▍I punti di forza dell'operatore dell'interno

• Questo è un modo semplice e veloce per "estrarre" singoli elementi da un array.
• Questo operatore è adatto per lavorare con array e oggetti letterali.
• Questo è un modo 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

Diciamo che il tuo compito è stampare un elenco delle tue prelibatezze preferite senza utilizzare un ciclo. Con l'aiuto dell'operatore di diffusione, questo viene fatto in questo modo:

2. Il ciclo for...of

L'operatore for...of è progettato per attraversare oggetti iterabili. Dà accesso ai singoli elementi di tali oggetti (in particolare agli elementi dell'array), che, ad esempio, consente di modificarli. Puoi pensarlo come un sostituto del normale ciclo for.

▍Forze del ciclo for...of

• Questo è un modo semplice per aggiungere o aggiornare gli elementi della raccolta.
• Il ciclo for...of consente di eseguire vari calcoli utilizzando gli elementi (somma, moltiplicazione e così via).
• È conveniente utilizzarlo quando è necessario verificare eventuali condizioni.
• Il suo utilizzo porta a scrivere codice più pulito e leggibile.

▍Esempio

Si supponga di disporre di una struttura dati che descriva il contenuto di una casella degli strumenti e si desideri visualizzare tali strumenti. Ecco come farlo con un ciclo for...of:

3. metodo include()

Il metodo include() viene utilizzato per verificare se una raccolta contiene un elemento, in particolare, ad esempio, una determinata stringa in un array contenente stringhe. Questo metodo restituisce true o false a seconda dei risultati della convalida. Quando lo usi, dovresti considerare che fa distinzione tra maiuscole e minuscole. Se, ad esempio, la raccolta contiene l'elemento stringa SCHOOL e il controllo della sua presenza tramite include() viene eseguito sulla stringa school , il metodo restituirà false .

▍Punti di forza del metodo includes()

• Il metodo includes() è utile per creare semplici meccanismi di ricerca dei dati.
• Offre allo sviluppatore un modo intuitivo per determinare se sono presenti dei dati in un array.
• È comodo da usare nelle espressioni condizionali per modificare, filtrare elementi ed eseguire altre operazioni.
• Il suo utilizzo porta a una migliore leggibilità del codice.

▍Esempio

Diciamo che hai un garage, rappresentato da una serie di auto, e non sai se c'è un'auto in quel garage o meno. Per risolvere questo problema, è necessario scrivere un codice che consenta di verificare se l'auto è in garage. Usiamo il metodo include():

4. 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 true o false . È simile al metodo includes() sopra, tranne per il fatto che il suo argomento è una funzione piuttosto che, ad esempio, una stringa regolare.

▍Punti di forza del metodo some()

• Il metodo some() consente di verificare se l'array contiene almeno uno degli elementi di nostro interesse.
• Esegue un condition test utilizzando la funzione passata.
• Questo metodo è comodo da usare.

▍Esempio

Supponiamo che tu sia il proprietario del club e, in generale, non sei interessato a chi viene esattamente nel tuo club. Tuttavia, alcuni visitatori non possono entrare nel club, poiché sono inclini al consumo eccessivo di bevande alcoliche, almeno se si trovano da soli nel tuo locale e non c'è nessuno con loro che possa prendersi 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, utilizziamo il metodo some(). Il suo utilizzo è mostrato di seguito in due versioni.

ES5

ES6

5. metodo ogni()

Il metodo every() esegue un'iterazione sull'array e controlla ogni elemento rispetto ad alcune condizioni, restituendo true se tutti gli elementi nell'array soddisfano la condizione e false in caso contrario. Puoi vedere che è simile al metodo some().

▍Punti di forza del metodo every()

• Il metodo every() consente di verificare se una condizione è soddisfatta da tutti gli elementi di un array.
• Le condizioni possono essere impostate utilizzando le funzioni.
• Promuove un approccio dichiarativo alla programmazione.

▍Esempio

Torniamo all'esempio precedente. Lì hai permesso a visitatori di età inferiore ai 18 anni di entrare nel club, ma qualcuno ha scritto una dichiarazione alla polizia, dopo di che sei entrato in una situazione spiacevole. Dopo essere riuscito a sistemare tutto, 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 componente del gruppo ha almeno 18 anni. Come l'ultima volta, prenderemo in considerazione la possibilità di risolvere il problema in due versioni, ma questa volta utilizzeremo il metodo every().

ES5

ES6

6. metodo filter()

Il metodo filter() consente di creare, sulla base di un array, un nuovo array contenente solo quegli elementi dell'array originale che soddisfano una determinata condizione.

▍Punti di forza del metodo filter()

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

▍Esempio

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

ES5

ES6

7. 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.

▍Punti di forza del metodo map()

• Il metodo map() evita la necessità di modificare gli elementi dell'array originale.
• Con il suo aiuto, è conveniente modificare gli elementi degli array.
• Migliora la leggibilità del codice.

▍Esempio

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

ES5

ES6

8. Metodo Reduce()

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

▍Punti di forza del metodo reduce()

• Usando il metodo reduce(), puoi calcolare la somma o la media degli elementi di un array.
• Questo metodo velocizza e semplifica i calcoli.

▍Esempio

Supponiamo di dover calcolare le spese della settimana, che sono memorizzate in un array. Risolviamo questo problema usando il metodo reduce().

ES5

ES6

Aggiungere etichette

Gli array possono essere manipolati attraverso vari metodi forniti dal costruttore Array.

metodi pop/push e shift/unshift

Considera i metodi pop() e push(). Questi metodi consentono di trattare gli array come stack. Uno stack è una struttura di dati in cui l'accesso agli elementi è organizzato secondo il principio LIFO (inglese last in - first out, "last in - first out"). Il principio della pila può essere paragonato a una pila di piatti: per prendere il secondo dall'alto, è necessario rimuovere quello superiore. Come funziona è mostrato nella figura:

Quindi torniamo ai metodi push() e pop(). Il metodo push() aggiunge uno o più nuovi elementi alla fine dell'array e ne restituisce la nuova lunghezza. Il metodo pop() rimuove l'ultimo elemento dell'array, diminuisce la lunghezza dell'array e restituisce il valore rimosso. Si noti che entrambi questi metodi modificano l'array sul posto anziché crearne una copia modificata.

var pippo = ; // pippo: pippo.push(1,2); // foo: restituisce 2 foo.pop(); // foo: restituisce 2 foo.push(3); // foo: restituisce 2 foo.pop(); // foo: restituisce 3 foo.push(); // foo: ] restituisce 2 foo.pop() // foo: restituisce foo.pop(); // foo: restituisce 1 var fruits = ["pere", "banane", "mele"]; var raccolto = frutti.pop(); document.write("Mi hai spennato " + raccolto); Tentativo "

I metodi shift() e unshift() si comportano in modo molto simile a pop() e push(), tranne per il fatto che inseriscono e rimuovono elementi all'inizio dell'array. Il metodo unshift() sposta gli elementi esistenti verso indici più alti per fare spazio a nuovi elementi, aggiunge uno o più elementi all'inizio dell'array e restituisce la nuova lunghezza dell'array. Il metodo shift() rimuove il primo elemento di un array e ne restituisce il valore, spostando tutti gli elementi successivi per occupare spazio all'inizio dell'array.

Varia f = ; // f: f.unshift(1); // f: Restituisce: 1 f.unshift(22); // f: Restituisce: 2 f.shift(); // f: Restituisce: 22 f.unshift(3,); // f:,1] Restituisce: 3 f.shift(); // f:[,1] Restituisce: 3 f.shift(); // f: Restituisce: f.shift(); // f: Resi: 1

metodo di unione

Il metodo Array.join() viene utilizzato per unire gli elementi dell'array in un'unica stringa. Puoi passare un argomento stringa facoltativo al metodo, che verrà utilizzato per separare gli elementi nella stringa. Se il delimitatore non è specificato, il carattere del delimitatore predefinito sarà una virgola quando viene chiamato il metodo.

Var a = ["Vento","Pioggia","Fuoco"]; var myVar1 = a.join(); //"Vento,Pioggia,Fuoco" var myVar2 = a.join(", "); //"Vento, Pioggia, Fuoco" var myVar3 = a.join(" + "); //"Vento + Pioggia + Fuoco" document.write(myVar1 + "
" + miaVar2 + "
" + myVar3); Prova »

Il metodo Array.join() è l'inverso del metodo String.split(), che crea un array suddividendo una stringa in blocchi.

metodo inverso

Il metodo Array.reverse() inverte l'ordine degli elementi in un array e restituisce un array con gli elementi riorganizzati. Questo metodo non crea un nuovo array con elementi riordinati, ma li riordina in un array già esistente.

Var myArr = ["uno", "due", "tre"]; document.write(myArr.reverse()); Tentativo "

metodo concatenamento

Il metodo Array.concat() crea e restituisce un nuovo array contenente gli elementi dell'array originale su cui è stato chiamato il metodo concat(), riempiti in sequenza con i valori di tutti gli argomenti passati al metodo concat(). Se uno di questi argomenti è esso stesso un array, tutti i suoi elementi verranno aggiunti. I nomi delle matrici sono usati come argomenti e sono specificati nell'ordine in cui i loro elementi devono essere concatenati.

Var a = ; a.concat(4, 5) //Restituisce a.concat(); //stesso - restituisce a.concat() //Restituisce

metodo di ordinamento

Il metodo Array.sort() ordina gli elementi di un array in posizione e restituisce l'array ordinato. Se il metodo sort() viene chiamato senza un argomento, ordina gli elementi dell'array in ordine alfabetico (convertendoli temporaneamente in stringhe a scopo di confronto). Come argomento, il metodo sort() può accettare una funzione di confronto che determina l'ordinamento degli elementi.

Var a = ["Kiwi", "Arance", "Pere"]; a.sort(); vars = a.join(", "); //Arance, Pere, Kiwi document.write(s); //esempio con numeri var myArr = ; myArr.sort(); document.write(myArr); //1,10,2 Prova »

Probabilmente ti aspettavi di vedere un risultato leggermente diverso dall'ordinamento dei numeri. Questo ordinamento si verifica perché il metodo sort() ordina gli elementi convertendoli in stringhe. Pertanto, l'ordine che ottengono è una stringa, dopotutto "10"

Per ordinare in un ordine diverso da quello alfabetico, puoi passare una funzione di confronto come argomento al metodo sort(). Tuttavia, va notato che la funzione di confronto dovrà essere scritta da noi stessi. Questa funzione deve avere due parametri perché specifica quale dei suoi due argomenti deve apparire per primo nell'elenco ordinato. Per facilitare la comprensione e la scrittura di tale funzione, esistono diverse regole in base alle quali verrà determinato l'ordine degli elementi:

• Se il primo argomento deve precedere il secondo, la funzione di confronto restituisce un numero negativo (se a
• Se il primo argomento deve seguire il secondo, la funzione di confronto restituisce un numero positivo (se a > b)
• Se due valori sono equivalenti (cioè il loro ordine non è importante), la funzione di confronto restituisce 0 (se a == b)

Per confronto, la funzione usa gli elementi dell'array come argomenti:

Funzione foo(a,b) ( //definisce la funzione di test if (a b) return 1; return 0; //if a == b ) var a = ; a.sort(foo); //solo il nome della funzione viene passato come argomento document.write(a.join(", ")); //scorciatoia la stessa var a = ; a.sort(function(a,b) ( //usa la funzione anonima return a - b; //la funzione restituisce 0 )); documento.scrivi(a); //1,2,5,10 Prova »

La prima voce dell'esempio è scritta in questo modo per facilitare la comprensione di come funziona. Nota quanto sia conveniente usare una funzione anonima nel secondo frammento di codice. Viene chiamato solo una volta, quindi non è necessario dargli un nome.

Nota: se nell'array sono presenti elementi non definiti, vengono spostati alla fine dell'array.

metodo a fette

Il metodo Array.slice() viene utilizzato per copiare una fetta specificata da un array e restituisce un nuovo array contenente gli elementi copiati. L'array originale non cambia.

Sintassi del metodo:

array_name.slice(inizio, fine);

Array_name deve essere sostituito con il nome dell'array da cui si desidera estrarre un insieme specifico di elementi per il nuovo array. Il metodo accetta due argomenti che definiscono l'inizio e la fine della sezione dell'array restituita. Il metodo copia la sezione dell'array partendo dall'inizio alla fine, esclusa la fine. Se viene fornito un solo argomento, l'array restituito conterrà tutti gli elementi dalla posizione specificata fino alla fine dell'array. Puoi usare indici negativi: vengono contati dalla fine dell'array.

Varia arr = ; arr slice(0,3); //Restituisce arr.slice(3); //Restituisce arr.slice(1,-1); //Restituisce arr.slice(-3,-2); //Ritorna

metodo di giunzione

Il metodo Array.splice() è un metodo generico per lavorare con gli array. Modifica l'array sul posto invece di restituire un nuovo array modificato come fanno i metodi slice() e concat(). Il metodo di giunzione può rimuovere elementi da un array, inserire nuovi elementi, sostituire elementi - uno alla volta e allo stesso tempo. Restituisce una matrice composta dagli elementi rimossi, se nessuno degli elementi è stato rimosso, restituirà una matrice vuota.

Sintassi del metodo:

array_name.splice(indice, conteggio, elem1, ..., elemN);

Il primo argomento specifica l'indice nell'array da cui iniziare a inserire o eliminare elementi. Il secondo argomento specifica il numero di elementi da rimuovere dall'array a partire dall'indice fornito nel primo argomento, se il secondo argomento è 0, nessun elemento verrà rimosso. Se il secondo argomento viene omesso, tutti gli elementi dell'array vengono rimossi dall'indice specificato fino alla fine dell'array. Quando si utilizza un numero di posizione negativo, gli elementi verranno contati dalla fine dell'array.

Var frutti = ["arance", "mele", "pere", "uva"]; var cancellato = fruits.splice(2,2); //restituisce ["pere", "uva"] document.write(cancellato); variabile arr = ; arr.splice(4); // Ritorna ; l'array è diventato: arr.splice(1,2); // Ritorna ; l'array è diventato: arr.splice(1,1); // Ritorna ; l'array è diventato: Prova »

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

Var frutti = ["arance", "mele"]; fruit.splice(2,0, "anguria"); //restituisce document.write(fruits); //divenne ["arance", "mele", "anguria"] var arr = ; arr.splice(2,0,"a","b"); // Ritorna ; divenne arr.splice(2,2,); //Restituisce ["a","b"]; diventato ,3,4,5] Prova »

Vale la pena notare che, a differenza di concat(), il metodo splice() non divide gli array passati come argomenti in elementi separati. Cioè, se un array viene passato al metodo da inserire, inserisce l'array stesso, non gli elementi di quell'array.

metodo toString

Il metodo toString() converte gli elementi di un array in una stringa utilizzando una virgola come carattere delimitatore.

Var arr = ["Latte","Pane","Biscotti"]; var cibo = arr.toString(); document.write(cibo); //Prova latte, pane, biscotti »

Nota che il metodo restituisce la stessa stringa del metodo join() quando viene chiamato senza argomenti.

indexOf e lastIndexOf

Il metodo indexOf restituisce l'indice dell'elemento il cui valore è uguale al valore passato al metodo come argomento.

Sintassi dei metodi indexOf() e lastIndexOf():

nome_array.indexOf(elemento_ricerca, indice) nome_array.lastIndexOf(elemento_ricerca, indice)

Il primo argomento del metodo specifica il valore dell'elemento di cui si vuole trovare l'indice, il secondo argomento (opzionale) indica l'indice da cui partirà la ricerca. Se sono presenti più occorrenze identiche, viene scelto il (primo) indice più piccolo. Se l'elemento con il valore desiderato non viene trovato, il metodo restituirà -1. All'interno del metodo, per la ricerca viene utilizzato un confronto rigoroso (===).

Var a = ; a.indexOf(3); //restituisce 2 a.indexOf(3,4); //restituisce 6 a.indexOf(35); //restituisce -1: nessun elemento con questo valore a.indexOf(2); // uno

Il metodo lastIndexOf() restituisce anche l'indice dell'elemento il cui valore è uguale al valore passato al metodo come argomento. L'unica differenza è che il metodo lastIndexOf() seleziona l'indice più alto (ultimo).

Var a = ; a.ultimoIndiceDi(3); //restituisce 7 a.lastIndexOf(35); //restituisce -1: nessun elemento con questo valore a.lastIndexOf(2); // 6

Metodi iteratori

I metodi descritti di seguito sono iteratori. Tutti i browser moderni per lavorare con gli array hanno metodi progettati per scorrere gli elementi ed eseguire varie azioni su di essi. Questi sono i metodi forEach(), map(), filter(), every(), some, reduce() e reduceRight().

Scorrono gli elementi dell'array da 0 a length - 1 e, se l'elemento esiste, lo passano alla funzione del gestore di callback.

per ciascuno

Sintassi del metodo:

array_name.forEach(callback, thisArg)

Il primo argomento è la funzione di callback che il metodo forEach() chiamerà per ogni elemento dell'array. Devi scrivere tu stesso l'implementazione della funzione di gestione chiamata. La funzione chiamata deve avere tre parametri: il primo parametro prende come argomento - il valore dell'elemento dell'array, il secondo - l'indice dell'elemento e il terzo - l'array stesso. Tuttavia, se vuoi utilizzare solo i valori degli elementi dell'array, puoi scrivere una funzione con un solo parametro. Il secondo argomento - thisArg (opzionale) verrà passato come valore this.

Varia arr = ; funzione foo(value) ( ​​var sum = value * this; return document.write(sum + "
"); ) arr.forEach(foo, 5); //il secondo argomento verrà passato come valore di questo //esempio con tre parametri var a = ; a.forEach(function(el, idx, a) ( document. write( "a["+idx+"] = "+el+" in ["+a+"]
"); )); Tentativo "

filtro

Sintassi del metodo:

array_name.filter(callback, questoOggetto)

Il metodo filter() crea e restituisce un nuovo array che conterrà solo quegli elementi dell'array per i quali la funzione di callback restituisce true.

Function isBig(element, index, array) ( //restituisce numeri maggiori o uguali a 10 return (elemento >= 10); //se il valore dell'elemento è maggiore o uguale a 10, l'espressione restituirà true ) var filtered = .filter(isBig) ; //filtrato

carta geografica

Il metodo map() crea e restituisce un nuovo array, che consisterà nei risultati della chiamata alla funzione callback(item, idx, ar) per ogni elemento dell'array.

Var a = ; var b = a.map(function(item, idx, arr) ( articolo di ritorno * articolo; )); // b =

tutti e alcuni

Il metodo every() restituisce true se per tutti gli elementi dell'array, la funzione specificata utilizzata per verificarli restituisce true.

Il metodo some() restituisce true se, durante il test nella funzione specificata, uno o più elementi restituiscono true.

Var a = ; a.every(function(x) ( return x 10; )) //true: un numero > 10

riduci e riduci Giusto

Sintassi del metodo:

array_name.reduce(callback, initialValue) array_name.reduceRight(callback, initialValue)

Il metodo reduce() applica la funzione specificata (callback) a due valori nell'array contemporaneamente, scorrendo gli elementi da sinistra a destra, mantenendo il risultato intermedio.

Argomenti della funzione di callback: (previousValue, currentItem, index, array)

• previousValue - il risultato di ritorno della funzione di callback (noto anche come risultato intermedio)
• currentItem - l'elemento corrente dell'array (gli elementi sono ordinati a turno da sinistra a destra)
• index - l'indice dell'elemento corrente
• array - l'array da elaborare

initialValue (valore di inizializzazione) - l'oggetto utilizzato come primo argomento della prima chiamata alla funzione di callback. In poche parole, il valore di previousValue alla prima chiamata è uguale a initialValue. Se non c'è initialValue, allora è uguale al primo elemento dell'array e l'iterazione inizia dal secondo:

Var a = ; funzione foo(prevNum,curNum) ( sum = prevNum + curNum; alert(sum); return sum; ) var result = a.reduce(foo, 0); document.write(risultato); Tentativo "

Vediamo come funziona questo esempio. I primi argomenti della funzione foo sono:

• prevNum = 0 (poiché initialValue è 0)
• curNum = 1 (l'elemento corrente è il 1° elemento dell'array)

1 viene aggiunto al numero 0. Questo risultato (somma: 1) verrà passato come prevNum alla successiva esecuzione della funzione. E così via fino a raggiungere l'ultimo elemento. Il risultato restituito è la somma dell'ultima corsa, che è 15 (1+2+3+4+5).

Il metodo reduceRight funziona in modo simile al metodo reduce, ma scorre l'array da destra a sinistra:

Var a = ["h","o","m","e"]; barra delle funzioni(prevStr, curItem) (restituisce prevStr + curItem; ) document.write(a.reduceRight(bar)); //ehm

In JavaScript, così come in altri linguaggi di programmazione, vengono utilizzati metodi diversi per lavorare con gli array.

I metodi semplificano la creazione della logica e l'implementazione in uno script.

Di seguito sono riportati i metodi di base per lavorare con gli array in JS.

spingere

Il metodo push() aggiunge un valore alla fine dell'array.

Sia arr = ; arr.push(312); log della console(arr); // →

pop

Il metodo pop() rimuove l'ultimo elemento dall'array o ne restituisce il valore.

Sia arr = ; arr.pop(); log della console(arr); // →

Usando la possibilità di ottenere il valore dell'ultimo elemento di un array come esempio, possiamo ottenere il formato dell'immagine:

Sia img = "https://example.com/img/name.png"; let format = img.split(".").pop(); registro della console (formato); // → png console.log(img.split(".")); // → ["https://example", "com/img/name", "png"]

non spostato

Il metodo unshift() aggiunge un elemento all'inizio dell'array.

Sia arr = ; arr.unshift(312); log della console(arr); // →

spostare

Il metodo shift() rimuove il primo elemento dall'array.

Sia arr = ; arr.shift(); log della console(arr); // → ;

È necessario comprendere che quando si utilizzano i metodi shift e unshift, ogni elemento dell'array cambia il proprio indice. Questo può rallentare l'esecuzione del programma se l'array è grande.

diviso

Il metodo split() viene utilizzato per trasformare una stringa in un array. Split divide una stringa (stringa) in base al parametro specificato.

Sia str = "Anya, Masha, Sasha, Dasha"; // questa è una stringa let arr = str.split(", "); log della console(arr); // → ["Anya", "Masha", "Sasha", "Dasha"] è un array

giuntura

Il metodo join() combina gli elementi di un array in una stringa utilizzando il delimitatore specificato nel parametro.

Let arr = ["Notpad++", "Sublime", "VSCode"]; // questo è un array let str = arr.join(", "); console.log("Editor di codice: " + str); // → "Editor di codice: Notpad++, Sublime, VSCode"

fetta

Il metodo slice() crea un nuovo array in cui copia gli elementi dal sorgente, partendo dall'elemento con l'indice del primo parametro passato al metodo, all'elemento con l'indice del secondo parametro.

Ad esempio: slice(3, 7) restituirà elementi con indici 3, 4, 5, 6. L'elemento con indice 7 non sarà incluso nell'array.

Se un parametro con un valore negativo viene passato a slice(), restituisce un nuovo array con il numero di elementi specificato nel parametro, ma già prelevato dalla fine dell'array originale.

Il metodo slice non modifica l'array originale.

Ecco alcuni esempi di come funziona il metodo slice():

Sia arr = ["A", "B", "C", "D", "E", "F", "G"]; // Restituisce un array contenente elementi con indici da 2 a 5 console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Restituisce un nuovo array contenente elementi con indici da 3 a arr.length console.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Restituisce una copia dell'array originale console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Restituisce un nuovo array composto dagli ultimi tre elementi del console.log originale (arr.fetta (-3)); // → ["MI", "MI", "SOL"]

giuntura

Il metodo splice() modifica il contenuto di un array rimuovendo elementi esistenti e/o aggiungendone di nuovi.

Sintassi:

Array.splice(start, deleteCount[, item1[, item2[, ...]]])

Opzioni:

• inizio- Indice da cui iniziare a modificare l'array. Se maggiore della lunghezza dell'array, l'indice effettivo verrà impostato sulla lunghezza dell'array. Se negativo, specifica l'indice dell'elemento dalla fine.
• deleteCount- Un numero intero che indica il numero di vecchi elementi da rimuovere dall'array. Se deleteCount è 0, nessun elemento viene eliminato. In questo caso, è necessario specificare almeno un nuovo elemento. Se deleteCount è maggiore del numero di elementi rimasti nell'array, a partire dall'inizio dell'indice, tutti gli elementi fino alla fine dell'array verranno eliminati.
• articolo N- Parametri opzionali. Elementi da aggiungere all'array. Se non specifichi alcun elemento, splice() rimuoverà semplicemente gli elementi dall'array.

Valore di ritorno

Descrizione

Se il numero di elementi specificato da inserire è diverso dal numero di elementi da rimuovere, l'array cambierà lunghezza dopo la chiamata.

Sia arr = [Barca, Shakhtar, Manchester United, Milan, Real Madrid, Ajax, Juventus]; let nax = arr.splice(2, 3); arr.splice(2, 3); log della console (nax); // → ["Man Utd", "Milano", "Real"] console.log(arr); // → ["Bar", "Shakhtar"] arr.splice(1, 0, "Zenith", "CSKA", "Spartak"); log della console(arr); // → [Barca, Zenit, CSKA, Spartak, Shakhtar]

inversione

Il metodo reverse() inverte l'ordine degli elementi dell'array. Di conseguenza, il primo elemento dell'array diventa l'ultimo e l'ultimo elemento diventa il primo.

Sia arr = ; console.log(arr.reverse()); // → console.log(["Alice", "BG", "GO", "DDT"].reverce()); // → ["DDT", "GO", "BG", "Alice"]

carta geografica

Il metodo map() passa attraverso gli elementi dell'array, eseguendo le azioni specificate con essi, e restituisce una copia dell'array con gli elementi modificati.

Nell'esempio seguente, per ogni elemento dell'array, aggiungi il valore dell'indice di questo elemento (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):

Sia arr = ; let testMap = arr.map((elemento, indice) => elemento + indice); console.log(testMap); //

o moltiplicare ogni valore dell'array, ad esempio, per 12

Sia arr = ; let testMap = arr.map(a => a * 12); console.log(testMap); // →

filtro

Il metodo filter() viene utilizzato per filtrare gli array. Itera attraverso l'array, restituendo solo quegli elementi che superano la condizione data.

Ad esempio, filtriamo i valori dell'array dai numeri lasciando solo quelli maggiori di 21

Sia arr = ; let testFilter = arr.filter(elemento => elemento > 21); console.log(testFilter); // →

Si noti che 21 non è stato incluso nel risultato dell'array, poiché la condizione doveva restituire qualcosa che è maggiore di 21. Affinché 21 sia incluso nell'array, la condizione è impostata come maggiore o uguale a: elemento >= 21

ridurre

Il metodo reduce() passa in sequenza gli elementi dell'array, accumulando il risultato intermedio in base alla funzione specificata nella condizione della funzione. Nel risultato finale, restituisce solo un valore.

Spesso questo metodo viene utilizzato per trovare la somma di tutti i numeri in una matrice. Esempio:

Sia arr = ; let summa = arr.reduce((acc, elemento) => acc + elemento); registro della console (somma); // → 370

ordinare

Il metodo sort() viene utilizzato per ordinare gli elementi di un array in base ai parametri forniti.

Esempio: prendi una matrice di numeri e ordinali in ordine crescente:

Sia arr = ; let testSortArr = arr.sort((a, b) => a - b); console.log(testSortArr); // →

include

Il metodo includes() determina se un array contiene un elemento particolare, restituendo true o false a seconda di ciò.

Un esempio di utilizzo include() .

Ecco un'espressione logica:

Sia animale = "cane"; if (animale == "gatto" || animale == "cane" || animale == "leone" || animale == "cavallo") ( // ........ )

usando il metodo include, puoi scriverlo in questo modo:

Sia animale = "cane"; const animals = ["gatto", "cane", "leone", "cavallo"]; if (animals.includes(animale)) ( // ........... )

Imparare a indicizzare gli array in js , rimuovere e aggiungere i loro elementi.

Un array in JavaScript è un oggetto globale progettato per contenere un elenco di valori.

È simile ad altre variabili in quanto può memorizzare qualsiasi tipo di dati. Ma un array ha un'importante differenza rispetto a una variabile: può memorizzare più di un elemento alla volta.

Un array è una raccolta ordinata di valori. Ogni valore è chiamato elemento e ha un proprio numero, chiamato indice.

Un elemento all'interno di un array può essere di qualsiasi tipo. Inoltre, gli elementi di un array possono essere di diversi tipi: numeri, stringhe, elementi logici e persino oggetti o altri array.

L'ordine degli elementi dell'array è basato su 0. Si scopre che l'array avrà sempre un indice sfalsato di uno: il primo elemento avrà un indice di 0 , il secondo avrà un indice di 1 e così via.

Ecco un esempio di un array con elementi di diverso tipo:

Creazione (dichiarazione) di un array

Gli array sono molto convenienti perché puoi archiviare tutti i dati di cui hai bisogno al loro interno. La dimensione massima possibile dell'array js è di 2 32 elementi.

Dobbiamo dire a JavaScript che vogliamo creare un array. Ci sono due opzioni per questo: il valore tra parentesi quadre o la nuova parola chiave.

Stenografia: utilizzando parentesi quadre

Un elenco di valori separati da virgole racchiusi tra parentesi quadre.

var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];

Il contenuto dell'array è determinato da ciò che si trova tra parentesi quadre. Ogni valore è separato da una virgola.

I valori sono impostati allo stesso modo delle variabili semplici, ovvero le stringhe devono essere dichiarate racchiuse tra virgolette, ecc.

Per dichiarare un array vuoto, lascia vuote le parentesi:

var myArray = ;

Nota lunga: utilizzo del costruttore Array()

var lostArray = new Array("Jack", "Sawyer", "John", "Desmond"); var twinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);

La nuova parola chiave dice a JavaScript di creare un nuovo array i cui valori vengono passati come parametri.

Se sai in anticipo quanti elementi avrà il tuo array, puoi passare immediatamente questo valore nel costruttore.

var myArray = nuovo Array(80);

L'espressione sopra creerà un array vuoto di 80 slot con valori non definiti.

Dichiarazione di matrice vuota:

var myArray = new Array();

Accesso agli elementi dell'array

Utilizzando l'indice di ogni elemento, puoi lavorare con qualsiasi dato nell'array, accedendovi tramite l'operatore:

var myArray = ["Jack", "Sawyer", "John", "Desmond"]; registro della console(myArray); // Stampa "Jack" console.log(myArray); // Stampa "Desmond"

Un array può avere più livelli, il che significa che ogni elemento può essere esso stesso un array. Il risultato è un js-array bidimensionale. Come fare riferimento a questi array, che si trovano all'interno di altri - " array multidimensionali»?

Ad esempio, consideriamo un array che rappresenta una famiglia. I bambini di questa famiglia sono registrati in un array separato all'interno di quello principale:

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

Può essere rappresentato come segue:

Per fare riferimento al valore "Lisa":

varlisa = famigliaArray; log della console (lisa); // stampa "Lisa"

Questo può essere continuato quasi all'infinito, il che consente di archiviare set di dati nidificati in array e accedervi utilizzando gli indici.

Aggiunta di elementi a un array

Abbiamo scoperto come accedere agli elementi di un array utilizzando i rispettivi indici. Allo stesso modo, puoi aggiungere (o modificare) elementi dichiarando, ad esempio:

var myArray = [ "Kate", "Sole"]; myArray = "Giulietta"; registro della console(myArray); // Stampa "Kate, Sun, Juliet"

Cosa succede se dichiaro un elemento in un indice che non ha altri elementi prima di esso? L'array stesso creerà tutti gli elementi mancanti e assegnerà loro il valore undefined :

var myArray = ["Kate", "Sole"]; myArray = "Giulietta"; console.log(myArray.length); // Stampa "6" console.log(myArray); // Stampa ["Kate", "Sole", undefined, undefined, undefined, "Juliet"]

Puoi scoprire quanto è lungo un array js usando la proprietà length. Nell'esempio sopra, ci sono sei elementi nell'array e a tre di essi non è stato assegnato un valore: sono contrassegnati come undefined .

metodo push()

Usando il metodo push(), puoi aggiungere uno o più elementi all'array js. Push() accetta un numero illimitato di parametri, tutti verranno aggiunti alla fine dell'array.

var myArray = [ "Kate", "Sut"]; myArray.push("Giulietta"); // Aggiunge l'elemento "Juliet" alla fine dell'array myArray.push("Libby", "Shannon");// Aggiunge gli elementi "Libby" e "Shannon" alla fine dell'array console.log(myaArray ); // Stampe ["Kate", "Sole", "Juliet", "Libby", "Shannon"]

metodo unshift()

Il metodo unshift() funziona come push() , tranne per il fatto che aggiunge elementi all'inizio dell'array.

var myArray = [ "Kate", "Sole"]; myArray.unshift("Giulietta"); // Aggiunge l'elemento "Juliet" all'inizio dell'array myArray.unshift("Libby", "Shannon"); // Aggiunge gli elementi "Libby" e "Shannon" all'inizio dell'array console.log(myArray); // Output ["Libby", "Shannon", "Juliet", "Kate", "Sun"]

Rimozione degli elementi dell'array

metodi pop() e shift()

I metodi pop() e shift() rimuovono rispettivamente l'ultimo e il primo elemento di un array:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; mioArray.pop(); // Rimuove l'elemento "Kate" myArray.shift(); // Rimuove l'elemento "Jack" console.log(myArray); // Output ["Sawyer", "John", "Desmond"]

metodo splice()

Usando il metodo splice(), puoi rimuovere o aggiungere elementi a un array, specificando l'indice esatto degli elementi.

Nell'esempio seguente, il metodo splice() aggiunge due elementi a partire dall'indice 2 ( cioè dal terzo elemento):

var fruitArray = ["mela", "pesca", "arancia", "limone", "lime", "ciliegia"]; fruitArray.splice(2, 0, "melone", "banana"); console.log(fruitArray); // Output ["mela", "pesca", "melone", "banana", "arancia", "limone", "lime", "ciliegia"]

Il primo parametro del metodo splice() è un indice. Specifica in quale posizione aggiungere/rimuovere elementi. Nel nostro esempio, abbiamo scelto l'indice 2 ( che significa "arancione").

Il secondo parametro è il numero di elementi da rimuovere. Abbiamo specificato un valore di 0, quindi nulla verrà eliminato.

I seguenti parametri sono facoltativi. Aggiungono nuovi valori all'array. Nel nostro caso, dobbiamo aggiungere "melone" e "banana", a partire dall'indice 2.