El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Iteració sobre Arrays

Següent ►
►

En aquest tema, aprendrem com iterar sobre arrays en JavaScript. La iteració és una tècnica fonamental per treballar amb col·leccions de dades, i JavaScript ofereix diverses maneres de fer-ho. Explorarem les següents tècniques:

  1. Bucles for
  2. Bucles while i do-while
  3. Mètodes d'array com forEach, map, filter, i reduce

  1. Bucles for

El bucle for és una de les maneres més comunes d'iterar sobre un array. La seva sintaxi és la següent:

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

Explicació:

  • Inicialització (let i = 0): Inicialitza una variable de control i a 0.
  • Condició (i < array.length): El bucle continua mentre i sigui menor que la longitud de l'array.
  • Increment (i++): Incrementa i en 1 després de cada iteració.

  1. Bucles while i do-while

Bucle while

El bucle while repeteix un bloc de codi mentre una condició sigui certa.

const array = [1, 2, 3, 4, 5];
let i = 0;

while (i < array.length) {
  console.log(array[i]);
  i++;
}

Bucle do-while

El bucle do-while és similar al while, però garanteix que el bloc de codi s'executi almenys una vegada.

const array = [1, 2, 3, 4, 5];
let i = 0;

do {
  console.log(array[i]);
  i++;
} while (i < array.length);

  1. Mètodes d'Array

forEach

El mètode forEach executa una funció per a cada element de l'array.

const array = [1, 2, 3, 4, 5];

array.forEach(function(element) {
  console.log(element);
});

map

El mètode map crea un nou array amb els resultats de la funció aplicada a cada element de l'array original.

const array = [1, 2, 3, 4, 5];
const newArray = array.map(function(element) {
  return element * 2;
});

console.log(newArray); // [2, 4, 6, 8, 10]

filter

El mètode filter crea un nou array amb tots els elements que compleixen una condició especificada.

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(function(element) {
  return element > 2;
});

console.log(filteredArray); // [3, 4, 5]

reduce

El mètode reduce aplica una funció a un acumulador i a cada element de l'array (de l'esquerra a la dreta) per reduir-lo a un únic valor.

const array = [1, 2, 3, 4, 5];
const sum = array.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

Exercicis Pràctics

Exercici 1: Iteració amb for

Escriu una funció que rebi un array de nombres i retorni la suma de tots els elements utilitzant un bucle for.

function sumArray(array) {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
    sum += array[i];
  }
  return sum;
}

// Prova
console.log(sumArray([1, 2, 3, 4, 5])); // 15

Exercici 2: Filtrar amb filter

Escriu una funció que rebi un array de nombres i retorni un nou array amb només els nombres parells utilitzant filter.

function filterEvenNumbers(array) {
  return array.filter(function(element) {
    return element % 2 === 0;
  });
}

// Prova
console.log(filterEvenNumbers([1, 2, 3, 4, 5])); // [2, 4]

Exercici 3: Transformar amb map

Escriu una funció que rebi un array de nombres i retorni un nou array amb cada nombre multiplicat per 3 utilitzant map.

function multiplyByThree(array) {
  return array.map(function(element) {
    return element * 3;
  });
}

// Prova
console.log(multiplyByThree([1, 2, 3, 4, 5])); // [3, 6, 9, 12, 15]

Conclusió

En aquesta secció, hem après diverses tècniques per iterar sobre arrays en JavaScript, incloent bucles tradicionals com for i while, així com mètodes d'array com forEach, map, filter i reduce. La pràctica d'aquestes tècniques és essencial per treballar de manera eficient amb col·leccions de dades en JavaScript. Ara estàs preparat per aplicar aquestes tècniques en projectes reals i resoldre problemes complexos de manipulació de dades.

◄ Anterior
◄
Següent ►
►

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats