Desestructuración de JavaScript

Sintaxis de asignación de desestructuración

La sintaxis de asignación de desestructuración desempaqueta propiedades de objeto a variables:

let {nombre, apellido} = persona;

También puede desempaquetar arrays y cualquier otro objeto iterable:

let [nombre, apellido] = persona;

Desestructuración de objeto

Ejemplo

// Crear un objeto
const persona = {
  nombre: "Bill",
  apellido: "Gates",
  edad: 50
};
// Desestructuración
let {nombre, apellido} = persona;

Prueba por ti mismo

El orden de las propiedades no importa:

Ejemplo

// Crear un objeto
const persona = {
  nombre: "Bill",
  apellido: "Gates",
  edad: 50
};
// Desestructuración
let {apellido, nombre} = persona;

Prueba por ti mismo

Valores por defecto de objeto

Para propiedades que pueden estar ausentes, podemos establecer valores por defecto:

Ejemplo

// Crear un objeto
const persona = {
  nombre: "Bill",
  apellido: "Gates",
  edad: 50
};
// Desestructuración
let {nombre, apellido, país = "US"} = persona;

Prueba por ti mismo

Alias de propiedades de objeto

Ejemplo

// Crear un objeto
const persona = {
  nombre: "Bill",
  apellido: "Gates",
  edad: 50
};
// Desestructuración
let {apellido: nombre} = persona;

Prueba por ti mismo

Desestructuración de cadena

Una de las aplicaciones de la desestructuración es desempaquetar caracteres de cadena.

Ejemplo

// Crear una cadena
let nombre = "W3Schools";
// Desestructuración
let [a1, a2, a3, a4, a5] = nombre;

Prueba por ti mismo

Desestructuración de array

Podemos extraer variables de un array a sus propias variables:

Ejemplo

// Crear un array
const frutas = ["Bananas", "Naranjas", "Manzanas", "Mangos"];
// Desestructuración
let [fruta1, fruta2] = frutas;

Prueba por ti mismo

Omitir valores del array

Podemos usar dos o más comas para omitir valores del array:

Ejemplo

// Crear un array
const frutas = ["Bananas", "Naranjas", "Manzanas", "Mangos"];
// Desestructuración
let [fruta1,,,fruta2] = frutas;

Prueba por ti mismo

Valor de posición del array

Podemos extraer valores de posiciones específicas del array:

Ejemplo

// Crear un array
const frutas = ["Bananas", "Naranjas", "Manzanas", "Mangos"];
// Desestructuración
let {[0]: fruta1, [1]: fruta2} = frutas;

Prueba por ti mismo

Propiedad rest

Se puede usar la propiedad rest al final de la sintaxis de desestructuración.

Esta sintaxis almacenará todos los valores restantes en un nuevo array:

Ejemplo

// Crear un array
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Desestructuración
const [a, b, ...rest] = numbers;

Prueba por ti mismo

Desestructurar Map

Ejemplo

// Crear un Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  
]
// Desestructuración
let text = "";
for (const [key, value] of fruits) {
  text += key + " es " + value;
}

Prueba por ti mismo

Intercambio de variables JavaScript

Se puede usar la asignación de desestructuración para intercambiar los valores de dos variables:

Ejemplo

let firstName = "Bill";
let lastName = "Gates";
// Desestructuración
[firstName, lastName] = [lastName, firstName];

Prueba por ti mismo