 |
Un articolo da salvare tra i preferiti per avere sempre a portata di mano:
- ogni operazione fondamentale sugli oggetti JavaScript spiegata in modo chiaro e completo
- tutti i riferimenti essenziali per lavorare con gli oggetti in JavaScript!
Gli oggetti in JavaScript sono una delle strutture dati più fondamentali e potenti. Permettono di rappresentare entità complesse, raggruppare dati correlati e definire comportamenti tramite metodi. In questa guida esamineremo tutte le operazioni principali per la creazione e manipolazione di oggetti in JavaScript, con spiegazioni teoriche ed esempi pratici.
1. Creazione di un Oggetto
La creazione di un oggetto in JavaScript può avvenire tramite object literal, il metodo più comune e leggibile.
const person = {
name: "Alice",
age: 30,
isEmployed: true
};È anche possibile usare il costruttore Object:
const person = new Object();
person.name = "Alice";
person.age = 30;2. Accesso alle Proprietà dell'Oggetto
Le proprietà di un oggetto possono essere lette usando dot notation o bracket notation.
console.log(person.name); // "Alice"
console.log(person["age"]); // 303. Modifica delle Proprietà dell'Oggetto
Puoi aggiornare il valore di una proprietà semplicemente assegnando un nuovo valore.
person.age = 31;
person["isEmployed"] = false;4. Aggiunta di Nuove Proprietà
Se assegni una nuova proprietà a un oggetto, questa verrà automaticamente creata.
person.city = "New York";
person["country"] = "USA";5. Rimozione di una Proprietà
Per rimuovere una proprietà da un oggetto, si utilizza l'operatore delete.
delete person.age;
delete person["isEmployed"];6. Verifica dell’Esistenza di una Proprietà
Puoi controllare se una proprietà esiste usando l’operatore in oppure hasOwnProperty.
console.log("name" in person); // true
console.log(person.hasOwnProperty("city")); // true7. Metodi dell'Oggetto
Un metodo è una funzione definita all'interno di un oggetto. Può usare la parola chiave this per riferirsi all’oggetto stesso.
const person = {
name: "Alice",
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.greet(); // "Hello, my name is Alice"8. Loop delle Proprietà
Puoi scorrere tutte le proprietà enumerabili di un oggetto usando for...in.
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}Puoi anche ottenere chiavi, valori o coppie chiave/valore con i metodi Object.keys(), Object.values() e Object.entries():
Object.keys(person).forEach(key => console.log(key));
Object.values(person).forEach(value => console.log(value));
Object.entries(person).forEach(([key, value]) => console.log(key, value));9. Destructuring dell'Oggetto
Il destructuring è una sintassi introdotta in ES6 che consente di "estrarre" proprietà da un oggetto in variabili separate in modo conciso.
const person = {
name: "Alice",
age: 30,
city: "New York"
};
const { name, age } = person;
console.log(name); // "Alice"
console.log(age); // 30È utile anche con valori predefiniti o alias:
const { country = "USA", city: hometown } = person;
console.log(country); // "USA"
console.log(hometown); // "New York"10. Spread Operator (ES6)
Lo spread operator (...) consente di creare un nuovo oggetto copiando le proprietà da un oggetto esistente. È molto utile per clonare o combinare oggetti.
const person = { name: "Alice", age: 30 };
const job = { title: "Developer" };
const employee = { ...person, ...job };
console.log(employee); // { name: "Alice", age: 30, title: "Developer" }È anche possibile usarlo per sovrascrivere valori:
const updatedPerson = { ...person, age: 31 };
console.log(updatedPerson); // { name: "Alice", age: 31 }Conclusione
La manipolazione degli oggetti è una competenza fondamentale in JavaScript. Conoscere bene le operazioni di base come creare, leggere, modificare, iterare e destrutturare oggetti ti permetterà di scrivere codice più chiaro, conciso ed efficiente. Ricorda che gli oggetti sono alla base di tutto in JavaScript, dalle semplici strutture dati fino alla programmazione orientata agli oggetti.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
