JavaScript Academy · Lezione

Trasformazione dichiarativa dei dati

Trasformi i dati con map, filter e reduce.

Trasformazione dichiarativa dei dati è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Dichiarativo e imperativo

Il codice imperativo indica COME procedere (cicli, contatori, modifiche). Il codice dichiarativo indica CHE COSA ottenere. I metodi degli array come map, filter e reduce consentono di descrivere le trasformazioni senza gestire manualmente i cicli.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: trasformare ogni elemento

map restituisce un nuovo array della stessa lunghezza, in cui ogni elemento viene trasformato dalla funzione indicata. L'array originale rimane invariato.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: mantenere alcuni elementi

filter restituisce un nuovo array contenente solo gli elementi per i quali il predicato restituisce un valore truthy.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: accumulare in un unico valore

reduce riduce un array a un singolo valore mediante un accumulatore. Fornisca una funzione reducer e un valore iniziale.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Concatenare le operazioni

Poiché ogni metodo restituisce un nuovo array, può concatenarli in una pipeline leggibile, che si legge dall'alto verso il basso.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Una pipeline realistica

Combini filter, map e reduce per rispondere a una domanda su un insieme di dati con una sola espressione.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Mappare verso nuove strutture

map può modificare la struttura degli oggetti, non solo dei numeri. Proietti ogni record nei campi che le interessano.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce può costruire qualsiasi cosa

reduce non serve solo per le somme. Può costruire oggetti, raggruppare dati o persino reimplementare map e filter.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

L'ordine è importante

Filtrare prima di mappare evita di trasformare elementi che verranno scartati. Inserisca i filtri meno costosi all'inizio della catena, per maggiore chiarezza ed efficienza.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Nessuna modifica in alcun punto

Questi metodi non modificano mai l'array di origine. Le pipeline risultano così sicure e prevedibili, in perfetta sintonia con lo stile funzionale.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap per risultati annidati

Quando map produce degli array, flatMap esegue il mapping e appiattisce un livello in un unico passaggio.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Verifica rapida

Trasformazioni dichiarative.

Riepilogo

La trasformazione dichiarativa descrive CHE COSA ottenere, non COME ottenerlo. map trasforma, filter seleziona e reduce riduce a un unico valore; li concateni in pipeline leggibili. Nessuno di questi metodi modifica l'origine, filtrare all'inizio è efficiente e reduce può costruire qualsiasi struttura. Utilizzi flatMap quando map produce degli array.

Domande Frequenti

La lezione «Trasformazione dichiarativa dei dati» è gratuita?

Sì — il testo completo di «Trasformazione dichiarativa dei dati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Trasformazione dichiarativa dei dati»?

Trasformi i dati con map, filter e reduce. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Trasformazione dichiarativa dei dati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy