5 metodi di array JavaScript che dovresti padroneggiare oggi
Gli sviluppatori Web di tutti i livelli di competenza, dai programmatori principianti agli esperti di programmazione, vengono a conoscenza dell'importanza di JavaScript nello sviluppo di siti Web moderni. JavaScript è così dominante che è un'abilità essenziale sapere se hai intenzione di creare app.
Uno degli elementi costitutivi più potenti integrati nel linguaggio JavaScript sono gli array. Le matrici si trovano comunemente in molti linguaggi di programmazione e sono utili per la memorizzazione dei dati.
JavaScript utilizza array ma aggiunge utili funzionalità note come metodi array. Ci sono cinque che dovresti dare un'occhiata da vicino per far crescere le tue abilità come sviluppatore.
Quali sono i metodi array?
I metodi di matrice sono funzioni integrate in JavaScript che è possibile applicare alle proprie matrici. Ogni metodo ha una funzione unica che esegue una modifica o un calcolo sull'array, evitando di dover ricorrere a funzioni comuni da zero.
I metodi di matrice in JavaScript vengono eseguiti utilizzando una notazione a punti allegata alla variabile di matrice. Poiché sono solo funzioni JavaScript, finiscono sempre con una parentesi che può contenere argomenti opzionali. Ecco un metodo collegato a un semplice array chiamato myArray .
var myArray = [1,2,3]; myArray.pop(); Questo codice applica un metodo chiamato pop all'array.
Matrice di esempio
Per ogni esempio usiamo un array di esempio che chiameremo myArray , per eseguire i metodi. Sentiti libero di recuperare la tua console e il tuo codice mentre procediamo.
var myArray = [2,4,5,7,9,12,14]; Questi esempi presumono che tu sappia le basi di ciò che JavaScript è e come funziona . In caso contrario, siamo tutti qui per imparare e crescere.
Scaviamo in cinque potenti metodi!
1. Array.push ()
Cosa fa: push () prende l'array e aggiunge uno o più elementi alla fine dell'array, quindi restituisce la nuova lunghezza dell'array. Questo metodo modificherà l'array esistente.
Aggiungiamo il numero 20 all'array eseguendo push () , usando 20 come argomento.
var myArray = [2,4,5,7,9,12,14]; myArray.push(20); Vediamo se ha funzionato
console.log(myArray); [2,4,5,7,9,12,14,20] L'esecuzione del metodo push () su myArray ha aggiunto l'array al valore indicato nell'argomento. In questo caso, 20. Quando controlli myArray nella console, vedrai che il valore viene ora aggiunto alla fine dell'array.
2. Array.concat ()
Che cosa fa: concat () può unire due o più array in un nuovo array. Non modifica gli array esistenti ma ne crea uno nuovo.
Prendiamo myArray e uniamo un array chiamato newArray in esso.
var myArray = [2,4,5,7,9,12,14]; var newArray = [1,2,3]; var result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3] Questo metodo fa miracoli quando si hanno a che fare con più array o valori che è necessario combinare, tutto in un solo passaggio quando si utilizzano le variabili.
3. Array.join ()
Cosa fa: join () prende un array e concatena i contenuti dell'array, separati da una virgola. Il risultato viene inserito in una stringa. È possibile specificare un separatore se si desidera utilizzare un'alternativa a una virgola.
Diamo un'occhiata a come funziona usando myArray. Innanzitutto, utilizza il metodo predefinito senza argomento separatore, che utilizzerà una virgola.
var myArray = [2,4,5,7,9,12,14]; myArray.join(); "2,4,5,7,9,12,14" JavaScript genererà una stringa, con ogni valore nella matrice separato da una virgola. È possibile utilizzare un argomento nella funzione per modificare il separatore. Vediamolo 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, che crea una stringa che puoi leggere facilmente.
Il secondo esempio usa ('e') , e ci sono due cose da sapere qui.
Innanzitutto, stiamo usando 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 join () . JavaScript legge letteralmente gli argomenti, quindi se questo spazio viene lasciato fuori, tutto verrà scricchiolato insieme (ad es. "2and4and5 …" ecc.) Non un risultato molto leggibile!
4. Array.forEach ()
Cosa fa: forEach () (distinzione tra maiuscole e minuscole!) Esegue una funzione su ciascun elemento dell'array. Questa funzione è qualsiasi funzione creata dall'utente, simile all'utilizzo di un ciclo "for" per applicare una funzione a un array ma con molto meno lavoro sul codice.
C'è un po 'di più in forEach (), quindi diamo un'occhiata alla sintassi, quindi eseguiamo una semplice funzione per dimostrare.
myArray.forEach(function(item){ //code }); Stiamo usando myArray , forEach () viene applicato con la notazione punto. Inserire la funzione che si desidera utilizzare all'interno della parentesi argomento, che è la funzione (oggetto) nell'esempio.
Parliamo di funzione (oggetto) . Questa è la funzione eseguita all'interno di forEach () e ha il suo argomento. Stiamo chiamando l' elemento argomento. Ci sono due cose da sapere su questo argomento:
- Quando forEach () esegue il loop sull'array, applica il codice a questo argomento. Pensalo come una variabile temporanea che contiene l'elemento corrente.
- Scegli il nome dell'argomento, può essere nominato come vuoi. In genere questo sarebbe chiamato qualcosa che lo rende più facile da capire, come "oggetto" o "elemento".
Con queste due cose in mente, vediamo un semplice esempio. Aggiungiamo 15 per ogni valore e facciamo in modo che la console mostri il risultato.
myArray.forEach(function(item){ console.log(item + 15); }); In questo esempio stiamo usando item come variabile, quindi la funzione è scritta per aggiungere 15 a ciascun valore tramite item . La console quindi stampa i risultati. Ecco come appare in una console di Google Chrome.
Il risultato è ogni numer
o nell'array, ma con 15 aggiunti ad esso!
5. Array.map ()
Cosa fa: map () 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 è che map () crea un nuovo array quando viene eseguito. ForEach () non crea automaticamente un nuovo array, per farlo dovrai codificare una funzione specifica.
Usiamo map () per raddoppiare il valore di ogni elemento in myArray e inserirli in un nuovo array. Vedrai la stessa sintassi della funzione (oggetto) per un po 'più di pratica.
var myArray = [2,4,5,7,9,12,14]; var doubleArray = myArray.map(function(item){ return item * 2; }); Controlliamo 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] I prossimi passi 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 cinque metodi è esercitarsi.
Mentre continui a imparare JavaScript, MDN è un'ottima risorsa per la documentazione dettagliata. Mettiti comodo nella console, quindi migliora le tue abilità con i migliori editor JavaScript per programmatori . Buona programmazione!
Leggi l'articolo completo: 5 metodi di array JavaScript che dovresti padroneggiare oggi
