ARRAY IN JAVASCRIPT

JS

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.

Copy to Clipboard

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.

Prototype

ALCUNI METODI DEGLI ARRAY

Iniziamo a visionare tramite il codice sotto riportato alcuni dei metodi comuni degli array.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

METODO FILL

Il metodo fill modifica un array assegnando un valore specifico a uno o a tutti gli elementi.

Copy to Clipboard

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.

Copy to Clipboard

METODO FROM DI ARRAY

Il metodo array.from crea un oggetto da un array like.

Array-like

Copy to Clipboard

EFFETTUARE UNA DEEP COPY

Il codice sotto riportato illustra come fare una copia in profondità di un array (Deep Copy).

Copy to Clipboard

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

LINK AI POST PRECEDENTI

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB