En este tutorial, aprenderá sobre la asignación de desestructuración de JavaScript con la ayuda de ejemplos.
Desestructuración de JavaScript
La asignación de desestructuración introducida en ES6 facilita la asignación de valores de matriz y propiedades de objeto a distintas variables. Por ejemplo,
antes de 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
Desde 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 : El orden del nombre no importa en la desestructuración de objetos.
Por ejemplo, podría escribir el programa anterior como:
let ( age, gender, name ) = person; console.log(name); // Sara
Nota : Al desestructurar objetos, debe usar el mismo nombre para la variable que la clave del objeto correspondiente.
Por ejemplo,
let (name1, age, gender) = person; console.log(name1); // undefined
Si desea asignar diferentes nombres de variable para la clave de objeto, puede usar:
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
Desestructuración de matrices
También puede realizar la desestructuración de matrices de manera similar. Por ejemplo,
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
Asignar valores predeterminados
Puede asignar los valores predeterminados para las variables mientras usa la desestructuración. Por ejemplo,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
En el programa anterior, arrValue tiene solo un elemento. Por lo tanto,
- la variable x será 10
- la variable y toma el valor predeterminado 7
En la desestructuración de objetos, puede pasar valores predeterminados de manera similar. Por ejemplo,
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
Intercambio de variables
En este ejemplo, se intercambian dos variables utilizando la sintaxis de asignación de desestructuración.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Saltar elementos
Puede omitir elementos no deseados en una matriz sin asignarlos a variables locales. Por ejemplo,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
En el programa anterior, el segundo elemento se omite utilizando el separador de coma ,.
Asignar elementos restantes a una sola variable
Puede asignar los elementos restantes de una matriz a una variable utilizando la sintaxis de propagación … . Por ejemplo,
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")
Aquí, onese asigna a la variable x. Y el resto de los elementos de la matriz se asignan a la variable y.
También puede asignar el resto de las propiedades del objeto a una sola variable. Por ejemplo,
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 variable con la sintaxis de propagación no puede tener una coma al final ,. Debería utilizar este elemento rest (variable con sintaxis extendida) como última variable.
Por ejemplo,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Asignación de desestructuración anidada
Puede realizar desestructuraciones anidadas para elementos de matriz. Por ejemplo,
// 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
Aquí, a las variables y y z se les asignan elementos anidados twoy three.
Para ejecutar la asignación de desestructuración anidada, debe encerrar las variables en una estructura de matriz (encerrándolas dentro ()).
También puede realizar desestructuraciones anidadas para propiedades de objetos. Por ejemplo,
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
Para ejecutar la asignación de desestructuración anidada para objetos, debe encerrar las variables en una estructura de objeto (encerrándolas dentro ()).
Nota : La función de asignación de desestructuración se introdujo en ES6 . Es posible que algunos navegadores no admitan el uso de la asignación de desestructuración. Visite el soporte de Desestructuración de Javascript para obtener más información.
