VirtuaLE

Ripasso di JavaScript su Array: metodi map() filter() reduce() some() - uso del Set() e dello spread operator

Spiegazione del Codice JavaScript: Gestione di Array e Metodi Avanzati

Questo codice mostra come lavorare con gli array in JavaScript utilizzando diversi metodi per manipolare e analizzare i dati. Prendiamo come esempio un sistema di gestione prodotti di un supermercato.

Dati Iniziali

Il codice parte con tre array che rappresentano i dati di un inventario:

const prodotti = ["Pasta", "Latte", "Caffe", "Biscotti", "Mele", "Detersivo", "Pane", "Tonno"];
const prezzi = [1.20, 1.45, 3.90, 2.10, 2.60, 4.50, 1.10, 5.30];
const quantita = [2, 3, 1, 2, 1, 1, 4, 2];

Ogni prodotto ha una posizione corrispondente negli altri array: la Pasta (posizione 0) costa 1.20€ e ne abbiamo 2 pezzi.

Esercizio 1: Calcolo della Quantità Totale

Metodo Tradizionale con Ciclo For

let totaleArticoli = 0;
for(let i = 0; i<quantita.length; i++){
    totaleArticoli += quantita[i];
}

Questo ciclo:

  • Inizializza una variabile totaleArticoli a 0
  • Scorre tutti gli elementi dell'array quantita
  • Somma ogni valore alla variabile totale

Metodo Moderno con reduce()

let ta = quantita.reduce((acc, q) => acc + q, 0);

Il metodo reduce() fa la stessa cosa ma in modo più elegante:

  • acc è l'accumulatore (la somma parziale)
  • q è l'elemento corrente dell'array
  • 0 è il valore iniziale dell'accumulatore

Esercizio 2: Calcolo del Totale per Riga

let totaliRiga = prezzi.map((p, i) => p * quantita[i]);

Il metodo map():

  • Crea un nuovo array trasformando ogni elemento
  • p è il prezzo corrente, i è l'indice
  • Moltiplica il prezzo per la quantità corrispondente
  • Risultato: [2.40, 4.35, 3.90, 4.20, 2.60, 4.50, 4.40, 10.60]

Esercizio 3: Filtraggio dei Prodotti

Prodotti Costosi (prezzo > 2.5€)

const prodottiCostosi = prodotti.filter((_, i) => prezzi[i] > 2.5);

Prodotti con Quantità ≥ 2

const prodottiQtaMaggioreDue = prodotti.filter((p, i) => quantita[i] >= 2);

Il metodo filter():

  • Crea un nuovo array con solo gli elementi che soddisfano una condizione
  • _ indica che non usiamo il primo parametro (il prodotto stesso)
  • i è l'indice che usiamo per controllare prezzi o quantità

Esercizio 4: Trovare Massimo e Minimo

const prezzoMax = Math.max(...prezzi);
const prezzoMin = Math.min(...prezzi);
  • Math.max() e Math.min() trovano il valore massimo e minimo
  • ...prezzi è lo spread operator che "spacchetta" l'array
const nomeMax = prodotti[prezzi.indexOf(prezzoMax)];
const nomeMin = prodotti[prezzi.indexOf(prezzoMin)];
  • indexOf() trova la posizione del valore nell'array
  • Usiamo quella posizione per trovare il nome del prodotto corrispondente

Concetti Avanzati

Spread Operator

let nuovoArrayProdotti = [...prodotti, ...prezzi];

Crea un nuovo array combinando due array esistenti.

Metodo some()

const trovato = prodotti.some(el => el.toLowerCase() === 'superdentifriciodelcapitano');

Verifica se almeno un elemento soddisfa una condizione (restituisce true o false).

Attenzione con toFixed()

const votiStudentiNF = votiStudenti.map(el => el.toFixed(2));

Importante: toFixed() trasforma i numeri in stringhe! Questo può causare problemi nelle operazioni matematiche successive.

Eliminare Duplicati con Set

