Una breve introducción a la desestructuración de matrices en ES6

Programación

La desestructuración en JavaScript es un método simplificado de extraer múltiples propiedades de una matriz tomando la estructura y deconstruyéndola en sus propias partes constituyentes a través de asignaciones usando una sintaxis similar a los literales de matriz.

Crea un patrón que describe el tipo de valor que espera y realiza la tarea. Posición de usos de desestructuración de matrices.

Vea el siguiente fragmento de código.

var [first, second, third] = ["Laide", "Gabriel", "Jets"];

La sintaxis con la desestructuración.

var first = "laide", second = "Gabriel", third = "Jets";

La sintaxis sin desestructurar.

No puedes usar Numbers para desestructurar. Los números arrojarán un error porque los números no pueden ser nombres de variables. 
var [1, 2, 3] = ["Laide", "Ola", "Jets"];

Esta sintaxis arroja un error.

La desestructuración ha hecho que la extracción de datos de una matriz sea muy simple y legible. Imagínese intentar extraer datos de una matriz anidada con 5 o 6 niveles. Eso sería muy tedioso. Utiliza un literal de matriz en el lado izquierdo de la asignación.

var thing = ["Table", "Chair", "Fan"];var [a, b, c] = thing;

Toma cada variable en el literal de matriz en el lado izquierdo y la asigna al mismo elemento en el mismo índice en la matriz.

console.log(a); // Output: Tableconsole.log(b); //Output: Chairconsole.log(c); //Output: Fan

La declaración y la asignación se pueden hacer por separado en la desestructuración.

var first, second;[first, second] = ["Male", "Female"];

Si el número de variables pasadas a los literales de la matriz de desestructuración es mayor que los elementos de la matriz, entonces las variables que no están asignadas a ningún elemento de la matriz regresanundefined.

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c, d, e] = things;console.log(c); //Output: Fanconsole.log(d); //Output: Rugconsole.log(e); //Output: undefined

Si el número de variables que se pasan a los literales de la matriz de desestructuración es menor que los elementos de la matriz, los elementos sin variables a los que se deben asignar se quedan. No hay errores de ningún tipo.

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c] = things;console.log(c); // Output: Fan

Desestructuración de matrices devueltas

La desestructuración hace que trabajar con una función que devuelve una matriz como valor sea más preciso. Funciona para todos los iterables.

function runners(){ return ["Sandra", "Ola", "Chi"];}
var [a, b, c] = runners();console.log(a); //Output: Sandraconsole.log(b); //Output: Olaconsole.log(c); //Output: Chi

Valor por defecto

La desestructuración permite asignar un valor predeterminado a una variable si no hay valor o undefinedesta pasado. Es como proporcionar un respaldo cuando no se encuentra nada.

var a, b;[a = 40, b = 4] = [];console.log(a); //Output: 40console.log(b); //Output: 4
[a = 40, b = 4] = [1, 23];console.log(a); //Output: 1console.log(b); //Output: 23

Los valores predeterminados también pueden hacer referencia a otras variables, incluida la del mismo literal de matriz.

var [first = "Cotlin", second = first] = [];console.log(first); //Output: Cotlinconsole.log(second); //Output: Cotlin
var [first = "Cotlin", second = first] = ["Koku"];console.log(first); //Output: Kokuconsole.log(second); //Output: Koku
var [first = "Cotlin", second = first] = ["Koku", "Lydia"];console.log(first); //Output: Kokuconsole.log(second); //Output: Lydia

Ignorando algunos valores

La desestructuración le permite asignar una variable a los elementos que le interesan. Puede ignorar u omitir los otros elementos de la matriz utilizando comas finales.

var a, b;[a, , b] = ["Lordy", "Crown", "Roses"];
console.log(a); //Output: Lordyconsole.log(b); //Output: Roses

El parámetro resto y la sintaxis de propagación

El nuevo operador (…) que se agregó en ES6 se puede utilizar en la desestructuración. Si el operador (…) aparece en el lado izquierdo en la desestructuración, entonces es un PARÁMETRO DE REPOSO . Un parámetro Rest se utiliza para mapear todos los elementos restantes en la matriz que no se han mapeado a la propia variable rest. Es como juntar lo que queda . La variable Rest siempre debe ser la última, de lo contrario se lanza a.SyntaxError

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, , third, ...others] = planets;
console.log(first); //Output: Mercuryconsole.log(third); //Output: Venusconsole.log(others); //Output: ["Mars", "Pluto", "Saturn"]

Si el operador (…) aparece a la derecha en la desestructuración, entonces es una SINTAXIS DE SPREAD . Esotoma todos los demás elementos de la matriz que no tienen una variable asignada y luego los asigna a la variable rest.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Cuando puede tener más variables en el lado izquierdo, asigna los elementos individuales de la matriz por igual a las variables.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", ...planets];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Mercuryconsole.log(rest); //Output: ["Earth", "Venus", "Mars", "Pluto", "Saturn"]
var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, third, fourth ...rest] = ["Mercury", "Earth", ...planets];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(third); //Output: Mercuryconsole.log(fourth); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Intercambiar o intercambiar variables

Se puede utilizar una expresión de desestructuración para intercambiar los valores de dos variables.

var a, b;[a, b] = ["Male", "Female"];[a, b] = [b, a];
console.log(a); //Output: Femaleconsole.log(b); //Output: Male

Desestructuración de matrices anidadas

También puede realizar desestructuraciones anidadas con matrices. El elemento correspondiente debe ser una matriz para poder usar un literal de matriz de desestructuración anidado para asignar elementos en él a variables locales.

var numbers = [8, [1, 2, 3], 10, 12];var [a, [d, e, f]] = numbers;
console.log(a); // Output: 8console.log(d); // Output: 1console.log(e); // Output: 2

Desestructuración de matrices múltiples

Puede desestructurar una matriz más de una vez en el mismo fragmento de código.

var places = ["first", "second", "third", "fourth"];var [a, b, , d] = [f, ...rest] = places;
console.log(a); //Output: firstconsole.log(d); //Output: fourthconsole.log(f); //Output: firstconsole.log(rest); //Output: ["second", "third", "fourth"]

Conclusión

Puede copiar y pegar el código en el sitio web de Babel para ver cómo se vería el código si no existiera la desestructuración. Habría escrito más líneas de código, pero la desestructuración lo simplifica todo.