Skip to main content

Mètodes Avançats d'Arrays: map, filter i reduce

JavaScript proporciona mètodes molt potents per treballar amb arrays de manera funcional i eficient. En aquest capítol aprendrem a utilitzar:

  • map() per transformar arrays
  • filter() per seleccionar elements
  • reduce() per acumular valors

map(): transformar valors​

Transforma cada element d’un array i retorna un nou array amb el mateix nombre d'elements.

const noms = ["Joan", "Anna", "Pau"];
const enMajuscules = noms.map((nom) => nom.toUpperCase());

Exemples​

const nums = [1, 2, 3];
const dobles = nums.map((x) => x * 2); // [2, 4, 6]
const tlf = ["644444444", "644444443"];
const ambPrefix = tlf.map((t) => "(+34) " + t);

Activitats amb map()​

  1. Pujar cada número d’un array de 1 a 5 al doble.
  2. Passar tots els noms d’un array a majúscules.
  3. Convertir temperatures de Celsius a Fahrenheit.
  4. Calcular la longitud de cada títol de llibres.
  5. Afegir 'Sr./Sra.' davant dels noms d’autors.
  6. Redondejar números a dos decimals.

filter(): filtrar valors​

Crea un nou array amb només els elements que compleixen una condició.

const nums = [1, 2, 3, 4, 5];
const parells = nums.filter((x) => x % 2 === 0); // [2, 4]
const noms = ["juan", "ana", "carlos"];
const ambJu = noms.filter((nom) => nom.includes("ju"));

Activitats amb filter()​

  1. Obtenir només els números parells d’un array.
  2. Buscar noms que incloguin una subcadena.
  3. Filtrar paraules més llargues de 6 caràcters.

reduce(): reduir a un valor​

Executa una funció acumuladora sobre tots els elements i retorna un sol valor.

const numeros = [1, 2, 3, 4, 5];
const suma = numeros.reduce((acc, val) => acc + val, 0); // 15

Exemples​

Trobar el màxim:

const max = numeros.reduce((acc, val) => Math.max(acc, val));

Eliminar duplicats:

const unics = numeros.reduce(
  (acc, val) => (acc.includes(val) ? acc : [...acc, val]),
  []
);

Activitats amb reduce()​

  1. Calcular la suma total d’un array.
  2. Trobar el valor màxim d’un array.
  3. Trobar el valor mínim d’un array.
  4. Eliminar duplicats d’un array.

Comparativa map vs filter vs reduce​

MètodeFuncióRetorn
map()Transformar cada elementNou array
filter()Seleccionar elements que compleixenNou array (menys o igual)
reduce()Acumular en un sol valor finalUn únic valor

Quan usar for?​

Tot i que map, filter i reduce són molt potents, encara podem utilitzar for quan:

  • Necessitem modificar l’array original
  • Cal iterar en patrons no lineals (i += 3)
  • Volem iterar sobre múltiples arrays
  • Necessitem operacions complexes amb condicions múltiples
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
for (let i = 0; i < arr1.length; i++) {
  console.log(arr1[i] + arr2[i]);
}

Aquest capítol t’ha donat eines fonamentals per tractar arrays com un expert. Aprofitar map, filter i reduce pot fer el teu codi més net, modular i expressiu.