En aquest tema, aprendrem sobre els objectes en JavaScript, una de les característiques més potents i fonamentals del llenguatge. Els objectes ens permeten agrupar dades i funcionalitats relacionades en una sola entitat, cosa que facilita la gestió i manipulació de la informació.
Què és un Objecte?
Un objecte és una col·lecció de propietats, i una propietat és una associació entre un nom (o clau) i un valor. El valor d'una propietat pot ser una funció, en aquest cas, es diu que la propietat és un mètode.
Creació d'un Objecte
Hi ha diverses maneres de crear objectes en JavaScript. La més comuna és utilitzar la notació d'objecte literal.
// Creació d'un objecte literal
let persona = {
nom: "Joan",
edat: 30,
salutacio: function() {
console.log("Hola, em dic " + this.nom);
}
};
// Accés a les propietats de l'objecte
console.log(persona.nom); // Joan
console.log(persona.edat); // 30
// Crida al mètode de l'objecte
persona.salutacio(); // Hola, em dic JoanPropietats d'un Objecte
Les propietats d'un objecte poden ser accedides i modificades utilitzant la notació de punt (.) o la notació de clau ([]).
// Accés a les propietats utilitzant la notació de punt console.log(persona.nom); // Joan // Accés a les propietats utilitzant la notació de clau console.log(persona["edat"]); // 30 // Modificació de les propietats persona.nom = "Anna"; persona["edat"] = 25; console.log(persona.nom); // Anna console.log(persona.edat); // 25
Afegir i Eliminar Propietats
Podem afegir noves propietats a un objecte o eliminar-ne les existents.
// Afegir una nova propietat persona.ocupacio = "Enginyer"; console.log(persona.ocupacio); // Enginyer // Eliminar una propietat delete persona.edat; console.log(persona.edat); // undefined
Iteració sobre les Propietats d'un Objecte
Podem iterar sobre les propietats d'un objecte utilitzant el bucle for...in.
for (let clau in persona) {
console.log(clau + ": " + persona[clau]);
}
// Sortida:
// nom: Anna
// salutacio: function() { console.log("Hola, em dic " + this.nom); }
// ocupacio: EnginyerExercicis Pràctics
Exercici 1: Creació i Manipulació d'Objectes
- Crea un objecte anomenat
cotxeamb les propietats següents:marca,model,anyi un mètodedetallsque imprimeixi una cadena amb la informació del cotxe. - Modifica la propietat
anydel cotxe. - Afegeix una nova propietat
coloral cotxe. - Elimina la propietat
modeldel cotxe. - Itera sobre les propietats de l'objecte
cotxei imprimeix-les.
Solució
// 1. Creació de l'objecte cotxe
let cotxe = {
marca: "Toyota",
model: "Corolla",
any: 2020,
detalls: function() {
console.log(this.marca + " " + this.model + " (" + this.any + ")");
}
};
// 2. Modificació de la propietat any
cotxe.any = 2021;
// 3. Afegir una nova propietat color
cotxe.color = "Blau";
// 4. Eliminar la propietat model
delete cotxe.model;
// 5. Iteració sobre les propietats de l'objecte cotxe
for (let clau in cotxe) {
console.log(clau + ": " + cotxe[clau]);
}
// Sortida esperada:
// marca: Toyota
// any: 2021
// detalls: function() { console.log(this.marca + " " + this.model + " (" + this.any + ")"); }
// color: BlauResum
En aquest tema, hem après què són els objectes en JavaScript i com crear-los, accedir-hi, modificar-los, afegir-hi i eliminar-ne propietats, així com iterar sobre les seves propietats. Els objectes són una eina poderosa per organitzar i gestionar dades i funcionalitats relacionades en el nostre codi. En els següents temes, explorarem més a fons les capacitats dels objectes i com utilitzar-los de manera efectiva en els nostres programes.
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
