15 metodi di array JavaScript che dovresti padroneggiare oggi

15 metodi di array JavaScript che dovresti padroneggiare oggi

Gli sviluppatori Web di tutti i livelli, dai programmatori principianti agli esperti di programmazione, arrivano a vedere l'importanza di JavaScript nello sviluppo di siti Web moderni. JavaScript è così dominante che è un'abilità essenziale sapere se creerai app web.





Uno degli elementi costitutivi più potenti integrati nel linguaggio JavaScript sono gli array. Gli array si trovano comunemente in molti linguaggi di programmazione e sono utili per la memorizzazione dei dati.





JavaScript include anche funzioni utili note come metodi array. Qui ci sono quindici che dovresti dare un'occhiata da vicino per far crescere le tue capacità di sviluppatore.





Cosa sono i metodi array?

Metodi di matrice sono funzioni integrate in JavaScript che puoi applicare ai tuoi array. Ogni metodo ha una funzione univoca che esegue una modifica o un calcolo sull'array, evitando di dover codificare funzioni comuni da zero.

I metodi dell'array in JavaScript vengono eseguiti utilizzando una notazione a punti allegata alla variabile dell'array. Poiché sono solo funzioni JavaScript, terminano sempre con parentesi che possono contenere argomenti opzionali. Ecco un metodo collegato a un semplice array chiamato myArray .



let myArray = [1,2,3]; myArray.pop();

Questo codice applicherebbe un metodo chiamato pop all'array.

Esempio di matrice

Per ogni esempio, usa un array di esempio che chiameremo myArray , per eseguire i metodi su. Sentiti libero di aprire la tua console e programmare.





let myArray = [2,4,5,7,9,12,14];

Questi esempi presumeranno che tu conosca le fondamenta di cos'è JavaScript e come funziona . Se non lo fai va bene, siamo tutti qui per imparare e crescere.

Scava in questi quindici potenti metodi di array!





1. Array.push()

Cosa fa: spingere() prende il tuo array e aggiunge uno o più elementi alla fine dell'array, quindi restituisce la nuova lunghezza dell'array. Questo metodo modificherà l'array esistente.

Aggiungi il numero 20 all'array eseguendo spingere() , usando 20 come argomento.

let myArray = [2,4,5,7,9,12,14];
myArray.push(20);

Controlla se ha funzionato:

console.log(myArray); [2,4,5,7,9,12,14,20]

correndo il spingere() Il metodo su myArray ha aggiunto il valore fornito nell'argomento nell'array. In questo caso, 20. Quando controlli myArray nella console, vedrai che il valore è ora aggiunto alla fine dell'array.

2. Array.concat()

Cosa fa: concat() può unire due o più array in un nuovo array. Non modifica gli array esistenti ma ne crea uno nuovo.

Prendere myArray e unisci un array chiamato nuovoArray dentro.

let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray);
console.log(result); [2,4,5,7,9,12,14,1,2,3]

Questo metodo fa miracoli quando si tratta di più array o valori che è necessario combinare, il tutto in un passaggio piuttosto semplice quando si utilizzano le variabili.

3. Array.join()

Cosa fa: aderire() prende un array e concatena il contenuto dell'array, separato da una virgola. Il risultato viene inserito in una stringa. È possibile specificare un separatore se si desidera utilizzare un'alternativa alla virgola.

Dai un'occhiata a come funziona usando myArray. Prima usando il metodo predefinito senza argomento separatore, che utilizzerà una virgola.

let myArray = [2,4,5,7,9,12,14];
myArray.join();
'2,4,5,7,9,12,14'

JavaScript produrrà una stringa, con ogni valore nell'array separato da una virgola. È possibile utilizzare un argomento nella funzione per modificare il separatore. Osservalo con due argomenti: un singolo spazio e una stringa.

myArray.join(' ');
'2 4 5 7 9 12 14'
myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'

Il primo esempio è uno spazio, creando una stringa facilmente leggibile.

Il secondo esempio usa (' e ') , e ci sono due cose da sapere qui.

Innanzitutto, usiamo la parola 'e' per separare i valori. In secondo luogo, c'è uno spazio su entrambi i lati della parola 'e'. Questa è una cosa importante da tenere a mente quando si utilizza aderire() . JavaScript legge gli argomenti letteralmente; quindi se questo spazio viene tralasciato, tutto verrà accartocciato insieme (es. '2and4and5...' ecc.) Un output non molto leggibile!

4. Array.forEach()

Cosa fa: per ciascuno() (maiuscole/minuscole!) esegue una funzione su ogni elemento dell'array. Questa funzione è qualsiasi funzione che crei, simile all'utilizzo di un ciclo 'for' per applicare una funzione a un array ma con molto meno lavoro da codificare.

C'è un po' di più da per ciascuno() ; guarda la sintassi, quindi esegui una semplice funzione per dimostrare.


myArray.forEach(function(item){
//code
});

stiamo usando myArray , per ciascuno() si applica con la notazione a punti. Metti la funzione che desideri utilizzare all'interno della parentesi dell'argomento, che è funzione (oggetto) nell'esempio.

