8.1 Destrutturazione degli oggetti
La destrutturazione in JavaScript è una sintassi che ti permette di spacchettare valori da array o proprietà da oggetti in variabili separate. Questo rende il codice più pulito e facile da leggere. In questa lezione vedremo in dettaglio la destrutturazione di oggetti e array, assieme a vari esempi e il loro utilizzo.
1. Sintassi di base
La destrutturazione degli oggetti permette di estrarre i valori delle proprietà di un oggetto e assegnarli a variabili:
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // Mostrerà: John
console.log(age); // Mostrerà: 30
console.log(isStudent); // Mostrerà: false
2. Assegnazione a nuove variabili
Puoi assegnare i valori delle proprietà dell'oggetto a variabili con altri nomi:
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // Mostrerà: John
console.log(personAge); // Mostrerà: 30
3. Valori predefiniti
Se una proprietà non esiste nell'oggetto, puoi impostare un valore di default:
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // Mostrerà: true
4. Destrutturazione annidata
Puoi estrarre valori da oggetti annidati:
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // Mostrerà: New York
console.log(country); // Mostrerà: USA
5. Destrutturazione nei parametri della funzione
Puoi usare la destrutturazione nei parametri di una funzione:
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // Mostrerà: Hello, my name is John and I am 30 years old.
8.2 Destrutturazione degli array
1. Sintassi di base
La destrutturazione degli array ti permette di estrarre i valori degli elementi di un array e assegnarli a variabili:
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // Mostrerà: apple
console.log(second); // Mostrerà: banana
console.log(third); // Mostrerà: cherry
2. Saltare elementi
Puoi saltare gli elementi dell'array di cui non hai bisogno:
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // Mostrerà: apple
console.log(third); // Mostrerà: cherry
3. Valori predefiniti
Puoi impostare valori predefiniti per elementi dell'array:
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // Mostrerà: banana
4. Destrutturazione annidata
Puoi estrarre valori da array annidati:
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // Mostrerà: 2
console.log(three); // Mostrerà: 3
5. Destrutturazione nei parametri della funzione
La destrutturazione può essere utilizzata nei parametri delle funzioni per gli array:
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // Mostrerà: John Doe
8.3 Esempi di utilizzo della destrutturazione
1. Scambio di valori tra variabili
La destrutturazione permette di scambiare facilmente i valori tra variabili:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // Mostrerà: 2
console.log(b); // Mostrerà: 1
2. Estrazione di dati da oggetti
La destrutturazione semplifica l'estrazione di dati da oggetti, ad esempio da una risposta API:
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // Mostrerà: John Doe
console.log(email); // Mostrerà: john@example.com
3. Impostazioni predefinite nelle funzioni
La destrutturazione permette di impostare facilmente valori di default per i parametri delle funzioni:
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// Mostrerà: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// Mostrerà: { name: 'Anonymous', age: 0, isAdmin: false }
4. Array e funzioni
La destrutturazione semplifica il lavoro con gli array, specialmente quando usi metodi degli array:
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // Mostrerà: 1
console.log(second); // Mostrerà: 2
console.log(rest); // Mostrerà: [3, 4, 5]
GO TO FULL VERSION