const marvelSenzaDoppioni = [...new Set(marvel)];
  • Set è una struttura dati che non ammette duplicati
  • Lo spread operator trasforma il Set in un array normale

Punti Chiave da Ricordare

  • map(): trasforma ogni elemento creando un nuovo array
  • filter(): seleziona elementi che soddisfano una condizione
  • reduce(): riduce l'array a un singolo valore
  • some(): verifica se esiste almeno un elemento che soddisfa una condizione
  • Spread operator (...): espande gli elementi di un array
  • Set: utile per eliminare duplicati
const prodotti = ["Pasta", "Latte", "Caffe", "Biscotti", "Mele", "Detersivo", "Pane", "Tonno"];
const prezzi = [1.20, 1.45, 3.90, 2.10, 2.60, 4.50, 1.10, 5.30];
const quantita = [2, 3, 1, 2, 1, 1, 4, 2];

// Esercizio 1: calcolare la quantità totale degli articoli
let totaleArticoli = 0;
for(let i = 0; i<quantita.length; i++){
    totaleArticoli += quantita[i];
}
console.log("La quantità degli articoli è " + totaleArticoli);

// Esercizio 1 con utilizzando il metodo reduce
let ta = quantita.reduce((acc, q) => acc + q, 0);
console.log("La quantità degli articoli è " + ta);

// Esercizio 2: calcolare il totale della riga (prezzo * quantità) per ogni prodotto
let totaliRiga = prezzi.map((p, i) => p * quantita[i]);
console.log("Totale della riga", totaliRiga);
console.log("Array prezzi", prezzi);

// Esercizio 3: filtrare i prodotti con prezzo maggiore di 2.5
const prodottiCostosi = prodotti.filter((_, i) => prezzi[i] > 2.5);
console.log("Prodotti costosi", prodottiCostosi);

// Esercizio 3: filtrare i prodotti con quantità maggiore o uguale a 2
const prodottiQtaMaggioreDue = prodotti.filter((p, i) => quantita[i] >= 2);
console.log("prodottiQtaMaggioreDue: ", prodottiQtaMaggioreDue);
console.log("Prodotti", prodotti);

//Esercizio 4: trovare il prezzo massimo e minimo e il nome del prodotto corrispondente
const prezzoMax = Math.max(...prezzi);
const prezzoMin = Math.min(...prezzi);

console.log("Prezzo max: ", prezzoMax);
console.log("Prezzo min: ", prezzoMin);

const nomeMax = prodotti[prezzi.indexOf(prezzoMax)];
const nomeMin = prodotti[prezzi.indexOf(prezzoMin)];

console.log("Il nome del prodotto con p. max è: ", nomeMax);
console.log("Il nome del prodotto con p. min è: ", nomeMin);

// Esempio di spread operator per creare un nuovo array prodotti indipendente dagli altri
let nuovoArrayProdotti = [...prodotti, ...prezzi];
console.log("Nuovo array prodotti indipendente ", nuovoArrayProdotti);

// Verificare se un prodotto è presente nell'array prodotti
const trovato = prodotti.some(el => el.toLowerCase() === 'superdentifriciodelcapitano');
console.log("Ho il pane come prodotto ?: ", trovato);

const votiStudenti = [3,4.5,7.5,10,5.5,9.25,5.75];

const votiStudentiNF = votiStudenti.map(el => el.toFixed(2));
// attenzione!: il toFixed(2); trasforma il numero in stringa. Questo è pericoloso
// in quanto una eventuale operazione di somma tra stringhe darebbe origine ad 
// una concatenazione
console.log("votiStudenti: ", votiStudenti);
console.log("votiStudentiNF: ", votiStudentiNF);

// Utilizzo di Set per eliminare i duplicati da un array
const marvel = ["Thor", "Hulk", "CP America", "Hulk", "Thor", "Falco"];
const marvelSenzaDoppioni = [...new Set(marvel)];
console.log("Marvel con duplicate", marvel);
console.log("Marvel senza duplicati", marvelSenzaDoppioni);