Date un'occhiata al funzione (oggetto) . Questa è la funzione eseguita all'interno di forEach() e ha il suo argomento. Stiamo chiamando l'argomento articolo . Ci sono due cose da sapere su questo argomento:

  • Quando forEach() esegue il loop sull'array, applica il codice a questo argomento. Pensala come una variabile temporanea che contiene l'elemento corrente.
  • Scegli il nome dell'argomento, può essere chiamato come vuoi. In genere questo sarebbe chiamato qualcosa che lo rende più facile da capire, come 'elemento' o 'elemento'.

Con queste due cose in mente, dai un'occhiata a questo semplice esempio. Aggiungi 15 a ogni valore e fai in modo che la console mostri il risultato.


myArray.forEach(function(item){
console.log(item + 15);
});

stiamo usando articolo in questo esempio come variabile, quindi la funzione viene scritta per aggiungere 15 a ciascun valore tramite articolo . La console quindi stampa i risultati. Ecco come appare in una console di Google Chrome.

Il risultato è ogni numero nell'array, ma con l'aggiunta di 15!

5. Mappa array ()

Cosa fa: carta geografica() esegue una funzione su ogni elemento dell'array e inserisce il risultato in un nuovo array.

L'esecuzione di una funzione su ogni elemento suona come forEach(). La differenza qui è carta geografica() crea un nuovo array quando viene eseguito. forEach() non crea automaticamente un nuovo array, dovresti codificare una funzione specifica per farlo.

Usa map() per raddoppiare il valore di ogni elemento in myArray e mettili in un nuovo array. Vedrai lo stesso funzione (oggetto) sintassi per un po' più di pratica.

let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});

Controlla i risultati nella console.

console.log(doubleArray); [4,8,10,14,18,24,28]

myArray è invariato:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift()

Che cosa fa: simile a come funziona il metodo push(), il unshift() Il metodo prende il tuo array e aggiunge uno o più elementi all'inizio dell'array invece che alla fine e restituisce la nuova lunghezza dell'array. Questo metodo modificherà l'array esistente.

let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);

Registrando l'array sulla console, dovresti vedere il numero 0 all'inizio dell'array.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort()

Che cosa fa: l'ordinamento è una delle operazioni più comuni eseguite su un array ed è molto utile. JavaScript ordinare() array può essere utilizzato per ordinare un array di numeri o anche stringhe con una sola riga di codice. Questa operazione è a posto e restituisce l'array ordinato modificando l'array iniziale. Prendi un diverso insieme di numeri per myArray questa volta.

let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);

Poiché l'ordinamento viene eseguito sul posto, non è necessario dichiarare una variabile separata per l'array ordinato.

console.log(myArray); [10, 12, 34, 55, 65]

Per impostazione predefinita, l'array è ordinato in ordine crescente, ma puoi opzionalmente passare una funzione personalizzata a ordinare() metodo per ordinare l'array nel modo desiderato. In questo caso, ho passato una consuetudine funzione freccia per ordinare l'array numericamente in ordine crescente.

8. Array.reverse()

Che cosa fa: come suggerisce il nome, il inversione() Il metodo viene utilizzato per invertire l'ordine degli elementi nell'array. Nota che questo non inverte il contenuto dell'array ma solo l'ordine stesso. Ecco un esempio per capire meglio questo metodo:

let myArray = [2,4,5,7,9,12,14];
myArray.reverse()

Registrare l'output nella console per verificare l'operazione.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

Come puoi vedere, l'ordine degli elementi è stato invertito. In precedenza, l'elemento all'ultimo indice (elemento 14 all'indice 6) è ora l'elemento all'indice zero e così via.

9. Array.slice()

Cosa fa: fetta() viene utilizzato per recuperare una copia superficiale di una porzione di un array. In termini più semplici, questo metodo consente di selezionare elementi specifici da un array in base al loro indice. È possibile passare l'indice iniziale dell'elemento da cui si desidera recuperare e gli elementi e, facoltativamente, anche l'indice finale.

Se non fornisci l'indice di fine, verranno recuperati tutti gli elementi dall'indice di inizio alla fine dell'array. Questo metodo restituisce un nuovo array e non modifica quello esistente.

let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);

Nel codice sopra, vengono recuperati tutti gli elementi dal secondo indice all'ultimo indice poiché il parametro dell'indice finale non viene passato. Registra entrambi gli array sulla console.

console.log(myArray);
console.log(slicedArray);
[2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]

Evidentemente, l'array iniziale non viene modificato dal metodo slice() e restituisce invece un nuovo array che è memorizzato nel slicedArray variabile. Ecco un esempio in cui il parametro end index viene passato anche a fetta() metodo.

let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray);
[4, 5]

10. Array.splice()

Cosa fa: giunzione() è un utile metodo di array utilizzato per rimuovere o sostituire elementi nell'array in atto. Specificando l'indice e il numero di elementi da eliminare, modifica l'array.

let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);

Nell'esempio sopra, il myArray l'array viene unito dall'indice 2 e 3 elementi vengono rimossi da esso. L'array ora è composto da:

[2, 4, 12, 14]

