La asignación de desestructuración es una adición muy útil a ES6 que nos permite extraer valores de matrices, o propiedades de objetos, en un montón de variables distintas. Es una sintaxis especial que desempaqueta arreglos y objetos en múltiples variables.
La desestructuración es extremadamente útil cuando no desea pasar el objeto o la matriz a una función como un todo, sino como piezas individuales. Veamos cómo se hace en los siguientes ejemplos.
Desestructuración de matrices
La sintaxis de desestructuración de matrices crea automáticamente variables con los valores de los elementos correspondientes en una matriz:
const fruits = ['Apple', 'Mango', 'Cherry'];
const [apple, mango, cherry] = fruits;
console.log(apple); // Apple
console.log(mango); // Mango
console.log(cherry); // Cherry
Omitir valores
Los elementos no deseados de la matriz se pueden omitir usando una coma adicional y dejando los nombres de las variables vacíos:
const fruits = ['Apple', 'Mango', 'Cherry'];
const [apple, , cherry] = fruits;
console.log(apple); // Apple
console.log(cherry); // Cherry
Desestructurar una parte de la matriz
Incluso puede optar por desestructurar una parte de la matriz y asignar el resto de la matriz a una nueva variable:
const fruits = ['Apple', 'Mango', 'Cherry'];
const [apple, ...remaining] = fruits;
console.log(apple); // Apple
console.log(remaining); // ['Mango', 'Cherry']
Asignar valores a un objeto
¿Qué sucede si desea asignar los valores de la matriz a un objeto? Puede hacerlo fácilmente con la desestructuración de la matriz:
let user = {};
[user.name, user.age] = ['John Doe', 29];
console.log(user.name); // John Doe
console.log(user.age); // 29
Valores predeterminados
Si hay menos valores en la matriz que las variables especificadas en la asignación, no habrá ningún error. La desestructuración asigna automáticamente valores predeterminados a variables adicionales:
const [name, age] = ['Atta'];
console.log(name); // Atta
console.log(age); // undefined
También puede definir sus propios valores predeterminados para las variables en la tarea:
const [name = 'John Doe', age = 30] = ['Atta'];
console.log(name); // Atta
console.log(age); // 30
El age la propiedad vuelve a 30 porque no está definido en la matriz.
Intercambio de variables
La asignación de desestructuración también se puede usar para intercambiar los valores de dos variables:
let a = 15;
let b = 5;
[a, b] = [b, a];
console.log(a); // 5
console.log(b); // 15
Destrucción de objetos
La asignación de desestructuración también funciona con objetos de JavaScript. Sin embargo, las variables de asignación deben tener nombres coincidentes con las claves del objeto. Esto se debe a que las claves de objeto no están necesariamente en un orden particular.
Aquí hay un ejemplo básico:
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const { cat, whale, monkey } = animals;
console.log(cat); // 🐱
console.log(whale); // 🐋
console.log(monkey); // 🐒
Usando un nuevo nombre de variable
Si desea asignar valores de un objeto a claves nuevas en lugar de usar el nombre de las claves de objeto existentes, puede hacer lo siguiente:
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const { cat: newCat, whale: newWhale, monkey: newMonkey } = animals;
console.log(newCat); // 🐱
console.log(newWhale); // 🐋
console.log(newMonkey); // 🐒
Valores predeterminados
Al igual que en la desestructuración de matrices, los valores predeterminados también se pueden usar en la desestructuración de objetos:
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const { cat, sheep = '🐑', lion } = animals;
console.log(cat); // 🐱
console.log(sheep); // 🐑
console.log(lion); // undefined
También puede establecer valores predeterminados cuando asigna valor a una nueva variable:
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const { cat, sheep: wool = '🐑'} = animals;
console.log(cat); // 🐱
console.log(wool); // 🐑
Nombre de propiedad calculado
El nombre de la propiedad calculada es otra característica de ES6 que también funciona para la desestructuración de objetos. Permite que los nombres de las propiedades de los objetos en notación literal de objetos de JavaScript se calculen dinámicamente.
Aquí hay un ejemplo que calcula el nombre de la propiedad del objeto usando la notación "Nombre de propiedad calculado":
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const prop = 'monkey';
const { [prop]: newMonkey } = animals;
console.log(newMonkey); // 🐒
Extracción de matrices del objeto
La desestructuración del objeto también funciona para las matrices presentes dentro del objeto como valores:
const user = { name: 'Atta', friends: ['Ali', 'Amir'] };
const { name, friends } = user;
console.log(name); // Atta
console.log(friends); // ['Ali', 'Amir']
Desestructuración de objetos anidados
El objeto puede contener objetos anidados durante la desestructuración. Debe definir la misma estructura de anidamiento en el lado izquierdo de la asignación para extraer valores de objetos más profundos:
const user = {
name: 'Atta',
place: {
city: 'Sahiwal',
country: 'Pakistan'
}
};
const { name, place: { city, country } } = user;
console.log(name); // Atta
console.log(city); // Sahiwal
console.log(country); // Pakistan
Todas las propiedades del user objeto se asignan a variables en la asignación. Finalmente, tenemos name , city y country variables distintas. Tenga en cuenta que no hay variable para place ya que solo extrajimos su contenido.
Desestructurar una parte del objeto
Al igual que las matrices, también puede desestructurar una parte del objeto y asignar el resto del objeto a una nueva variable:
const user = {
name: 'Atta',
place: {
city: 'Sahiwal',
country: 'Pakistan'
}
};
const { name, ...location } = user;
console.log(name);
// Atta
console.log(location);
// { place: { city: 'Sahiwal', country: 'Pakistan' } }