Decomposizione JavaScript

Sintassi di assegnazione di destrutturazione

La sintassi di assegnazione di destrutturazione distribuisce le proprietà dell'oggetto nei variabili:

let {firstName, lastName} = person;

Può anche pacchettare array e qualsiasi altro oggetto iterabile:

let [firstName, lastName] = person;

Destrutturazione dell'oggetto

Esempio

// Creare un oggetto
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Decomposizione
let {firstName, lastName} = person;

Prova tu stesso

L'ordine delle proprietà non è importante:

Esempio

// Creare un oggetto
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Decomposizione
let {lastName, firstName} = person;

Prova tu stesso

Attenzione:

La destrutturazione non è distruttiva.

La destrutturazione non modifica l'oggetto originale.

Valori di default dell'oggetto

Per le proprietà possibili che potrebbero mancare, possiamo impostare valori di default:

Esempio

// Creare un oggetto
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Decomposizione
let {firstName, lastName, country = "US"} = person;

Prova tu stesso

Alias delle proprietà dell'oggetto

Esempio

// Creare un oggetto
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Decomposizione
let {lastName: name} = person;

Prova tu stesso

Destrutturazione della stringa

Un uso della destrutturazione è il pacchettamento dei caratteri di una stringa.

Esempio

// Creare una stringa
let name = "W3Schools";
// Decomposizione
let [a1, a2, a3, a4, a5] = name;

Prova tu stesso

Attenzione:

La destrutturazione può essere utilizzata per qualsiasi oggetto iterabile.

Destrutturazione dell'array

Possiamo estrarre variabili dell'array in variabili proprie:

Esempio

// Creazione di un array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Decomposizione
let [fruit1, fruit2] = fruits;

Prova tu stesso

Saltare valori dell'array

Possiamo utilizzare due o più virgole per saltare valori dell'array:

Esempio

// Creazione di un array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Decomposizione
let [fruit1,,,fruit2] = fruits;

Prova tu stesso

Valore di posizione dell'array

Possiamo estrarre valori da posizioni specifiche dell'array:

Esempio

// Creazione di un array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Decomposizione
let {[0]: fruit1, [1]: fruit2} = fruits;

Prova tu stesso

Proprietà rimanenti

È possibile utilizzare le proprietà rimanenti alla fine della sintassi di destrutturazione.

Questa sintassi archivia tutti i valori rimanenti in un nuovo array:

Esempio

// Creazione di un array
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Decomposizione
const [a, b, ...rest] = numbers;

Prova tu stesso

Decomposizione Map

Esempio

// Creazione di una Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  
]
// Decomposizione
let text = "";
for (const [key, value] of fruits) {
  text += key + " è " + value;
}

Prova tu stesso

Scambio variabili JavaScript

È possibile scambiare i valori di due variabili utilizzando l'assegnazione tramite decomposizione:

Esempio

let firstName = "Bill";
let lastName = "Gates";
// Decomposizione
[firstName, lastName] = [lastName, firstName];

Prova tu stesso