Per sostituire gli elementi invece di eliminarli, puoi passare un numero qualsiasi di parametri facoltativi con gli elementi con cui vuoi sostituire, in questo modo:

il disco selezionato è dello stile di partizione gpt
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray);
[2, 4, 1, 2, 3, 12, 14]

11. Filtro.array()

Cosa fa: Il filtro() Il metodo è un utile metodo array che accetta una funzione contenente un test e restituisce un nuovo array con tutti gli elementi che superano quel test. Fedele al suo nome, questo metodo viene utilizzato per filtrare gli elementi necessari dagli altri elementi. Il filtraggio viene eseguito utilizzando una funzione che restituisce un valore booleano.

Ecco un esempio di filtro() metodo utilizzato per ottenere solo quegli elementi dall'array che sono divisibili per 2.

let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);

Nell'esempio sopra, una funzione freccia viene passata come parametro che prende ogni numero dall'array originale e controlla se è divisibile per 2 usando il modulo ( % ) e uguaglianza ( === ) operatore. Ecco come appare l'output:

[2, 4, 12, 14]

12. Array.riduci()

Cosa fa: ridurre() è un metodo array che accetta una funzione reducer e la esegue su ciascun elemento dell'array per produrre un singolo valore durante la restituzione. Prende una funzione di riduzione con una variabile accumulatore e una variabile dell'elemento corrente come parametri richiesti. Il valore dell'accumulatore viene ricordato in tutte le iterazioni e alla fine viene restituito dopo l'iterazione finale.

Un caso d'uso comune di questo metodo è calcolare la somma di tutti gli elementi nell'array. L'implementazione di questa funzionalità è la seguente:

let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

0 viene passato come secondo parametro nell'esempio precedente, che viene utilizzato come valore iniziale della variabile dell'accumulatore. Il sumOfNums variabile conterrà il valore di ritorno di ridurre() metodo che dovrebbe essere la somma di tutti gli elementi nell'array.

console.log(sumOfNums); 53

13. Array.include()

Che cosa fa: la ricerca di un elemento in un array per verificare se è presente è un'operazione che viene utilizzata abbastanza frequentemente e quindi JavaScript ha un metodo integrato per questo sotto forma di include() metodo array. Ecco come puoi usarlo:

let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));

Questo metodo accetta un parametro obbligatorio, l'elemento da cercare e un parametro facoltativo, l'indice dell'array da cui iniziare la ricerca. A seconda che quell'elemento sia presente o meno, tornerà vero o falso rispettivamente. Pertanto, l'output sarà:

true
false
true
false

14. Array.indexOf()

Cosa fa: indice di() Il metodo viene utilizzato per scoprire l'indice in corrispondenza del quale è possibile trovare la prima occorrenza di un elemento specificato nell'array. Sebbene sia simile al metodo include(), questo metodo restituisce l'indice numerico o -1 se l'elemento non è presente nell'array.

let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));

indice di() Il metodo utilizza la stretta uguaglianza per verificare se un elemento è presente, il che significa che il valore, così come il tipo di dati, dovrebbe essere lo stesso. Il secondo parametro facoltativo prende l'indice da cui iniziare la ricerca. In base a questi criteri, l'output sarà simile a questo:

1
-1
4

15. Array.fill()

Che cosa fa: spesso, potrebbe essere necessario impostare tutti i valori nell'array su un valore statico come 0. Invece di utilizzare un ciclo, puoi provare il riempire() metodo per lo stesso scopo. È possibile chiamare questo metodo su un array con 1 parametro obbligatorio: il valore con cui riempire l'array e 2 parametri opzionali: l'indice iniziale e finale da riempire. Questo metodo modifica l'array in uscita.

let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);

Registrando l'output sulla console, vedrai:

console.log(array1);
console.log(array2);
console.log(array3);
[0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]

Passi successivi nel tuo viaggio JavaScript

Gli array sono una parte potente del linguaggio JavaScript, motivo per cui ci sono così tanti metodi integrati per semplificarti la vita come sviluppatore. Il modo migliore per padroneggiare questi quindici metodi è esercitarsi.

Mentre continui a imparare JavaScript, MDN è una grande risorsa per la documentazione dettagliata. Mettiti comodo nella console, quindi migliora le tue abilità con i migliori editor JavaScript per programmatori. Pronto a costruire il tuo sito web con JavaScript? Perché non dare un'occhiata ad alcuni framework che puoi prendere in considerazione.

Condividere Condividere Tweet E-mail 6 framework JavaScript che vale la pena imparare

Ci sono molti framework JavaScript là fuori per aiutare con lo sviluppo. Ecco alcuni che dovresti sapere.

Leggi Avanti
Argomenti correlati
  • Programmazione
  • JavaScript
  • Suggerimenti per la codifica
Circa l'autore Nitin Ranganath(31 articoli pubblicati)

Nitin è un appassionato sviluppatore di software e uno studente di ingegneria informatica che sviluppa applicazioni web utilizzando le tecnologie JavaScript. Lavora come sviluppatore web freelance e gli piace scrivere per Linux e Programmazione nel suo tempo libero.

Altro da Nitin Ranganath

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti