Introducció

Els arrays són una estructura de dades fonamental en JavaScript que permeten emmagatzemar múltiples valors en una sola variable. Els arrays són molt útils per gestionar col·leccions de dades i ofereixen una varietat de mètodes per manipular-los de manera eficient.

Conceptes Bàsics

Creació d'Arrays

Pots crear un array de diverses maneres en JavaScript:

  1. Utilitzant la sintaxi de claudàtors ([]):

    let fruits = ['poma', 'plàtan', 'maduixa'];
    
  2. Utilitzant el constructor Array:

    let fruits = new Array('poma', 'plàtan', 'maduixa');
    

Accés als Elements

Els elements d'un array es poden accedir utilitzant l'índex, que comença en 0:

let primerFruit = fruits[0]; // 'poma'
let segonFruit = fruits[1];  // 'plàtan'

Modificació dels Elements

Pots modificar els elements d'un array assignant un nou valor a un índex específic:

fruits[1] = 'taronja';
console.log(fruits); // ['poma', 'taronja', 'maduixa']

Longitud de l'Array

La propietat length retorna el nombre d'elements en un array:

let numFruits = fruits.length; // 3

Mètodes d'Arrays

push()

Afegeix un o més elements al final de l'array i retorna la nova longitud de l'array.

let newLength = fruits.push('kiwi');
console.log(fruits); // ['poma', 'taronja', 'maduixa', 'kiwi']
console.log(newLength); // 4

pop()

Elimina l'últim element de l'array i el retorna.

let lastFruit = fruits.pop();
console.log(fruits); // ['poma', 'taronja', 'maduixa']
console.log(lastFruit); // 'kiwi'

shift()

Elimina el primer element de l'array i el retorna. Aquest mètode canvia la longitud de l'array.

let firstFruit = fruits.shift();
console.log(fruits); // ['taronja', 'maduixa']
console.log(firstFruit); // 'poma'

unshift()

Afegeix un o més elements al començament de l'array i retorna la nova longitud de l'array.

newLength = fruits.unshift('mango');
console.log(fruits); // ['mango', 'taronja', 'maduixa']
console.log(newLength); // 3

indexOf()

Retorna el primer índex en què un element determinat es pot trobar en l'array, o -1 si l'element no està present.

let index = fruits.indexOf('taronja');
console.log(index); // 1

splice()

Canvia el contingut d'un array eliminant, reemplaçant o afegint nous elements.

// Elimina 1 element a partir de l'índex 1
let removed = fruits.splice(1, 1);
console.log(fruits); // ['mango', 'maduixa']
console.log(removed); // ['taronja']

// Afegeix elements a partir de l'índex 1
fruits.splice(1, 0, 'plàtan', 'kiwi');
console.log(fruits); // ['mango', 'plàtan', 'kiwi', 'maduixa']

slice()

Retorna una còpia superficial d'una porció d'un array en un nou array objecte seleccionat des d'inici fins a final (final no inclòs).

let someFruits = fruits.slice(1, 3);
console.log(someFruits); // ['plàtan', 'kiwi']

forEach()

Executa una funció proporcionada una vegada per cada element de l'array.

fruits.forEach(function(fruit) {
    console.log(fruit);
});
// Output:
// mango
// plàtan
// kiwi
// maduixa

map()

Crea un nou array amb els resultats de cridar una funció proporcionada en cada element d'aquest array.

let upperFruits = fruits.map(function(fruit) {
    return fruit.toUpperCase();
});
console.log(upperFruits); // ['MANGO', 'PLÀTAN', 'KIWI', 'MADUIXA']

filter()

Crea un nou array amb tots els elements que passen la prova implementada per la funció proporcionada.

let filteredFruits = fruits.filter(function(fruit) {
    return fruit.length > 5;
});
console.log(filteredFruits); // ['plàtan', 'maduixa']

reduce()

Aplica una funció a un acumulador i a cada valor de l'array (de l'esquerra a la dreta) per reduir-lo a un únic valor.

let totalLength = fruits.reduce(function(accumulator, fruit) {
    return accumulator + fruit.length;
}, 0);
console.log(totalLength); // 22

Exercicis Pràctics

  1. Crear un array de números i trobar la suma de tots els elements utilitzant reduce().

    let numbers = [1, 2, 3, 4, 5];
    let sum = numbers.reduce(function(accumulator, number) {
        return accumulator + number;
    }, 0);
    console.log(sum); // 15
    
  2. Filtrar un array de paraules per obtenir només aquelles que tenen més de 4 lletres.

    let words = ['sol', 'lluna', 'estrella', 'planeta'];
    let longWords = words.filter(function(word) {
        return word.length > 4;
    });
    console.log(longWords); // ['estrella', 'planeta']
    
  3. Convertir un array de paraules a majúscules utilitzant map().

    let words = ['sol', 'lluna', 'estrella', 'planeta'];
    let upperWords = words.map(function(word) {
        return word.toUpperCase();
    });
    console.log(upperWords); // ['SOL', 'LLUNA', 'ESTRELLA', 'PLANETA']
    

Resum

En aquesta secció, hem après els conceptes bàsics dels arrays en JavaScript, incloent-hi com crear-los, accedir-hi i modificar-los. També hem explorat diversos mètodes útils per manipular arrays, com push(), pop(), shift(), unshift(), indexOf(), splice(), slice(), forEach(), map(), filter(), i reduce(). Finalment, hem practicat aquests conceptes amb alguns exercicis pràctics. Amb aquests coneixements, estàs preparat per treballar amb arrays de manera eficient en els teus projectes de JavaScript.

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

© Copyright 2024. Tots els drets reservats