ARRAY IN JAVASCRIPT
Tramite gli oggetti possiamo memorizzare dei valori a cui si accede con la relativa chiave. Spesso però abbiamo bisogno di memorizzare un insieme ordinato di valori per farlo utilizziamo gli array. In Javascript gli array così come le funzioni sono oggetti, e dato che sono aggetti possiamo aggiungere delle proprietà.
METODI SUGLI ARRAY
Il codice riportato sotto illustra, come si diceva nell’introduzione, che anche gli array sono oggetti.
CONSTRUCTOR FUNCTION ARRAY
Vediamo dalla figura in basso che nel prototype della constructor function Array ci sono molti metodi per lavorare con gli array; quindi, prima di scrivere una funzione è bene assicurarsi che non ne esista già una.
ALCUNI METODI DEGLI ARRAY
Iniziamo a visionare tramite il codice sotto riportato alcuni dei metodi comuni degli array.
METODO MAP DEL PROTOTYPE
Quando dobbiamo effettuare una operazione per ogni elemento di un array, possiamo utilizzare il metodo map. Il metodo map può essere molto utile quando abbiamo un array di oggetti e vogliamo recuperare il valore di una determinata chiave.
METODO FILTER
Quando vogliamo creare un array con gli elementi filtrati da un altro array, usiamo il metodo filter. La differenza rispetto a map è che la callback passata in input deve restituire true o false. Se restituisce true quell’elemento viene inserito nel nuovo array e viceversa.
METODO REDUCE
Il metodo reduce riduce tutti gli elementi di un array a un singolo valore. La callback è un po’ diversa, riceve come primo valore un accumulatore ossia gli elementi ritornati e come secondo il valore corrente dell’array iterato.
METODO SPLICE
Con splice possiamo inserire, rimuovere o sostituire gli elementi di un array. Il primo parametro è l’indice di inizio, con il secondo indichiamo quanti elementi vogliamo eliminare nel caso di eliminazione, e dal terzo elemento in poi quanti ne vogliamo aggiungere.
METODO SORT
Per ordinare un array abbiamo a disposizione il metodo sort. sort converte gli elementi in stringa ed effettua un confronto Unicode delle unità a 16 bit.
METODO FILL
Il metodo fill modifica un array assegnando un valore specifico a uno o a tutti gli elementi.
METODI EVERY E SOME
Con some possiamo controllare se almeno un elemento di un array supera una verifica. Ad esempio, vogliamo sapere se un elemento di un array è il valore due. Con il metodo every vogliamo sapere se tutti gli elementi di un array superano una nostra verifica.
METODO FROM DI ARRAY
Il metodo array.from crea un oggetto da un array like.
EFFETTUARE UNA DEEP COPY
Il codice sotto riportato illustra come fare una copia in profondità di un array (Deep Copy).
APPROFONDIMENTO AI
Array.prototype.map()
Descrizione
Il metodo map() è uno dei metodi più utilizzati e versatili per lavorare con gli array in JavaScript. Consente di iterare su ogni elemento di un array e di trasformarlo in qualcosa di nuovo, restituendo un nuovo array di uguale lunghezza. Ogni elemento dell’array originale viene passato a una funzione che esegue la trasformazione e il risultato di tale funzione viene inserito nel nuovo array.
Caratteristiche principali:
•Non modifica l’array originale; crea sempre un nuovo array.
•La lunghezza del nuovo array è sempre uguale a quella dell’array originale.
•È immutabile: l’array originale non viene alterato.
•Viene comunemente utilizzato quando si vuole trasformare un array senza mutarlo direttamente.
Sintassi
const nuovoArray = array.map((elementoCorrente, indice, array) => {
// Trasformazione dell’elemento corrente
return nuovoElemento;
});
•elementoCorrente: Ogni elemento dell’array durante l’iterazione.
•indice: (opzionale) L’indice dell’elemento corrente.
•array: (opzionale) L’array originale su cui si sta iterando.
•Restituisce: Un nuovo array con il risultato della trasformazione per ogni elemento.
Esempio di base
Immagina di avere un array di numeri e voler ottenere un nuovo array che contiene il doppio di ogni numero:
const numeri = [1, 2, 3, 4];
const doppi = numeri.map(num => num * 2);
console.log(doppi); // [2, 4, 6, 8]
In questo caso, per ogni numero nell’array, la funzione num * 2 viene applicata e il risultato viene aggiunto al nuovo array.
Funzione con più parametri
Puoi utilizzare anche l’indice o l’array originale nella funzione di callback per avere maggiore controllo:
const numeri = [1, 2, 3, 4];
const conIndici = numeri.map((num, index) => num * index);
console.log(conIndici); // [0, 2, 6, 12]
Qui la funzione moltiplica ogni numero per il suo indice nell’array.
Esempio con oggetti
Se hai un array di oggetti e vuoi trasformare uno dei loro campi, map() è estremamente utile. Ad esempio:
const utenti = [
{ nome: ‘Mario‘, età: 30 },
{ nome: ‘Giulia‘, età: 25 },
{ nome: ‘Luca‘, età: 40 }
];
const nomi = utenti.map(utente => utente.nome);
console.log(nomi); // [‘Mario’, ‘Giulia’, ‘Luca’]
Qui viene creato un nuovo array contenente solo i nomi degli utenti.
Chaining
map() può essere combinato con altri metodi degli array come filter() o reduce() per eseguire operazioni più complesse in una singola catena. Ad esempio:
const numeri = [1, 2, 3, 4, 5, 6];
const quadratiPari = numeri
.filter(num => num % 2 === 0) // Filtra i numeri pari
.map(num => num ** 2); // Eleva al quadrato i numeri pari
console.log(quadratiPari); // [4, 16, 36]
In questo esempio, prima viene filtrato l’array per ottenere solo i numeri pari e poi vengono trasformati al quadrato.
Differenze con forEach()
Sebbene forEach() possa sembrare simile a map(), ci sono delle differenze importanti:
•forEach(): esegue una funzione per ogni elemento ma non restituisce nulla.
•map(): esegue una funzione su ogni elemento e restituisce un nuovo array con i risultati.
Esempio con forEach():
const numeri = [1, 2, 3];
numeri.forEach(num => console.log(num * 2)); // Stampa: 2, 4, 6
// Ma non restituisce un nuovo array.
Performance
map() è generalmente efficiente, ma crea sempre un nuovo array in memoria. Se non hai bisogno di un nuovo array, e vuoi solo iterare e eseguire un’azione su ogni elemento, è più indicato utilizzare forEach().
Conclusioni
Il metodo map() è uno strumento estremamente potente per trasformare gli array in JavaScript in modo funzionale, mantenendo l’immutabilità dell’array originale. È particolarmente utile quando si lavora con dati trasformati o si vuole creare una rappresentazione diversa degli elementi di un array.
Array.prototype.reduce()
Descrizione
Il metodo reduce() in JavaScript consente di iterare su un array, eseguendo una funzione di callback su ogni elemento per ridurre l’array a un singolo valore. Questo metodo è particolarmente utile per eseguire operazioni cumulative o di aggregazione, come la somma di tutti gli elementi di un array, il calcolo di medie, la concatenazione di stringhe o la costruzione di oggetti.
Caratteristiche principali:
•Riduce un array a un singolo valore (che può essere un numero, un oggetto, una stringa, un array o altro).
•Può essere inizializzato con un valore iniziale opzionale.
•Non modifica l’array originale.
•Offre grande flessibilità perché l’accumulatore può essere di qualsiasi tipo (numero, array, oggetto, ecc.).
Sintassi
const risultato = array.reduce((accumulatore, elementoCorrente, indice, array) => {
// Operazione di riduzione
return nuovoAccumulatore;
}, valoreIniziale);
•accumulatore: Il valore cumulativo risultante dalle iterazioni precedenti. Durante la prima iterazione, è uguale al valoreIniziale se fornito.
•elementoCorrente: L’elemento dell’array su cui la funzione sta attualmente operando.
•indice (opzionale): L’indice corrente dell’elemento nell’array.
•array (opzionale): L’array originale su cui si sta iterando.
•valoreIniziale (opzionale): Il valore con cui si inizia l’operazione di riduzione. Se omesso, l’accumulatore inizialmente assume il valore del primo elemento dell’array, e l’iterazione parte dal secondo elemento.
Esempio di base
Immagina di avere un array di numeri e di voler sommare tutti i suoi elementi:
const numeri = [1, 2, 3, 4];
const somma = numeri.reduce((acc, num) => acc + num);
console.log(somma); // 10
In questo caso, il valore iniziale è 1 (il primo elemento dell’array) e l’iterazione parte dal secondo elemento (2).
Esempio con oggetti
reduce() può essere utilizzato per creare oggetti o eseguire aggregazioni complesse. Supponiamo di avere un array di oggetti utente e vogliamo contare quanti di loro hanno età superiore a 30:
const utenti = [
{ nome: ‘Mario‘, età: 32 },
{ nome: ‘Giulia‘, età: 25 },
{ nome: ‘Luca‘, età: 40 }
];
const numeroDiAdulti = utenti.reduce((acc, utente) => {
if (utente.età > 30) {
acc += 1;
}
return acc;
}, 0);
console.log(numeroDiAdulti); // 2
In questo esempio, reduce() somma 1 all’accumulatore ogni volta che un utente ha un’età maggiore di 30.
Esempio di concatenazione di stringhe
reduce() può essere utilizzato anche per concatenare stringhe. Ad esempio, possiamo unire tutte le parole in una frase:
const parole = [‘Reduce‘, ‘è‘, ‘un‘, ‘metodo‘, ‘potente‘];
const frase = parole.reduce((acc, parola) => acc + ‘ ‘ + parola);
console.log(frase); // “Reduce è un metodo potente”
Array annidati (Flattening)
Un uso comune di reduce() è appiattire array annidati (nested arrays):
const arrayAnnidato = [[1, 2], [3, 4], [5, 6]];
const arrayPiatto = arrayAnnidato.reduce((acc, curr) => acc.concat(curr), []);
console.log(arrayPiatto); // [1, 2, 3, 4, 5, 6]
Qui, reduce() viene utilizzato per concatenare gli array interni in un singolo array piatto.
Esempio avanzato: Creazione di un oggetto da un array
Supponiamo di avere un array di coppie chiave-valore e vogliamo trasformarlo in un oggetto:
const coppie = [[‘nome‘, ‘Mario‘], [‘età‘, 30], [‘città‘, ‘Roma‘]];
const oggetto = coppie.reduce((acc, [chiave, valore]) => {
acc[chiave] = valore;
return acc;
}, {});
console.log(oggetto); // { nome: ‘Mario’, età: 30, città: ‘Roma’ }
In questo esempio, reduce() trasforma un array di coppie chiave-valore in un oggetto.
Differenze con altri metodi
•map(): map() crea un nuovo array trasformando ogni elemento di un array, ma non riduce il tutto a un singolo valore come fa reduce().
•filter(): filter() crea un nuovo array con solo alcuni elementi in base a una condizione, mentre reduce() può combinare o trasformare gli elementi in un unico risultato.
•forEach(): forEach() esegue una funzione per ogni elemento, ma non restituisce nulla; reduce(), invece, restituisce un singolo valore.
Performance
reduce() può essere meno efficiente rispetto a metodi più semplici come forEach() o map() per operazioni su array di grandi dimensioni, poiché implica una funzione di callback per ogni iterazione. Tuttavia, per operazioni cumulative o complesse (come la trasformazione di un array in un oggetto), è uno degli strumenti più potenti in JavaScript.
Conclusione
Il metodo reduce() è un potente strumento per eseguire trasformazioni complesse e operazioni cumulative sugli array in JavaScript. È molto flessibile e può essere utilizzato per ridurre un array a un singolo valore di qualsiasi tipo, offrendo un controllo dettagliato su come gli elementi vengono combinati.
Array.prototype.fill()
•Descrizione: Il metodo fill() riempie tutti gli elementi di un array da un indice iniziale a uno finale con un valore statico.
•Uso: Viene utilizzato per sovrascrivere gli elementi di un array con un valore specifico.
•Sintassi:
array.fill(valore, inizio, fine);
•Esempio:
const numeri = [1, 2, 3, 4];
numeri.fill(0, 1, 3); // [1, 0, 0, 4]
Array.prototype.splice()
•Descrizione: Il metodo splice() modifica il contenuto di un array rimuovendo, sostituendo o aggiungendo elementi.
•Uso: Viene utilizzato per manipolare direttamente il contenuto di un array.
•Sintassi:
array.splice(indiceInizio, numeroElementiDaRimuovere, elementoDaAggiungere1, elementoDaAggiungere2, …);
•Esempio:
const numeri = [1, 2, 3, 4];
numeri.splice(1, 2, 5, 6); // [1, 5, 6, 4]
Array.prototype.filter()
•Descrizione: Il metodo filter() crea un nuovo array con tutti gli elementi che passano il test implementato dalla funzione fornita.
•Uso: Viene utilizzato per creare un sottoinsieme di un array basato su una condizione.
•Sintassi:
const nuovoArray = array.filter((elementoCorrente, indice, array) => {
return condizione;
});
•Esempio:
const numeri = [1, 2, 3, 4];
const numeriGrandi = numeri.filter(num => num > 2); // [3, 4]
Array.prototype.sort()
•Descrizione: Il metodo sort() ordina gli elementi di un array in loco e restituisce l’array ordinato. Il default è ordinare gli elementi come stringhe.
•Uso: Viene utilizzato per ordinare un array, con un criterio personalizzato se necessario.
•Sintassi:
array.sort((a, b) => {
// comparazione
return a – b;
});
•Esempio:
const numeri = [4, 2, 3, 1];
numeri.sort((a, b) => a – b); // [1, 2, 3, 4]
Array.prototype.every()
•Descrizione: Il metodo every() verifica se tutti gli elementi di un array soddisfano una determinata condizione. Restituisce true se la condizione è soddisfatta per tutti gli elementi, altrimenti false.
•Uso: Viene utilizzato per controllare se tutti gli elementi di un array rispettano una condizione.
•Sintassi:
const tuttiVerificati = array.every((elementoCorrente, indice, array) => {
return condizione;
});
•Esempio:
const numeri = [2, 4, 6];
const tuttiPari = numeri.every(num => num % 2 === 0); // true
Array.prototype.some()
•Descrizione: Il metodo some() verifica se almeno un elemento dell’array soddisfa una determinata condizione. Restituisce true se almeno un elemento soddisfa la condizione, altrimenti false.
•Uso: Viene utilizzato per verificare se esiste almeno un elemento che rispetta una condizione.
•Sintassi:
const almenoUno = array.some((elementoCorrente, indice, array) => {
return condizione;
});
•Esempio:
const numeri = [1, 2, 3];
const haPari = numeri.some(num => num % 2 === 0); // true
Scrivi un commento