- Traduzione
La maggior parte delle applicazioni sviluppate oggigiorno richiedono l'interazione con qualche tipo di set di dati. La gestione degli elementi nelle raccolte è un'operazione comune che probabilmente hai incontrato. Quando lavori, ad esempio, con gli array, puoi, senza pensarci, usare un ciclo for regolare, 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, effettuare una ricerca su di esso, modificare questo elenco o i suoi elementi. Forse hai bisogno di eseguire velocemente alcuni calcoli che coinvolgono gli elementi di una lista. Diciamo che devi aggiungere qualcosa con qualcosa, moltiplicare qualcosa per qualcosa. È possibile trovare strumenti in JavaScript che ti consentano di risolvere tali problemi in modo più rapido e conveniente rispetto all'utilizzo di un normale ciclo for?
In effetti, ci sono tali funzionalità in JavaScript. Alcuni di essi sono discussi nel materiale, la cui traduzione presentiamo oggi alla vostra attenzione. In particolare parliamo dell'operatore spread, del ciclo for...of e dei metodi includes(), some(), Every(), filter(), map() e reduce(). Parleremo principalmente di array qui, ma le tecniche discusse qui sono generalmente adatte per lavorare con altri tipi di oggetti.
Va notato che le revisioni degli approcci moderni allo sviluppo 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 dedicare troppo tempo a imparare qualcosa di nuovo, o forse semplicemente non sono adatti a te. Pertanto, qui, nella maggior parte delle situazioni, verranno mostrate due opzioni per eseguire le stesse azioni: utilizzare le funzioni regolari (ES5) e utilizzare le funzioni freccia (ES6). Per chi è nuovo a lavorare con le funzioni freccia, le funzioni freccia non sono l'equivalente delle dichiarazioni e delle espressioni di funzioni. Non dovresti sostituire l'uno con l'altro. In particolare, ciò è dovuto al fatto che la parola chiave this si comporta diversamente nelle funzioni ordinarie e freccia.
1. Operatore di espansione
L'operatore di diffusione consente di "espandere" gli array sostituendo i loro elementi invece degli array nel punto in cui viene utilizzato questo operatore. Un approccio simile è stato proposto per i letterali oggetto.▍Punti di forza dell'operatore di espansione
- Questo è un modo semplice e veloce per "estrarre" singoli elementi da un array.
- Questo operatore è adatto per lavorare con array e valori letterali di oggetto.
- Questo è un metodo veloce e intuitivo per lavorare con gli argomenti delle funzioni.
- L'operatore di estensione non occupa molto spazio nel codice: assomiglia a tre punti (...).
▍Esempio
Supponiamo che ti venga assegnato il compito di elencare le tue prelibatezze preferite senza utilizzare un ciclo. Utilizzando l'operatore di estensione ciò avviene in questo modo:
2. Ciclo per...di
L'istruzione for...of è progettata per attraversare oggetti iterabili. Dà accesso ai singoli elementi di tali oggetti (in particolare agli elementi dell'array), consentendone, ad esempio, la modifica. Può essere considerato un sostituto del normale ciclo for.▍Punti di forza 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 elementi (somma, moltiplicazione e così via).
- È comodo da usare quando è necessario verificare eventuali condizioni.
- Il suo utilizzo porta a scrivere codice più pulito e leggibile.
▍Esempio
Supponiamo che tu abbia una struttura dati che descrive il contenuto di una casella degli strumenti e desideri visualizzare tali strumenti. Ecco come farlo utilizzando un ciclo for...of:
3. Il metodo include()
Il metodo include() viene utilizzato per verificare la presenza di un determinato elemento in una raccolta, in particolare, ad esempio, una determinata stringa in un array contenente stringhe. Questo metodo restituisce vero o falso a seconda dei risultati del test. Quando lo si utilizza, vale la pena considerare che fa distinzione tra maiuscole e minuscole. Se, ad esempio, la collection contiene l'elemento stringa SCHOOL e includes() ne verifica la presenza utilizzando la stringa school , il metodo restituirà false .▍Punti di forza del metodo include()
- Il metodo include() è utile per creare semplici meccanismi di recupero dei dati.
- Fornisce allo sviluppatore un modo intuitivo per determinare la presenza di determinati dati in un array.
- È conveniente utilizzarlo nelle espressioni condizionali per modificare, filtrare elementi ed eseguire altre operazioni.
- Il suo utilizzo porta ad una migliore leggibilità del codice.
▍Esempio
Supponiamo di avere un garage, rappresentato da un array con un elenco di auto, e di non sapere se una determinata auto è in questo garage o meno. Per risolvere questo problema è necessario scrivere un codice che consenta di verificare se l'auto è nel 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. In base all'esito del controllo restituisce true o false . È simile al metodo include() di cui sopra, tranne per il fatto che il suo argomento è una funzione anziché, ad esempio, una stringa regolare.▍Punti di forza del metodo some()
- Il metodo some() ci permette di verificare se l'array contiene almeno uno degli elementi che ci interessano.
- Esegue un test di condizione utilizzando la funzione che gli è stata passata.
- Questo metodo è comodo da usare.
▍Esempio
Supponiamo che tu sia il proprietario di un club e, in generale, non sei interessato a chi viene esattamente nel tuo club. Tuttavia, ad alcuni visitatori non è consentito entrare nel club perché sono inclini al consumo eccessivo di bevande alcoliche, almeno se si trovano da soli nel tuo locale e non c'è nessuno 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. Metodo Every()
Il metodo any() scorre un array e verifica ogni elemento rispetto a una determinata condizione, restituendo true se tutti gli elementi dell'array soddisfano la condizione e false altrimenti. Puoi vedere che è simile al metodo some().▍Punti di forza del metodo Every()
- Il metodo Every() ti consente di verificare se tutti gli elementi di un array soddisfano una condizione.
- Le condizioni possono essere impostate utilizzando le funzioni.
- Promuove un approccio dichiarativo alla programmazione.
▍Esempio
Torniamo all'esempio precedente. Lì hai permesso l'ingresso nel club ai visitatori minori di 18 anni, ma qualcuno ha scritto una dichiarazione alla polizia, dopo di che ti sei trovato in una situazione spiacevole. Dopo che tutto è stato risolto, hai deciso che non ti serviva tutto questo e hai inasprito le regole per visitare il club. Ora un gruppo di visitatori può entrare nel club solo se ciascun membro del gruppo ha almeno 18 anni. Come l'ultima volta, considereremo la soluzione del problema in due versioni, ma questa volta utilizzeremo il metodo Every().ES5
ES6
6. metodo filter()
Il metodo filter() consente di creare, in base ad un determinato 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() evita la modifica dell'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 mappa()
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.
- Può essere utilizzato per modificare comodamente gli elementi dell'array.
- Migliora la leggibilità del codice.
▍Esempio
Supponiamo che tu abbia un elenco di prodotti con i prezzi. Il tuo manager ha bisogno di un nuovo elenco di prodotti i cui prezzi sono stati ridotti 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 gli 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()
- Utilizzando il metodo reduce() è possibile calcolare la somma o la media degli elementi di un array.
- Questo metodo accelera e semplifica i calcoli.
▍Esempio
Supponiamo che tu debba calcolare le spese della settimana, che sono archiviate in un array. Risolviamo questo problema utilizzando il metodo reduce().ES5
ES6
In JavaScript, così come in altri linguaggi di programmazione, vengono utilizzati metodi diversi per lavorare con gli array.
I metodi semplificano la costruzione della logica e la sua 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); console.log(arr); //→
pop
Il metodo pop() rimuove l'ultimo elemento dall'array o ne restituisce il valore.
Sia arr = ; arr.pop(); console.log(arr); // →
Usando come esempio la possibilità di ottenere il valore dell'ultimo elemento di un array, possiamo ottenere il formato dell'immagine:
Lascia che img = "https://example.com/img/nome.png"; let formato = img.split(".").pop(); console.log(formato); // → png console.log(img.split(".")); // → ["https://esempio", "com/img/nome", "png"]
non spostabile
Il metodo unshift() aggiunge un elemento all'inizio dell'array.
Sia arr = ; arr.unshift(312); console.log(arr); // →
spostare
Il metodo shift() rimuove il primo elemento dall'array.
Sia arr = ; arr.shift(); console.log(arr); //→;
È necessario comprendere che quando si utilizzano i metodi shift e unshift, ogni elemento dell'array cambia il proprio indice. Ciò può rallentare l'esecuzione del programma se l'array è di grandi dimensioni.
diviso
Il metodo split() viene utilizzato per trasformare una stringa in un array. Split divide una stringa in base al parametro specificato.
Sia str = "Anya, Masha, Sasha, Dasha"; // questa è una stringa let arr = str.split(", "); console.log(arr); // → ["Anya", "Masha", "Sasha", "Dasha"] è un array
giuntura
Il metodo join() combina gli elementi dell'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 per il codice: " + str); // → "Editor per il codice: Notpad++, Sublime, VSCode"
fetta
Il metodo slice() crea un nuovo array in cui copia gli elementi dalla 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 specificati nel parametro, ma già presi dalla fine dell'array originale.
Il metodo slice non modifica l'array originale.
Ecco alcuni esempi del metodo slice() in azione:
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 costituito dagli ultimi tre elementi del console.log originale (arr.fetta (-3)); // → ["E", "F", "G"]
giunzione
Il metodo splice() modifica il contenuto di un array rimuovendo elementi esistenti e/o aggiungendone di nuovi.
Sintassi:
Array.splice(start, deleteCount[, elemento1[, elemento2[, ...]]])
Opzioni:
- inizio- L'indice da cui iniziare a modificare l'array. Se maggiore della lunghezza dell'array, l'indice reale 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 rimanenti nell'array a partire dall'inizio dell'indice, tutti gli elementi fino alla fine dell'array verranno eliminati.
- articoloN- Parametri facoltativi. 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 specificati da inserire è diverso dal numero di elementi da rimuovere, l'array cambierà lunghezza dopo la chiamata.
Sia arr = ["Barca", "Shakhtar", "Manchester United", "Milan", "Real", "Ajax", "Juventus"]; let nax = arr.splice(2, 3); arr.splice(2, 3); console.log(nax); // → ["Manchester United", "Milan", "Real"] console.log(arr); // → ["Barca", "Shakhtar"] arr.splice(1, 0, "Zenit", "CSKA", "Spartak"); console.log(arr); // → [Barça, 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() esamina gli elementi dell'array, eseguendo su di essi le azioni specificate e restituisce una copia dell'array con gli elementi modificati.
Nell'esempio seguente, a ciascun elemento dell'array aggiungiamo 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); //
oppure moltiplicare ciascun 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 gli elementi che soddisfano una determinata condizione.
Ad esempio, filtriamo i valori di un array di numeri, lasciando solo quelli maggiori di 21
Sia arr = ; let testFilter = arr.filter(elemento => elemento > 21); console.log(filtroprova); // →
Tieni presente che 21 non è stato incluso nel risultato dell'array, poiché la condizione doveva restituire qualcosa che sia maggiore di 21. Per includere 21 nell'array, impostiamo la condizione come maggiore o uguale a: elemento >= 21
ridurre
Il metodo reduce() attraversa in sequenza gli elementi dell'array, accumulando il risultato intermedio in base alla funzione specificata nella condizione della funzione. Nel risultato finale, restituisce un solo valore.
Questo metodo viene spesso utilizzato per trovare la somma di tutti i numeri in una matrice. Esempio:
Sia arr = ; let summa = arr.reduce((acc, elemento) => acc + elemento); console.log(somma); // → 370
ordinare
Il metodo sort() viene utilizzato per ordinare gli elementi dell'array in base ai parametri specificati.
Esempio: prendiamo una serie di numeri e ordiniamoli in ordine crescente:
Sia arr = ; let testSortArr = arr.sort((a, b) => a - b); console.log(testSortArr); //→
include
Il metodo includes() determina se l'array contiene un particolare elemento, restituendo true o false a seconda di esso.
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 animali = ["gatto", "cane", "leone", "cavallo"]; if (animali.include(animale)) ( // ........... )
Array
Vettoreè una raccolta ordinata di valori. I valori in un array sono chiamati elementi, e ogni elemento è caratterizzato da una posizione numerica nell'array, chiamata indice. Gli array in JavaScript non sono tipizzati: gli elementi di un array possono essere di qualsiasi tipo e diversi elementi dello stesso array possono avere tipi diversi. Gli elementi dell'array possono anche essere oggetti o altri array, consentendo di creare strutture di dati complesse come array di oggetti e array di array.
Gli indici degli array JavaScript iniziano da zero e utilizzano numeri interi a 32 bit: il primo elemento dell'array ha indice 0. Gli array JavaScript sono dinamici: possono aumentare e diminuire le dimensioni secondo necessità; non è necessario dichiarare dimensioni fisse degli array durante la loro creazione o riallocare la memoria quando le loro dimensioni cambiano.
Gli array in JavaScript sono una forma specializzata di oggetti e gli indici di array significano poco più che semplici nomi di proprietà, che guarda caso sono numeri interi.
Creazione di array
Il modo più semplice per creare un array è utilizzare un valore letterale, ovvero un semplice elenco di elementi dell'array separati da virgole e racchiusi tra parentesi quadre. I valori in un valore letterale di array non devono essere costanti: possono essere qualsiasi espressione, compresi i valori letterali oggetto:
Var vuoto = ; // Array vuoto var numeri = ; // Array con cinque elementi numerici var misc = [ 1.1, true, "a", ]; // 3 elementi di tipo diverso + virgola finale var base = 1024; tabella var = ; // Array con variabili var arrObj = [, ]; // 2 array all'interno contenenti oggetti
La sintassi letterale dell'array consente di inserire una virgola finale opzionale, ad es. il letterale [,] corrisponde a un array con due elementi, non tre.
Un altro modo per creare un array è chiamare il costruttore Vettore(). Puoi chiamare il costruttore in tre modi diversi:
Chiama il costruttore senza argomenti:
Var arr = nuovo Array();
In questo caso verrà creato un array vuoto, equivalente al letterale.
Chiama il costruttore con un singolo argomento numerico specificando la lunghezza dell'array:
Var arr = nuovo Array(10);
In questo caso, verrà creato un array vuoto della lunghezza specificata. Questa forma di chiamata al costruttore Array() può essere utilizzata per preallocare memoria per un array se il numero dei suoi elementi è noto in anticipo. Tieni presente che questo non memorizza alcun valore nell'array.
Specificare esplicitamente i valori dei primi due o più elementi dell'array o di un elemento non numerico nella chiamata del costruttore:
Var arr = new Array(5, 4, 3, 2, 1, "test");
In questo caso gli argomenti del costruttore diventano i valori degli elementi del nuovo array. Usare valori letterali di array è quasi sempre più semplice che usare il costruttore Array().
Lettura e scrittura di elementi di array
È possibile accedere agli elementi dell'array utilizzando l'operatore. A sinistra delle parentesi deve esserci un riferimento all'array. All'interno delle parentesi deve esserci un'espressione arbitraria che restituisce un valore intero non negativo. Questa sintassi è utile sia per leggere che per scrivere il valore di un elemento dell'array. Pertanto, tutte le seguenti istruzioni JavaScript sono valide:
// Crea un array con un elemento var arr = ["world"]; // Leggi l'elemento 0 var value = arr; // Scrive il valore nell'elemento 1 arr = 3.14; // Scrive il valore nell'elemento 2 i = 2; arr[i] = 3; // Scrive il valore nell'elemento 3 arr = "ciao"; // Leggi gli elementi 0 e 2, scrivi il valore nell'elemento 3 arr] = arr;
Lascia che ti ricordi che gli array sono un tipo di oggetto specializzato. Le parentesi quadre utilizzate per accedere agli elementi dell'array funzionano esattamente come le parentesi quadre utilizzate per accedere alle proprietà dell'oggetto. L'interprete JavaScript converte gli indici numerici tra parentesi in stringhe (l'indice 1 diventa la stringa "1") e quindi utilizza le stringhe come nomi di proprietà.
Non c'è niente di speciale nel convertire indici numerici in stringhe: puoi fare lo stesso con oggetti normali:
Var oggetto = (); // Crea un oggetto semplice obj = "uno"; // Indicizzalo con numeri interi
Il problema degli array è che quando usi nomi di proprietà che sono numeri interi non negativi, gli array determinano automaticamente il valore della proprietà lunghezza. Ad esempio, sopra abbiamo creato un array arr con un singolo elemento. Ha quindi assegnato valori ai suoi elementi negli indici 1, 2 e 3. Come risultato di queste operazioni, il valore della proprietà length dell'array è cambiato in 4.
È necessario distinguere chiaramente gli indici in un array dai nomi delle proprietà dell'oggetto. Tutti gli indici sono nomi di proprietà, ma solo le proprietà con nomi rappresentati da numeri interi sono indici. Tutti gli array sono oggetti e puoi aggiungere loro proprietà con qualsiasi nome. Tuttavia, se si toccano proprietà che sono indici di array, gli array rispondono aggiornando il valore della proprietà length secondo necessità.
Tieni presente che i numeri negativi e non interi possono essere utilizzati come indici di array. In questo caso, i numeri vengono convertiti in stringhe, che vengono utilizzate come nomi di proprietà.
Aggiunta e rimozione di elementi dell'array
Abbiamo già visto che il modo più semplice per aggiungere elementi a un array è assegnare valori a nuovi indici. Puoi anche utilizzare il metodo per aggiungere uno o più elementi alla fine dell'array. spingere():
Var arr = ; // Crea un array vuoto arr.push("zero"); // Aggiunge un valore alla fine arr.push("one",2); // Aggiungi altri due valori
Puoi anche aggiungere un elemento alla fine dell'array assegnando un valore all'elemento arr. Per inserire un elemento all'inizio di un array, puoi utilizzare il metodo non spostare(), che sposta gli elementi esistenti nell'array in posizioni con indici più alti.
Puoi eliminare gli elementi dell'array utilizzando l'operatore delete, proprio come le normali proprietà degli oggetti:
Var arr = ; cancella arr; 2 arr; // false, l'indice 2 nell'array non è definito arr.length; // 3: l'operatore delete non modifica la proprietà length dell'array
Rimuovere un elemento è simile (ma leggermente diverso) all'assegnazione del valore indefinito a quell'elemento. Tieni presente che l'applicazione dell'operatore delete a un elemento dell'array non modifica il valore della proprietà length né sposta verso il basso gli elementi con indici più alti per riempire il vuoto lasciato dall'eliminazione dell'elemento.
È anche possibile rimuovere elementi alla fine di un array semplicemente assegnando un nuovo valore alla proprietà length. Gli array hanno un metodo pop()(l'opposto del metodo push()), che riduce la lunghezza dell'array di 1 e restituisce il valore dell'elemento rimosso. C'è anche un metodo spostare()(l'opposto di unshift()), che rimuove l'elemento all'inizio dell'array. A differenza dell'operatore delete, il metodo shift() sposta tutti gli elementi in una posizione inferiore al loro indice corrente.
Infine esiste un metodo multiuso giunzione(), che consente di inserire, eliminare e sostituire gli elementi dell'array. Modifica il valore della proprietà length e sposta gli elementi dell'array su indici inferiori o superiori secondo necessità. Vedremo tutti questi metodi un po 'più tardi.
Array multidimensionali
JavaScript non supporta gli array multidimensionali "veri", ma fornisce un buon modo per simularli utilizzando array di array. Per accedere a un elemento dati in un array di array, utilizzare semplicemente l'operatore due volte.
Ad esempio, supponiamo che la matrice variabile sia una matrice di matrici di numeri. Ogni elemento di matrice[x] è un array di numeri. Per accedere a un numero specifico in un array, è possibile utilizzare l'espressione matrice[x][y]. Di seguito è riportato un esempio specifico in cui un array bidimensionale viene utilizzato come tabella di moltiplicazione:
// Crea un array multidimensionale var table = new Array(10); // Ci sono 10 righe nella tabella for(var i = 0; i
Metodi della classe Array
Lo standard ECMAScript 3 definisce Array.prototype come un insieme di funzioni utili per lavorare con gli array, disponibili come metodi su qualsiasi array. Questi metodi verranno presentati nelle sottosezioni seguenti.
metodo join()
Il metodo Array.join() converte tutti gli elementi dell'array in stringhe, li unisce e restituisce la stringa risultante. Come argomento facoltativo, puoi passare una stringa al metodo che verrà utilizzato per separare gli elementi nella stringa del risultato. Se non viene specificata una stringa delimitatrice, viene utilizzata una virgola. Ad esempio, il seguente frammento restituisce la stringa "1,2,3":
Var arr = ; arr.join(); // "1,2,3" arr.join("-"); // "1-2-3"
metodo inverso()
Il metodo Array.reverse() inverte l'ordine degli elementi in un array e restituisce un array riordinato. La permutazione viene eseguita direttamente nell'array originale, ovvero Questo metodo non crea un nuovo array con gli elementi riordinati, ma piuttosto li riordina in un array già esistente. Ad esempio, il seguente frammento, utilizzando i metodi reverse() e join(), restituisce la stringa "3,2,1":
Var arr = ; arr.reverse().join(); // "3,2,1"
metodo sort()
Il metodo Array.sort() ordina gli elementi nell'array di origine e restituisce l'array ordinato. Se il metodo sort() viene chiamato senza argomenti, l'ordinamento viene eseguito in ordine alfabetico (gli elementi vengono temporaneamente convertiti in stringhe per il confronto, se necessario). Gli elementi non definiti vengono spostati alla fine dell'array.
Per ordinare in un ordine diverso da quello alfabetico, puoi passare una funzione di confronto come argomento al metodo sort(). Questa funzione imposta quale dei suoi due argomenti dovrebbe essere il primo nell'elenco ordinato. Se il primo argomento deve precedere il secondo, la funzione di confronto deve restituire un numero negativo. Se il primo argomento deve seguire il secondo in un array ordinato, la funzione deve restituire un numero maggiore di zero. E se due valori sono equivalenti (cioè il loro ordine non ha importanza), la funzione di confronto dovrebbe restituire 0:
Var arr = ; arr.sort(); // Ordine alfabetico: 1111, 222, 33, 4 arr.sort(function(a,b) ( // Ordine numerico: 4, 33, 222, 1111 return a-b; // Restituisce 0 // a seconda dell'ordinamento a e B)); // Ordina nella direzione opposta, dal più grande al più piccolo arr.sort(function(a,b) (return b-a));
Nota quanto è conveniente utilizzare una funzione senza nome in questo snippet. La funzione di confronto viene utilizzata solo qui, quindi non è necessario darle un nome.
metodo concat()
Il metodo Array.concat() crea e restituisce un nuovo array contenente gli elementi dell'array originale su cui è stato chiamato concat() e i valori di eventuali argomenti passati a concat(). Se uno qualsiasi di questi argomenti è esso stesso un array, i suoi elementi vengono aggiunti all'array restituito. Va notato, tuttavia, che non esiste alcuna trasformazione ricorsiva di un array di array in un array unidimensionale. Il metodo concat() non modifica l'array originale. Di seguito sono riportati alcuni esempi:
Var arr = ; arr.concat(4, 5); // Restituisce arr.concat(); // Restituisce arr.concat(,) // Restituisce arr.concat(4, ]) // Restituisce ]
metodo slice()
Il metodo Array.slice() restituisce una sezione, o sottoarray, dell'array specificato. I due argomenti del metodo specificano l'inizio e la fine del frammento restituito. L'array restituito contiene l'elemento il cui numero è specificato nel primo argomento, più tutti gli elementi successivi, fino (escluso) all'elemento il cui numero è specificato nel secondo argomento.
Se viene fornito un solo argomento, l'array restituito contiene tutti gli elementi dalla posizione iniziale alla fine dell'array. Se uno qualsiasi degli argomenti è negativo, determina il numero dell'elemento relativo alla fine dell'array. Quindi, l'argomento -1 corrisponde all'ultimo elemento dell'array e l'argomento -3 corrisponde al terzo elemento dell'array dalla fine. Ecco alcuni esempi:
Var arr = ; arr.fetta(0,3); // Restituisce arr.slice(3); // Restituisce arr.slice(1,-1); // Restituisce arr.slice(-3,-2); // Ritorno
metodo splice()
Il metodo Array.splice() è un metodo generico che esegue l'inserimento o l'eliminazione di elementi dell'array. A differenza dei metodi slice() e concat(), il metodo splice() modifica l'array originale su cui è stato chiamato. Tieni presente che i metodi splice() e slice() hanno nomi molto simili, ma eseguono operazioni completamente diverse.
Il metodo splice() può rimuovere elementi da un array, inserire nuovi elementi o eseguire entrambe le operazioni contemporaneamente. Gli elementi dell'array vengono spostati secondo necessità per creare una sequenza continua dopo l'inserimento o l'eliminazione.
Il primo argomento del metodo splice() specifica la posizione nell'array da cui verrà eseguito l'inserimento e/o la cancellazione. Il secondo argomento specifica il numero di elementi che dovrebbero essere rimossi (tagliati) dall'array. Se il secondo argomento viene omesso, tutti gli elementi dell'array da quello specificato fino alla fine dell'array verranno rimossi. Il metodo splice() restituisce un array degli elementi rimossi o (se non è stato rimosso alcun elemento) un array vuoto.
I primi due argomenti del metodo splice() specificano gli elementi dell'array da rimuovere. Questi argomenti possono essere seguiti da un numero qualsiasi di argomenti aggiuntivi che specificano gli elementi da inserire nell'array, a partire dalla posizione specificata nel primo argomento.
Var arr = ; arr.splice(4); // Ritorno, arr = arr.splice(1,2); // Ritorno, arr = arr.splice(1,1); // Ritorno ; arr = arr = ; arr.splice(2,0,"a","b"); // Ritorno ; arr =
metodi push() e pop()
I metodi push() e pop() ti permettono di lavorare con gli array come se fossero stack. Il metodo push() aggiunge uno o più nuovi elementi alla fine dell'array e ne restituisce la nuova lunghezza. Il metodo pop() esegue l'operazione inversa: rimuove l'ultimo elemento dell'array, riduce la lunghezza dell'array e restituisce il valore rimosso. Tieni presente che entrambi questi metodi modificano l'array originale anziché crearne una copia modificata.
metodi unshift() e shift()
I metodi unshift() e shift() si comportano quasi allo stesso modo di push() e pop(), tranne per il fatto che inseriscono e rimuovono elementi all'inizio dell'array anziché alla fine. Il metodo unshift() sposta gli elementi esistenti su indici più grandi per liberare spazio, aggiunge l'elemento o gli elementi all'inizio dell'array e restituisce la nuova lunghezza dell'array. Il metodo shift() rimuove e restituisce il primo elemento dell'array, spostando tutti gli elementi successivi verso il basso di una posizione per occupare lo spazio lasciato libero all'inizio dell'array.
- Traduzione
- I. Iterazione su array reali
- metodo forEach e metodi correlati
- per ciclo
- Uso corretto del ciclo for...in
- ciclo for...of (uso implicito dell'iteratore)
- Uso esplicito dell'iteratore
- Utilizzo di metodi per eseguire iterazioni su array reali
- Converti in un array reale
- Una nota sugli oggetti runtime
I. Iterazione su array reali
Al momento, ci sono tre modi per scorrere gli elementi di un array reale:- metodo Array.prototype.forEach ;
- classico ciclo for
- un ciclo for...in costruito “correttamente”.
- ciclo for...of (uso implicito dell'iteratore);
- uso esplicito dell'iteratore.
1. Il metodo forEach e metodi correlati
Se il tuo progetto è progettato per supportare le funzionalità 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 supportano nativamente questo metodo. Questi includono IE 8 e versioni precedenti, che sono ancora in uso in alcuni luoghi.
Il vantaggio di forEach è che non è necessario dichiarare variabili locali per memorizzare l'indice e il valore dell'elemento corrente dell'array, poiché vengono automaticamente passati alla funzione callback come argomenti.
Se sei preoccupato per il possibile costo di una richiamata su ciascun elemento, non preoccuparti e leggi questo.
ForEach è progettato per eseguire l'iterazione su tutti gli elementi di un array, ma in aggiunta a ciò, ES5 offre molti altri metodi utili per eseguire l'iterazione su tutti o alcuni elementi oltre a eseguire alcune azioni su di essi:
- ogni - restituisce true se per ogni elemento dell'array il callback restituisce un valore che può essere convertito in true.
- some - restituisce true se per almeno un elemento dell'array il callback restituisce un valore che può essere convertito in true.
- filter: crea un nuovo array che include quegli elementi dell'array originale per i quali il callback restituisce true .
- map - crea un nuovo array costituito dai valori restituiti dal callback.
- reduce - riduce un array a un singolo valore, applicando un callback a turno a ciascun elemento dell'array, iniziando dal primo (può essere utile per calcolare la somma degli elementi dell'array e altre funzioni di riepilogo).
- reduceRight: funziona in modo simile a reduce, ma scorre gli elementi in ordine inverso.
2. Per il ciclo
Buon vecchio per le regole:Var a = ["a", "b", "c"]; indice var; per (indice = 0; indice< a.length; ++index) {
console.log(a);
}
Se la lunghezza dell'array è costante in tutto il ciclo e il ciclo stesso appartiene a una sezione di codice critica per le prestazioni (cosa improbabile), è possibile utilizzare una versione "più ottimale" di for che memorizza la lunghezza dell'array :
Var a = ["a", "b", "c"]; indice var, lente; for (indice = 0, len = a.lunghezza; indice< len; ++index) {
console.log(a);
}
In teoria, questo codice dovrebbe essere un po' più veloce del precedente.
Se l'ordine degli elementi non è importante, puoi andare ancora oltre in termini di ottimizzazione ed eliminare la variabile per memorizzare la lunghezza dell'array, cambiando l'ordine di ricerca al contrario:
Var a = ["a", "b", "c"]; indice var; for (indice = a.lunghezza - 1; indice >= 0; --index) ( console.log(a); )
Tuttavia, nei moderni motori JavaScript tali giochi di ottimizzazione di solito non significano nulla.
3. Utilizzo corretto del ciclo for...in
Se ti viene consigliato di utilizzare un ciclo for...in, ricorda che l'iterazione sugli array non è lo scopo per cui è previsto. Contrariamente a un malinteso comune, il ciclo for...in non esegue l'iterazione sugli indici dell'array, ma piuttosto sulle proprietà enumerabili di un oggetto.Tuttavia, in alcuni casi, come l'iterazione su array sparsi, for...in può essere utile, purché si prendano precauzioni, come mostrato nell'esempio seguente:
// a - array sparso var a = ; un = "un"; a = "b"; a = "c"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294) {
console.log(a);
}
}
In questo esempio, vengono eseguiti due controlli ad ogni iterazione del ciclo:
- che l'array ha una propria proprietà chiamata key (non ereditata dal suo prototipo).
- quella chiave è una stringa contenente la rappresentazione 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, che mostra che l'indice più alto che un elemento in un array può avere è: (2^32 - 2) = 4294967294 .
Per non scrivere un codice di controllo così complicato ogni volta che devi scorrere un array, puoi scriverlo come una funzione separata:
Funzione arrayHasOwnIndex(array, chiave) ( return array.hasOwnProperty(chiave) && /^0$|^\d*$/.test(chiave) && chiave<= 4294967294;
}
Quindi il corpo del ciclo dell'esempio verrà notevolmente ridotto:
For (inserire a) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )
Il codice di controllo discusso sopra è universale, adatto a tutti i casi. Puoi invece utilizzare una versione più breve, anche se formalmente non del tutto corretta, ma comunque adatta alla maggior parte dei casi:
For (key in a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ) )
4. Ciclo For...of (uso implicito dell'iteratore)
ES6, ancora in stato di bozza, dovrebbe introdurre gli iteratori in JavaScript.Iteratore
è un protocollo implementato da un oggetto che definisce un modo standard per ottenere una sequenza di valori (finita o infinita).
Un iteratore è un oggetto che definisce un metodo next() - una funzione senza argomenti che restituisce un oggetto con due proprietà:
- done (booleano) - true se l'iteratore ha raggiunto la fine della sequenza iterabile. Altrimenti il valore è false .
- valore: definisce il valore restituito dall'iteratore. Potrebbe essere indefinito (mancante) se la proprietà done è true .
Esempio di utilizzo per...di:
Varval; var a = ["a", "b", "c"]; for (val di a) ( console.log(val); )
Nell'esempio precedente, il ciclo for...of chiama implicitamente l'iteratore dell'oggetto Array per ottenere ciascun valore dell'array.
5. Uso esplicito dell'iteratore
Gli iteratori possono anche essere utilizzati esplicitamente, tuttavia in questo caso il codice diventa molto più complicato rispetto al ciclo for...of. Sembra qualcosa del genere:Var a = ["a", "b", "c"]; var it = a.entries(); voce var; while (!(voce = it.next()).done) ( console.log(voce.valore); )
In questo esempio, il metodo Array.prototype.entries restituisce un iteratore utilizzato per visualizzare i valori dell'array. Ad ogni iterazione, entry.value contiene un array nel formato [key, value] .
II. Iterazione su oggetti simili ad array
Oltre agli array reali, in JavaScript ci sono anche oggetti simili ad array . Ciò che hanno in comune con gli array reali è che hanno una proprietà length e proprietà denominate come numeri corrispondenti agli elementi dell'array. Gli esempi includono il DOM della raccolta NodeList e gli argomenti pseudo-array, disponibili all'interno di qualsiasi funzione/metodo.1. Utilizzo di metodi per eseguire iterazioni su array reali
Come minimo, la maggior parte, se non tutti, i metodi di iterazione su array reali possono essere utilizzati per eseguire iterazioni su oggetti simili ad array.I costrutti for e for...in possono essere applicati a oggetti simili ad array esattamente nello stesso modo in cui vengono applicati agli array reali.
ForEach e altri metodi Array.prototype si applicano anche a oggetti simili ad array. Per fare ciò è necessario utilizzare Function.call o Function.apply .
Ad esempio, se desideri applicare forEach alla proprietà childNodes di un oggetto Node, dovresti farlo in questo modo:
Array.prototype.forEach.call(node.childNodes, function(child) ( // fai qualcosa con l'oggetto figlio));
Per rendere questo trucco più facile da riutilizzare, puoi dichiarare un riferimento al metodo Array.prototype.forEach in una variabile separata e usarlo come scorciatoia:
// (Supponendo che tutto il codice seguente rientri nello stesso ambito) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // fai qualcosa con l'oggetto figlio));
Se un oggetto simile ad un array ha un iteratore, può essere utilizzato esplicitamente o implicitamente per eseguire l'iterazione sull'oggetto allo stesso modo degli array reali.
2. Convertire in un array reale
Esiste anche un altro modo molto semplice per eseguire l'iterazione su un oggetto simile ad un array: convertirlo in un array reale e utilizzare uno qualsiasi dei metodi discussi sopra per eseguire l'iterazione su array reali. Per la conversione, è possibile utilizzare il metodo generico Array.prototype.slice, che può essere applicato a qualsiasi oggetto simile ad un array. Questo viene fatto in modo molto semplice, come mostrato nell’esempio seguente:Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Ad esempio, se volessi convertire una raccolta NodeList in un array vero e proprio, avresti bisogno di un codice simile a questo:
Var div = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Aggiornamento: Come notato nei commenti
Impariamo come indicizzare gli array in js, rimuovere e aggiungere i loro elementi.
Un array in JavaScript è un oggetto globale progettato per memorizzare un elenco di valori.
È simile ad altre variabili in quanto può memorizzare qualsiasi tipo di dati. Ma un array presenta 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 il 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 diverso tipo: numeri, stringhe, elementi logici e persino oggetti o altri array.
L'ordine degli elementi dell'array inizia da 0. Risulta che l'array avrà sempre un indice sfalsato di uno: il primo elemento avrà indice 0, il secondo 1, ecc.
Ecco un esempio di un array con elementi di diverso tipo:
Creare (dichiarare) un array
Gli array sono molto convenienti perché possono memorizzare tutti i dati di cui hai bisogno. La dimensione massima possibile di un 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.
Notazione breve: utilizzo delle 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 è compreso tra parentesi quadre. Ogni valore è separato da una virgola.
I valori sono specificati allo stesso modo delle variabili semplici, ovvero le stringhe devono essere dichiarate racchiuse tra virgolette, ecc.
Per dichiarare un array vuoto, lasciare vuote le parentesi:
var mioArray = ;
Voce 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 saranno presenti nel tuo array, puoi passare immediatamente questo valore al costruttore.
var mioArray = nuovo Array(80);
L'espressione precedente creerà un array vuoto composto da 80 slot con valori non definiti.
Dichiarare un array vuoto:
var mioArray = nuovo Array();
Accesso agli elementi dell'array
Utilizzando l'indice di ciascun elemento, puoi lavorare con qualsiasi dato nell'array, accedendovi utilizzando l'operatore:
var myArray = ["Jack", "Sawyer", "John", "Desmond"]; console.log(mioArray); // Stampa "Jack" console.log(myArray); // Stampa “Desmond”
Un array può avere più livelli, ovvero ogni elemento può essere esso stesso un array. Il risultato sarà un array js bidimensionale. Come possiamo accedere a questi array che si trovano all'interno degli altri - " array multidimensionali»?
Ad esempio, consideriamo un array che rappresenta una famiglia. I figli di questa famiglia vengono registrati in un array separato all'interno di quello principale:
var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];
Puoi immaginarlo così:
Per fare riferimento al valore "Lisa":
var lisa = familyArray; console.log(lisa); // visualizza "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 capito come accedere agli elementi dell'array utilizzando i loro indici corrispondenti. In modo analogo è possibile aggiungere (o modificare) elementi dichiarando, ad esempio:
var myArray = ["Kate", "Sole"]; myArray = "Giulietta"; console.log(mioArray); // Stampa "Kate, Sun, Juliet"
Cosa succede se dichiaro un elemento con un indice che non ha altri elementi prima di esso? L'array stesso creerà tutti gli elementi mancanti e assegnerà loro il valore unfine:
var myArray = ["Kate", "Sole"]; myArray = "Giulietta"; console.log(myArray.lunghezza); // Stampa "6" console.log(myArray); // Stampa ["Kate", "Sung", undefinito, undefinito, undefinito, "Juliet"]
Puoi scoprire qual è la lunghezza di un array js utilizzando 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 unfine .
metodo push()
Utilizzando il metodo push(), puoi aggiungere uno o più elementi a un array js. Push() accetta un numero illimitato di parametri, i quali verranno tutti 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 ); // Stampa ["Kate", "Presto", "Juliet", "Libby", "Shannon"]
metodo unshift()
Il metodo unshift() funziona allo stesso modo di push(), tranne 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); // Risultati ["Libby", "Shannon", "Juliet", "Kate", "Presto"]
Rimozione di 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); // Stampa ["Sawyer", "John", "Desmond"]
metodo splice()
Usando il metodo splice(), puoi rimuovere o aggiungere elementi a un array, specificando accuratamente l'indice 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(fruttaArray); // Risultati ["mela", "pesca", "melone", "banana", "arancia", "limone", "lime", "ciliegia"]
Il primo parametro del metodo splice() è l'indice. Indica in quale posizione gli elementi devono essere aggiunti/rimossi. Nel nostro esempio, abbiamo scelto l'indice 2 ( che significa "arancione").
Il secondo parametro è il numero di elementi che devono essere rimossi. Abbiamo specificato un valore pari a 0, quindi nulla verrà eliminato.
I seguenti parametri sono facoltativi. Aggiungono nuovi valori all'array. Nel nostro caso dobbiamo aggiungere “melone” e “banana”, iniziando dall’indice 2.
