¿Qué es la deconstrucción?
La deconstrucción es completamente opuesta a la construcción de datos. Por ejemplo, en lugar de construir un nuevo objeto o matriz, divide el objeto o matriz existente uno por uno para extraer los datos que necesita.
ES6 utiliza un nuevo patrón para que coincida con los valores numéricos que desea extraer, y la asignación de deconstrucción adopta este patrón. Este patrón asignará la estructura de datos que está deconstruyendo, y solo se extraerán aquellos datos que coincidan con el patrón.
El elemento de datos deconstruidos se encuentra en el operador de asignación A la derecha de =, puede ser cualquier combinación de matrices y objetos, permitiendo anidación arbitraria. No hay límite para el número de variables utilizadas para asignar valores a estos datos.
Destrucción de la matriz
La deconstrucción de la matriz utiliza una matriz como elemento de datos, y puede extraer los valores de esta matriz para asignar valores a una o más variables de acuerdo con el patrón de matriz (utilizado para que coincida con los valores que necesita de la matriz).
El patrón de matriz se usa para identificar qué valores son lo que desea extraer en función de la posición de los valores. Debe poder asignar con precisión la estructura de la matriz para que a cada variable en el patrón de matriz se le asigne un valor correspondiente a la posición en la matriz deconstruida.
Déjame darte algunos ejemplos para ayudarnos a comprender:
Ejemplo de patrón de matriz
Asigne todos los valores en la matriz a variables individuales
// establecer la matriz const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // deconstruir la matriz a una variable. El patrón de matriz se encuentra a la izquierda del operador de asignación `=`, y la matriz estructurada está a la derecha de //. const [Ironman, Cap, BlackWidow] = Avengers; // Ironman = 'Tony Stark' // cap = 'Steve Rogers' // BlackWidow = 'Natasha Romanoff' // Output Ironman: Ironman;
Extraer todos los valores excepto el primero
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // No necesitamos usar Tony Const [, Cap, BlackWidow] = Avengers; // Ironman = Error: Undefined // Cap = 'Steve Rogers' // BlackWidow = 'Natasha Romanoff' // Salida Cap: Cap;
Extraer todos los valores excepto el segundo
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Cap Falt Const [Ironman, BlackWidow] = Avengers; // Ironman = 'Tony Stark' // Cap = Error: Undefined // BlackWidow = 'Natasha Romanoff' // Output BlackWidow: BlackWidow;
Extraer todos los valores excepto el último
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Ironman vs Cap const [Ironman, Cap] = Avengers; // Ironman = 'Tony Stark' // cap = 'Steve Rogers' // BlackWidow = Error: Undefined // output BlackWidow: Ironman;
Matrices anidadas
Este patrón de coincidencia también admite matrices anidadas, siempre que el operador de asignación = el patrón de matriz de la izquierda coincida con la estructura de la matriz a la derecha. Permítanme explicar nuevamente que las variables de la izquierda se asignarán el valor correspondiente a la posición en la matriz a la derecha. No importa cuán profundamente los anides, aún puedes deconstruirlos.
Deconstrucción de matrices anidadas
// Destructores de matrices anidadas const Avengers = ['Natasha Romanoff', ['Tony Stark', 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']]; // Avengers y sus socios const [BlackWidow, [Ironman, Warmachine], [Cap, Falcon] = Avengers; // BlackWidow = 'Natasha Romanoff' // Ironman = 'Tony Stark' // Warmachine = 'James Rhodes' // cap = 'Steve Rogers' // falcon = 'Sam Wilson' // Salida Warmachine: Warmachine;
Extraer un valor de una matriz profundamente anidada
// Extraer Pepper Potts const Avengers de esta matriz = ['Natasha Romanoff', [['Tony Stark', 'Pepper Potts'], 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']]; // Destructure const [, // omita 'natasha romanoff' [[[, // omita 'tony stark' his // pepper se asigna a la variable 'hera']] = Avengers; // Tenga en cuenta: también puede escribir de esta manera // const [, [[, hera]]] = Avengers; // Salida Hera: Hera; // hera = 'Pepper Potts'
Use el operador REST para capturar todos los elementos restantes
Si desea obtener un elemento de matriz específico y colocar los elementos restantes en una matriz, puede usar el operador REST para deconstruirlo así :
// Deconstruyo const Avengers a través del operador REST = ['Natasha Romanoff', 'Tony Stark', 'Steve Rogers']; const [BlackWidow, ... Theothers] = Avengers; los demás; // BlackWidow = 'Natasha Romanoff' // theothers = ['Tony Stark', 'Steve Rogers'] // emitir theothers: theothers;
Destrucción de objetos
La deconstrucción de objetos es aún más mágica, especialmente cuando necesita tomar valores de un objeto complejo y profundamente anidado, lo cual es más obvio. Para reiterar, la deconstrucción de objetos y la deconstrucción de la matriz usan las mismas reglas (es decir, cree un patrón de objeto en el lado izquierdo del operador de asignación, de modo que su posición variable coincida con la posición de valor del objeto en el lado derecho).
En la destrucción de objetos, debe especificar los nombres de atributos que deben extraerse y los nombres variables que se asignarán. Al igual que la deconstrucción de la matriz, necesitamos crear un patrón de objeto para mapear el objeto deconstruido en el lado izquierdo del operador de asignación.
Aunque en este caso, lo que queremos extraer es el valor de la propiedad del objeto (como: extraemos value de { prop: value }). En consecuencia, nuestro patrón de objeto debe tener una variable, y la posición de esta variable debe ser consistente con la posición del valor de la propiedad que estamos a punto de extraer.
Ejemplo simple
Extraer un valor de atributo de objeto simple
Podemos hacer esto para asignar el valor de la propiedad ironMan de Object { ironMan: 'Tony Stark' } 'Tony Stark' la variable a :
// Deconstruya el valor de la propiedad del objeto y asigna a una sola variable `a`: const {Ironman: a} = {Ironman: 'Tony Stark'}; // Salida A: A; // a = 'Tony Stark'Extraer múltiples valores de atributos
Mientras ampliemos el mismo patrón, podemos extraer múltiples valores de atributos de un objeto, como sigue:
// Configurar nuestro objeto const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', BlackWidow: 'Natasha Romanoff'}; // Destructure Object a Variables individuales const {Ironman: A, Cap: B, BlackWidow: C} = Avengers; // a = 'Tony Stark' // b = 'Steve Rogers' // c = 'Natasha Romanoff' // Salida A: A;Observe cómo este patrón de deconstrucción coincide exactamente con el objeto deconstruido.
Destrucción de objetos anidados
Al igual que la deconstrucción de matrices anidadas, podemos deconstruir objetos anidados, sin importar cuán profundos sean.
// Configurar nuestro objeto const Avengers = {BlackWidow: 'Natasha Romanoff', IronManCharacters: {pareja: {Ironman: 'Tony Stark', Hera: 'Pepper Potts',}, Partner: {Warmachine: 'James Brodie'}}, CapeCers: {Cap: 'Steve Rogers', Partner: {Falcon: {Samson '}}}}}}} }; // Destructure Object a las variables individuales const {BlackWidow: A, IronManCharacters: {pareja: {Ironman: B, Hera: C}, Partner: {Warmachine: D}}, Capcharacters: {cap: e, pareja: {falcon: f}}} = avengers; // a = 'Natasha Romanoff' // b = 'Tony Stark' // c = 'Pepper Potts' // d = 'James Brodie' // e = 'Steve Rogers' // f = 'Sam Wilson' // Salida A: A;Nombre la variable asignada
Por supuesto, es malo establecer nombres de variables como A, B, C y los nombres de variables deberían tener sentido.
Nombramiento
// Configurar nuestro objeto const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', BlackWidow: 'Natasha Romanoff'}; // Destructure Object a Variables individuales con nombres significativos const {Ironman: Ironman, Cap: Cap, BlackWidow: BlackWidow} = Avengers; // BlackWidow = 'Natasha Romanoff' // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Output BlackWidow: BlackWidow; Este enfoque es mejor que el nombre anterior A, B y C , pero aún se puede mejorar. { ironMan: ironMan } se ve un poco feo y no intuitivo.
Atajos sincronizados sintácticamente
Si desea asignar el valor de atributo de un objeto a una variable, y el nombre de la variable es el mismo que el nombre del atributo del objeto, entonces en el modo de asignación en el lado izquierdo de = , solo necesita escribir el nombre del atributo, como sigue:
// Configurar nuestro objeto const avenger = {Ironman: 'Tony Stark'}; // Destructure objeto a variables individuales con nombres significativos const {Ironman // equivalente a 'Ironman: Ironman'} = Avenger; // Ironman = 'Tony Stark' // Output Ironman: Ironman;Dado que el nombre del atributo del objeto deconstruido es el mismo que el nombre de la variable asignado, solo necesitamos enumerar el nombre una vez.
Gramática concisa
Vamos a retuitrar un poco el código anterior para que se vean más concisos y claros:
// Configurar nuestro objeto const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', BlackWidow: 'Natasha Romanoff'}; // Destructure Object a Variables individuales con nombres significativos const {Ironman, Cap, BlackWidow} = Avengers; // Salida Ironman: Ironman;Extraer una propiedad profundamente anidada de un objeto
Las cosas son aún más interesantes cuando queremos extraer una propiedad de objeto profundamente anidada:
// Configurar nuestro ObjectConst Avengers = {BlackWidow: 'Natasha Romanoff', IronManCharacters: {pareja: {Ironman: 'Tony Stark', Hera: 'Pepper Potts',}, Partner: {Warmachine: 'James Brodie'}}, CapCharacter: {Cap: 'Steve Rogers', Partner: {Falcon: »» }}; // Destructure a un ObjectConst profundamente anidado {IronManCharacters: {pareja}} = Avengers; // pareja = {// Ironman: 'Tony Stark', // Hera: 'Pepper Potts', //} // Salida pareja: pareja;Espera, ¿cómo leíste este código? ¿Cómo se define la pareja variable?
Al dividir de esta manera, podemos ver que el operador de asignación = a la izquierda es un mapa del objeto deconstruido:
const avengers = {IronManCharacters: {pareja: {Ironman: 'Tony Stark', Hera: 'Pepper Potts',}}}; const {IronManCharacters: {pareja}} = Avengers; // Outputing pareja: pareja; Solo usando const { couple } = avengers; No hay forma de extraer el valor de la pareja . Solo mapeando la ubicación y el nombre del atributo del objeto que se extraerá puede el compilador JS obtener la información correspondiente, buscar hacia abajo a lo largo de todos los atributos del objeto y extraer con precisión el valor que queremos.
También debe tenerse en cuenta aquí que la pareja usa atajos de sintaxis para nombrar variables, que en realidad es así:
const {IronManCharacters: {pareja: pareja}} = Avengers;Así es como se define la pareja , y su valor es el valor cuyo nombre de atributo pareja en el objeto Avengers .
Deconstruir los atributos del objeto
Hasta ahora, hemos deconstruido el valor del objeto para asignar valores a una sola variable, y de hecho también podemos asignar valores a las propiedades de otro objeto.
const avengers = {BlackWidow: 'Natasha Romanoff', IronManCharacters: {pareja: {Ironman: 'Tony Stark', Hera: 'Pepper Potts'}}}; const IronmanProperties = {Family: {}}; ({IronManCharacters: {pareja: IronManProperties.Family}}}}}; IronmanProperties.family// IronmanProperties.Family = {// Ironman: 'Tony Stark', // Hera: 'Pepper Potts' //} // Output IronmanProperties.Family:IronManProperties.family; Aquí asignamos el valor de ironManCharacters.couple a la propiedad de ironManProperties.family . Aquí hay dos puntos por explicar:
1. La asignación de deconstrucción debe incluirse entre paréntesis
Cuando deconstruimos una variable existente (como IronmanProperties en el ejemplo anterior), debemos hacer esto en lugar de declarar una nueva variable.
2. El patrón todavía coincide
{ ironManCharacters: { couple... } } coincide con IronmanCharacters en Object Avengers . De esta manera, puede extraer el valor de IronmanCharacters ironManCharacters.couple Pero ahora, un nuevo objeto IronmanProperties y su familia de propiedades se colocan detrás de la pareja . De hecho, la propiedad ironManProperties.family La familia de este objeto realmente se asigna.
¿Todavía estás confundido cuando intentas explicar esta situación claramente? Pruebe el código anterior en JSFIDDLE y todo estará claro.
Si no está seguro de por qué está haciendo esto, consulte el ejemplo en el siguiente artículo. ¡Estos ejemplos le dirán por qué este patrón se usa para deconstruir el objeto JSON llamado por API, lo que le permite apreciar la magia de la deconstrucción!
valor predeterminado
Al deconstruir, también puede especificar un valor predeterminado a la variable:
// Configurar nuestro objeto const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', BlackWidow: 'Natasha Romanoff'}; // Destructure usando los valores predeterminados const {Ironman, Cap, BlackWidow, theHulk = 'Bruce Banner'} = Avengers; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // BlackWidow = 'Natasha Romanoff' // thehulk = 'Bruce Banner' // Output BlackWidow: BlackWidow;Evite estos problemas durante la deconstrucción
Const, let, var no se usa al deconstruir la asignación
Este punto se ha mencionado al hablar sobre deconstruir y asignar propiedades del objeto, pero aún es necesario reiterarlo aquí para dar a todos una profunda impresión.
No se puede deconstruir variables declaradas
Es decir, solo puede declarar variables mientras deconstruye las variables.
// Configurar nuestro objeto const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', BlackWidow: 'Natasha Romanoff', TheHulk: 'Bruce Banner'}; // Destructura válida const {Ironman} = Avengers; Sea {Cap} = Avengers; var {BlackWidow} = Avengers; // Destructuración inválida deja que Thehulk; {theHulk} = Avengers; // Error // Salida TheHulk: theHulk;¿Por qué no se puede deconstruir una variable declarada? Eso es porque si usa aparatos ortopédicos rizados { entonces JavaScript pensará que está declarando un bloque .
La solución es encerrar toda la asignación deconstruida en un par de soportes .
Cómo deconstruir y asignar una variable declarada
// Configurar nuestro objeto const Avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', BlackWidow: 'Natasha Romanoff', TheHulk: 'Bruce Banner'}; // un Hulk válido deja TheHulk; ({theHulk} = Avengers); // thehulk = 'Bruce Banner' // emitir thehulk: thehulk;Ahora no comenzamos con aparatos ortopédicos rizados, por lo que JS no pensará que estemos declarando un bloque para que podamos lograr el resultado de deconstrucción esperado.
Devuelve un valor deconstruido directamente
Cuando una variable que se devolverá a continuación no se declara primero, se devuelve directamente un valor deconstruido, lo que no logrará el efecto esperado. Por ejemplo, en el siguiente código, el objeto Ironman completo devuelto no será el valor esperado de Tony Stark .
// NOTA: ¡Esto no funciona! función getTonyStark (Avengers) {return {Ironman: {RealName}} = Avengers; // Devuelve el objeto Avengers, no el valor real de nombre} const Avengers = {Ironman: {RealName: 'Tony Stark'}}; const tonystark = getTonyStark (Avengers); // tonystark = {// Ironman: {// RealName: 'Tony Stark' //} //}; // Salida TonyStark: TonyStark;Para extraer un valor de un objeto deconstruido, primero debe asignarlo a una variable y luego devolver esta variable, como se muestra en el siguiente código:
// NOTA: ¡Esto funciona! function getTonyStark (Avengers) {const {Ironman: {RealName}} = Avengers; devolver el nombre real; } const Avengers = {Ironman: {RealName: 'Tony Stark'}}; const tonystark = getTonyStark (Avengers); // tonystark = 'Tony Stark' // Salida TonyStark: TonyStark;Esta forma de dividir la asignación y el retorno en dos líneas de código es realmente molesta, y el código es feo e innecesario. Desafortunadamente, JavaScript funciona así: debe asignar el valor deconstruido a una variable primero, y luego devolverlo, y los dos pasos deben hacerse por separado.
Sin embargo, no dijimos que lo hicimos por separado, y no dijimos que debemos ponerlo en dos líneas de código. Entonces, escribirlo en una línea como la siguiente también puede lograr los resultados esperados:
function getTonyStark (Avengers) {return ({Ironman: {RealName}} = Avengers) && RealName; } const Avengers = {Ironman: {RealName: 'Tony Stark'}}; const tonystark = getTonyStark (Avengers); // tonystark = 'Tony Stark' // Salida TonyStark: TonyStark; Dado que el operador _short-circuit_ Circuit_Logical de JavaScript (&&& and ||) devuelve el valor del segundo operando en función del valor del primer operando, este método de escritura puede lograr el efecto esperado. Aquí, el primer operando es deconstruir la expresión de asignación y asignar el valor a RealName . RealName es el segundo operando, por lo que su valor finalmente se devuelve.
Esto no es óptimo, pero se puede lograr. Mientras persigue la escasez del código, debe prestar atención a la legibilidad del código.
Resumir
Este artículo explica en profundidad los principios principales de deconstruir la asignación. La deconstrucción no solo reduce la cantidad de su código, sino que también cambia fundamentalmente la forma en que lo codifica. Cuanto más lo use, más formas de dar forma a los datos y las funciones, que eran casi imposibles en el pasado. Espero que este artículo sea útil para que todos aprendan ES6.