In questo tutorial imparerai l'assegnazione della destrutturazione JavaScript con l'aiuto di esempi.
Destrutturazione JavaScript
L'assegnazione destrutturante introdotta in ES6 semplifica l'assegnazione di valori di array e proprietà di oggetti a variabili distinte. Ad esempio,
prima di ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Da ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Nota : l'ordine del nome non ha importanza nella destrutturazione degli oggetti.
Ad esempio, potresti scrivere il programma sopra come:
let ( age, gender, name ) = person; console.log(name); // Sara
Nota : quando si destrutturano gli oggetti, è necessario utilizzare lo stesso nome per la variabile della chiave dell'oggetto corrispondente.
Per esempio,
let (name1, age, gender) = person; console.log(name1); // undefined
Se desideri assegnare nomi di variabili diversi per la chiave dell'oggetto, puoi utilizzare:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Array Destructuring
È inoltre possibile eseguire la destrutturazione dell'array in modo simile. Per esempio,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Assegna valori predefiniti
È possibile assegnare i valori predefiniti per le variabili durante l'utilizzo della destrutturazione. Per esempio,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
Nel programma precedente, arrValue ha un solo elemento. Quindi,
- la variabile x sarà 10
- la variabile y assume il valore predefinito 7
Nella destrutturazione degli oggetti, puoi passare i valori predefiniti in modo simile. Per esempio,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Scambio di variabili
In questo esempio, due variabili vengono scambiate utilizzando la sintassi di assegnazione destrutturante.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Salta elementi
È possibile saltare gli elementi indesiderati in un array senza assegnarli a variabili locali. Per esempio,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
Nel programma precedente, il secondo elemento viene omesso utilizzando il separatore virgola ,.
Assegna gli elementi rimanenti a una singola variabile
È possibile assegnare gli elementi rimanenti di un array a una variabile utilizzando la sintassi di diffusione … . Per esempio,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Qui oneè assegnato alla variabile x. E il resto degli elementi dell'array sono assegnati alla variabile y.
È inoltre possibile assegnare il resto delle proprietà dell'oggetto a una singola variabile. Per esempio,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Nota : la variabile con la sintassi diffusa non può avere una virgola finale ,. Dovresti usare questo elemento rest (variabile con sintassi diffusa) come ultima variabile.
Per esempio,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Assegnazione di destrutturazione annidata
È possibile eseguire la destrutturazione annidata per gli elementi dell'array. Per esempio,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Qui, alle variabili yez sono assegnati elementi nidificati twoe three.
Per eseguire l'assegnazione di destrutturazione annidata, è necessario racchiudere le variabili in una struttura ad array (racchiudendole all'interno ()).
È inoltre possibile eseguire la destrutturazione annidata per le proprietà degli oggetti. Per esempio,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Per eseguire l'assegnazione di destrutturazione annidata per oggetti, è necessario racchiudere le variabili in una struttura di oggetti (racchiudendole all'interno ()).
Nota : la funzione di assegnazione di destrutturazione è stata introdotta in ES6 . Alcuni browser potrebbero non supportare l'uso dell'assegnazione destrutturante. Visita il supporto per la destrutturazione Javascript per saperne di più.
