Metodi ES6
ES6, che è la forma breve di ECMAScript 6, è la versione di JavaScript che è stata rilasciata nel giugno 2015. Sembra che agli sviluppatori che mantengono JavaScript piaccia il mio mese di nascita, perché è quando la maggior parte delle loro versioni sono state rilasciate.
Se stai imparando JavaScript, ES6 ti renderà la vita molto più facile. Non fornisce solo metodi di array, ma anche cose come la destrutturazione, le funzioni freccia, un modo migliore per scrivere codice modulare e orientato agli oggetti, tra le altre cose.
La maggior parte di questi metodi di array ES6 prendono una funzione di callback, e come risultato sono chiamati metodi di array di ordine superiore. Le funzioni freccia sono molto comuni nelle funzioni di ordine superiore, poiché semplificano il nostro codice
Il metodo map
Se c’è un metodo di array ES6 che userai quasi sempre, è questo metodo. È il mio miglior metodo di array sia in JavaScript che in Python. Anche se alcuni sviluppatori JavaScript hanno cercato di implementare map prima di ES6, il metodo standard map è stato introdotto in JavaScript in ES6. Nel frammento di codice qui sotto, ho implementato il map in tre modi:
- Usando le normali funzioni JavaScript: Qui ho passato due argomenti alla funzione, prima
item, che è l’elemento su cui voglio fare qualcosa, e un argomento opzionale,index, che è l’indice di ogni elemento - Usando funzioni freccia: Ho anche passato due argomenti come nel primo esempio, ma la funzione di callback qui è una funzione freccia, che rende il codice molto più ordinato.
- Anche io ho usato funzioni freccia, ma ho passato un solo argomento – l’elemento su cui voglio iterare. Questo è utile se non ho bisogno dell’indice.
Il metodo filtro
Il metodo filter è un altro metodo di array di ordine superiore che dovresti usare oggi. Quello che fa filter è semplice. Dato un array di elementi, vogliamo restituire un nuovo array dall’array iniziale, dove una particolare condizione è true. La funzione di callback deve restituire un booleano, e l’elemento che obbedisce alla condizione è quello che sarà nel nuovo array.
Il metodo reduce
Questo è molto bello, e penso sia il più difficile di tutti i metodi che ho menzionato finora. Quello che fa questo metodo è usare un callback particolare per ridurre l’array. Per esempio, se voglio trovare la somma di tutti gli elementi di un array o il prodotto di tutti gli elementi di un array, questo metodo è un bel metodo da usare, invece di andare in loop e incrementare la somma o il prodotto iniziale.
Il metodo forEach
Questo metodo è simile al metodo map, ma in questo caso, non restituisce un nuovo array. È più un normale ciclo for in JavaScript, ma in un modo più pulito e avanzato. Prende tre parametri, come avrete capito. Il primo è l’elemento nell’array, il secondo è l’indice dell’elemento (che è opzionale), e il terzo è l’oggetto dell’array a cui appartiene l’elemento corrente.
Nello snippet di codice qui sotto, ho usato forEach per manipolare il Document Object Model (DOM), che è piuttosto figo. Posso aggiornare l’array, e gli elementi della lista resi sul DOM saranno cambiati automaticamente.
Il metodo concat
Ci sono casi in cui vorrete unire o unire due o più array insieme. Allora questa funzione sarà molto utile. Chiamando concat su due array si produce un nuovo array che consiste dei due array combinati.
I metodi every e some
Questi metodi sono utili se volete sapere se tutti gli elementi di un array passano una condizione e se alcuni degli elementi di un array passano una condizione, rispettivamente.
Altri metodi includono:
Il metodo fill
Colma ogni elemento dell’array con un valore passato come parametro: .fill(1) // .
Il metodo entries
Questo rende l’array come un oggetto con una coppia chiave-valore, dove la chiave è l’indice e il valore è l’elemento.
Il metodo find
Questo metodo restituisce il primo elemento di un array che supera un test. Prende una funzione di callback, che restituisce un booleano.
Il metodo splice
Questo metodo prende un numero infinito di parametri – i primi due sono l’indice in cui volete iniziare a inserire e rimuovere elementi e il numero di elementi che volete rimuovere, rispettivamente – e gli altri parametri sono gli elementi che volete aggiungere all’array. Restituisce un array degli elementi rimossi e muta l’array.
Il metodo reverse
Il metodo reverse inverte l’array. Notate che lo muta, cioè cambia l’array invece di crearne semplicemente la copia.
Il metodo join
Questo metodo trasforma un array in un array in una stringa. Notate che non muta l’array – crea solo una copia di esso. L’inverso di questo metodo è il metodo split, che trasforma una stringa in un array. Prende una stringa come parametro, che è ciò che sarà usato per unire ogni elemento dell’array.
Il metodo flat
Il metodo flat è un nuovo metodo che è stato aggiunto in ES11 (ES11 è stato creato questo giugno). Questo metodo appiattisce un array.
Diciamo che abbiamo un array che contiene un array, e vogliamo trovare la somma e il prodotto di ogni elemento negli array dentro l’array. Quello che voglio dire è che se ho un array che è definito da , ], la somma dovrebbe essere 10 e il prodotto dovrebbe essere 24.
Un modo per fare questo è fare un loop attraverso l’array iniziale e un loop attraverso ogni elemento e ottenere la somma e il prodotto.
Con ES6, posso fare un loop attraverso l’array iniziale e usare il metodo reduce per ottenere la somma e il prodotto di ogni elemento nell’array principale – usandolo per ottenere la somma e il prodotto totali. Ma con l’array flat, posso appiattire l’array principale, restituendo così un singolo array contenente solo numeri, e posso usare il metodo reduce su di esso.
Il metodo flatMap
Questo è la combinazione di flat e map. Esso mappa ogni elemento dell’array ad una data funzione di callback e poi appiattisce l’array risultante.
Diciamo che vorremmo ottenere il quadrato di ogni elemento in un array non appiattito, e vorremmo appiattirlo. Questo metodo ci renderà la vita più facile. Nella parte in cui ho usato il metodo flatMap nello snippet di codice qui sotto, prende un elemento che è un array, e ho restituito un nuovo array, che è il quadrato degli elementi. E infine, appiattisce l’array risultante.
