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:
-
Utilitzant la sintaxi de claudàtors (
[]
):let fruits = ['poma', 'plàtan', 'maduixa'];
-
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:
Modificació dels Elements
Pots modificar els elements d'un array assignant un nou valor a un índex específic:
Longitud de l'Array
La propietat length
retorna el nombre d'elements en un array:
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.
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).
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
-
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
-
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']
-
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
- Què és JavaScript?
- Configuració del Teu Entorn de Desenvolupament
- El Teu Primer Programa en JavaScript
- Sintaxi i Conceptes Bàsics de JavaScript
- Variables i Tipus de Dades
- Operadors Bàsics
Mòdul 2: Estructures de Control
- Declaracions Condicionals
- Bucles: for, while, do-while
- Declaracions Switch
- Gestió d'Errors amb try-catch
Mòdul 3: Funcions
- Definició i Crida de Funcions
- Expressions de Funció i Funcions Fletxa
- Paràmetres i Valors de Retorn
- Àmbit i Tancaments
- Funcions d'Ordre Superior
Mòdul 4: Objectes i Arrays
- Introducció als Objectes
- Mètodes d'Objecte i Paraula Clau 'this'
- Arrays: Conceptes Bàsics i Mètodes
- Iteració sobre Arrays
- Desestructuració d'Arrays
Mòdul 5: Objectes i Funcions Avançades
- Prototips i Herència
- Classes i Programació Orientada a Objectes
- Mòduls i Importació/Exportació
- JavaScript Asíncron: Callbacks
- Promeses i Async/Await
Mòdul 6: El Model d'Objectes del Document (DOM)
- Introducció al DOM
- Selecció i Manipulació d'Elements del DOM
- Gestió d'Esdeveniments
- Creació i Eliminació d'Elements del DOM
- Gestió i Validació de Formularis
Mòdul 7: APIs del Navegador i Temes Avançats
- Emmagatzematge Local i de Sessió
- Fetch API i AJAX
- WebSockets
- Service Workers i Aplicacions Web Progressives (PWAs)
- Introducció a WebAssembly
Mòdul 8: Proves i Depuració
- Depuració de JavaScript
- Proves Unitàries amb Jest
- Proves d'Integració
- Proves de Cap a Cap amb Cypress
Mòdul 9: Rendiment i Optimització
- Optimització del Rendiment de JavaScript
- Gestió de Memòria
- Manipulació Eficient del DOM
- Càrrega Per Mandat i Divisió de Codi
Mòdul 10: Frameworks i Llibreries de JavaScript
- Introducció a React
- Gestió d'Estat amb Redux
- Conceptes Bàsics de Vue.js
- Conceptes Bàsics d'Angular
- Triar el Framework Adequat