La desestructuració d'arrays és una característica de JavaScript que permet extreure valors d'arrays i assignar-los a variables de manera més concisa i llegible. Aquesta tècnica és especialment útil quan es treballa amb arrays grans o quan es volen extreure múltiples valors d'un array de manera eficient.
Conceptes Clau
Sintaxi Bàsica
La desestructuració d'arrays utilitza una sintaxi similar a la de la declaració d'arrays, però en lloc de crear un array, es descomponen els elements de l'array original en variables individuals.
const array = [1, 2, 3]; const [a, b, c] = array; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
Saltar Elements
És possible saltar elements de l'array utilitzant comes sense especificar una variable per a aquests elements.
const array = [1, 2, 3, 4]; const [first, , third] = array; console.log(first); // 1 console.log(third); // 3
Valors Per Defecte
Es poden assignar valors per defecte a les variables en cas que l'array no contingui suficients elements.
Desestructuració Niuada
La desestructuració també pot ser niuada per extreure valors d'arrays dins d'altres arrays.
const array = [1, [2, 3], 4]; const [a, [b, c], d] = array; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(d); // 4
Exercicis Pràctics
Exercici 1: Desestructuració Bàsica
Donat l'array següent, utilitza la desestructuració per assignar els valors a les variables x, y i z.
Solució
const array = [10, 20, 30]; const [x, y, z] = array; console.log(x); // 10 console.log(y); // 20 console.log(z); // 30
Exercici 2: Saltar Elements
Donat l'array següent, utilitza la desestructuració per assignar el primer i el tercer valor a les variables first i third, respectivament.
Solució
const array = [5, 10, 15, 20]; const [first, , third] = array; console.log(first); // 5 console.log(third); // 15
Exercici 3: Valors Per Defecte
Donat l'array següent, utilitza la desestructuració per assignar el primer valor a a i el segon valor a b, amb un valor per defecte de 50 per a b.
Solució
Exercici 4: Desestructuració Niuada
Donat l'array següent, utilitza la desestructuració per assignar els valors a les variables a, b, c i d.
Solució
const array = [1, [2, 3], 4]; const [a, [b, c], d] = array; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(d); // 4
Errors Comuns i Consells
Error: Assignar Més Variables que Elements
Un error comú és intentar assignar més variables que elements té l'array. En aquest cas, les variables addicionals seran undefined.
const array = [1, 2]; const [a, b, c] = array; console.log(a); // 1 console.log(b); // 2 console.log(c); // undefined
Consell: Utilitzar Valors Per Defecte
Per evitar undefined, és una bona pràctica assignar valors per defecte a les variables.
const array = [1, 2]; const [a, b, c = 3] = array; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
Resum
La desestructuració d'arrays és una tècnica poderosa que permet extreure valors d'arrays de manera concisa i llegible. Hem vist com utilitzar la sintaxi bàsica, saltar elements, assignar valors per defecte i treballar amb desestructuració niuada. També hem practicat amb exercicis pràctics per reforçar aquests conceptes. Amb aquesta base, estàs preparat per aplicar la desestructuració d'arrays 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