Frontend Academy · Lezione

Metodi degli array: map, filter, reduce e find

Trasformare, filtrare e aggregare gli array con metodi di ordine superiore invece di usare cicli manuali. Concatenarli per creare pipeline di dati espressive.

Lezione 1 di 413 passaggi

Metodi degli array: map, filter, reduce e find è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Perché i metodi degli array?

I cicli for imperativi funzionano, ma nascondono l'intento. I metodi di ordine superiore degli array dichiarano che cosa si desidera, anziché come iterare. Producono codice più pulito, verificabile e componibile, che si legge come prosa.

Array.map() — Trasformare ogni elemento

map() restituisce un nuovo array in cui ogni elemento è stato trasformato dalla callback. L'array originale non viene modificato. Lo utilizzi ogni volta che deve convertire un array in un altro.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — Selezionare gli elementi corrispondenti

filter() restituisce un nuovo array contenente solo gli elementi per i quali la callback restituisce un valore truthy. La callback è una funzione predicato.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — Accumulare un valore

reduce(callback, initialValue) accumula tutti gli elementi in un unico valore. La callback riceve l'accumulatore e l'elemento corrente. Il valore iniziale è il valore da cui parte l'accumulatore.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — Prima corrispondenza

find() restituisce il primo elemento che soddisfa il predicato, oppure undefined se non ne trova alcuno. Lo utilizzi per cercare un elemento in base all'ID o al valore di una proprietà.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() è simile a find(), ma restituisce l'indice dell'elemento corrispondente oppure -1 se non viene trovato. È utile per individuare la posizione in cui aggiornare un elemento di un array.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() e Array.every()

some() restituisce true se almeno un elemento supera il test. every() restituisce true solo se tutti gli elementi lo superano. Entrambi interrompono l'esecuzione al primo risultato conclusivo.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — Mappare e poi appiattire

flatMap() applica una trasformazione a ogni elemento e poi appiattisce il risultato di un livello. Equivale a .map(...).flat(), ma è più efficiente.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Concatenare i metodi degli array

I metodi restituiscono nuovi array, quindi può concatenarli. Legga le catene da sinistra a destra: prima filter, poi trasformazione, infine aggregazione.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() e Array.includes()

at(-1) restituisce l'ultimo elemento. includes(value) verifica se un valore esiste. È molto più pulito di arr[arr.length - 1] e arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Immutabilità: non modificare direttamente

map, filter, reduce restituiscono nuovi array. push, pop, splice modificano l'array originale. Nello stato di React, crei sempre nuovi array (con spread o map) invece di modificare direttamente lo stato.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Verifica rapida

Quale metodo degli array restituisce un nuovo array degli elementi per i quali la callback restituisce true?

Rispondi nella lezione interattiva

Riepilogo: metodi degli array

map() trasforma ogni elemento. filter() seleziona gli elementi corrispondenti. reduce() accumula tutto in un unico valore. find() restituisce la prima corrispondenza. some()/every() verificano l'appartenenza. Le catene di questi metodi sostituiscono i cicli annidati con pipeline di dati leggibili e dichiarative.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 41
Lezioni: 163

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Metodi degli array: map, filter, reduce e find» è gratuita?

Sì — il testo completo di «Metodi degli array: map, filter, reduce e find» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Metodi degli array: map, filter, reduce e find»?

Trasformare, filtrare e aggregare gli array con metodi di ordine superiore invece di usare cicli manuali. Concatenarli per creare pipeline di dati espressive. Eserciti Frontend 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 Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend 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 1 di 4.

Quanto tempo richiede la lezione «Metodi degli array: map, filter, reduce e find»?

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 Frontend Academy?

Sì. Ogni lezione Frontend 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

Metodi degli array: map, filter, reduce e find
Destructuring e spread degli oggetti
Template literal e optional chaining
Moduli: import ed export

← Torna a Frontend Academy