La desestructuración de arrays es una forma de desempaquetar valores de arrays y asignarlos a variables de manera directa.
Por ejemplo, en lugar de extraer valores de un array usando índices, podemos hacerlo de forma directa con la desestructuración
Veremos la destructuración de objetos
Sintaxis básica
La desestructuración de arrays utiliza corchetes ([]) para asignar valores a variables individuales. El orden de las variables coincide con el orden de los valores en el array. Veamos un ejemplo:
const numeros = [10, 20, 30];
const [a, b, c] = numeros;
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30Vamos a verlo con un ejemplo,
const colores = ["rojo", "verde", "azul"];
// Sin desestructuración
const color1 = colores[0];
const color2 = colores[1];
// Con desestructuración
const [rojo, verde, azul] = colores;
console.log(rojo); // "rojo"
console.log(verde); // "verde"
console.log(azul); // "azul"Saltar elementos
Puedes ignorar ciertos valores utilizando comas.
const numeros = [10, 20, 30];
const [, segundo] = numeros; // Ignora el primer valor
console.log(segundo); // 20En este ejemplo, la coma , indica que estamos ignorando el primer valor del array.
Valores por defecto
Si el array no tiene suficientes valores, puedes asignar valores predeterminados.
const numeros = [10];
const [a, b = 20] = numeros;
console.log(a); // 10
console.log(b); // 20Uso con rest parameters
Puedes capturar el resto de los valores en un array utilizando .... Recuerda que el operador ... debe ir al final para capturar el resto de los valores.
const numeros = [1, 2, 3, 4, 5];
const [primero, segundo, ...resto] = numeros;
console.log(primero); // 1
console.log(segundo); // 2
console.log(resto); // [3, 4, 5]Ejemplos prácticos
Intercambiar valores con desestructuración
Una de las aplicaciones más comunes de la desestructuración es intercambiar el valor de dos variables sin usar una variable temporal.
let a = 1;
let b = 2;
// Intercambiar valores
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1Desestructuración con arrays multidimensionales
Cuando tienes un array que contiene otros arrays (arrays multidimensionales), puedes desestructurarlo de forma anidada.
const matriz = [
[1, 2],
[3, 4],
[5, 6]
];
// Desestructuración anidada
const [[a, b], [c, d], [e, f]] = matriz;
console.log(a, b); // 1 2
console.log(c, d); // 3 4
console.log(e, f); // 5 6Desestructuración en bucles
Puedes usar la desestructuración directamente dentro de un bucle for para extraer valores de un array de manera eficiente.
const frutas = [
["manzana", 1],
["plátano", 2],
["cereza", 3]
];
for (const [fruta, cantidad] of frutas) {
console.log(`${fruta}: ${cantidad}`);
}
// Salida:
// manzana: 1
// plátano: 2
// cereza: 3Desestructuración con salto de varios elementos
Puedes omitir varios elementos del array usando comas, y asignar sólo los elementos que te interesen.
const numeros = [10, 20, 30, 40, 50];
// Solo asignar el primer, segundo y último elemento
const [primero, segundo, , , quinto] = numeros;
console.log(primero); // 10
console.log(segundo); // 20
console.log(quinto); // 50