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: FanLa 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: undefinedSi 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: FanDesestructuració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: ChiValor 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: 23Los 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: Cotlinvar [first = "Cotlin", second = first] = ["Koku"];console.log(first); //Output: Kokuconsole.log(second); //Output: Kokuvar [first = "Cotlin", second = first] = ["Koku", "Lydia"];console.log(first); //Output: Kokuconsole.log(second); //Output: LydiaIgnorando 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: RosesEl 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: MaleDesestructuració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: 2Desestructuració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.