JavaScript moderno tiene muchas características nuevas que facilitan la escritura de código de una manera simple y estructurada. Una de las características modernas útiles disponibles en ES6+ es la desestructuración de matrices y objetos.
Los marcos de JavaScript como React.js y Angular fomentan el uso de esta técnica. Por lo tanto, es esencial comprender de qué se trata la desestructuración y cómo usarla al escribir código.
¿Qué es la desestructuración de objetos y matrices en JavaScript?
La desestructuración en JavaScript se refiere al proceso de desempaquetar valores de una matriz u objeto. Proporciona una forma más concisa de obtener valores de arreglos u objetos sin hacer mucho trabajo cuando está interesado en elementos de arreglos individuales o valores en un objeto.
También es útil cuando se procesan valores de retorno de una función o expresión compleja. Este concepto es uno de los
mejores prácticas que debe seguir al escribir código React.Cómo desestructurar arreglos
Aquí hay un código de muestra para tener una idea de la desestructuración de la matriz:
constante ar = [1, 2];
constante [a, b] = arr;
consola.registro (a) // imprime 1 en la consola
consola.registro (b) // imprime 2 en la consola
Este código utiliza la desestructuración para asignar los valores de Arr—1 y 2—a las variables a y b, respectivamente. Este es el concepto fundamental detrás de la desestructuración. Tiene una matriz u objeto en el lado derecho, y descomprime elementos y los asigna a variables individuales en el lado izquierdo.
Bajo el capó, JavaScript copia valores de Arr y los asigna a las variables en el lado izquierdo así:
constante ar = [1,2];
constante a = arr[0];
constante b = arr[1];
Como puede ver, la desestructuración es una forma más concisa de hacer esto, a diferencia de usar la notación de objeto o paréntesis. Sin embargo, esta sintaxis probablemente será útil cuando se trabaja con matrices o funciones complejas que devuelven matrices o cadenas.
Verifique el código de muestra a continuación:
constante [día, mes, fecha, año, hora, zona horaria] = Fecha().dividir(' ')
// Calling Date() devuelve la fecha actual en el formato:
// lun 20 de febrero de 2023 13:07:29 GMT+0000
consola.log (día) // imprime lunes
consola.log (mes) // imprime febrero
consola.log (fecha) // imprime 20
En este ejemplo de código, estamos creando una nueva cadena con la fecha actual llamando Fecha(). A continuación, usamos dividir(), a Método de cadena de JavaScript, para separar los elementos de la cadena utilizando el espacio como separador. dividir(' ') devuelve una matriz y usamos la desestructuración para asignar los valores a las variables individuales.
Recuerde que si su matriz contiene más elementos de los que está desempaquetando, JavaScript ignorará los elementos adicionales.
constante ar = [1, 2, 3, 4];
constante [a, b] = arr;
consola.registro (a) // imprime 1
consola.registro (b) // imprime 2
// los valores 3 y 4 no se asignan a ninguna variable; son ignorados
En este caso, si desea almacenar los elementos restantes en una variable, use un parámetro de descanso como este:
constante ar = [1, 2, 3, 4];
constante [a, b,... resto] = arr;
consola.log (resto) // imprime [3,4]
A veces, es posible que no te importe un artículo específico. El patrón de desestructuración de JavaScript también le permite omitir ciertos elementos usando una coma vacía.
constante ar = [1, 2, 3, 4];
constante [a,, c] = arr;
consola.registro (c) // imprime 3
El código anterior usa el espacio vacío para ignorar el valor 2 en la matriz Arr. En lugar de asignar valor 2 a variables C, salta al siguiente elemento de la matriz. También ignora el cuarto valor porque no especifica una variable para almacenarlo.
Por el contrario, si necesita menos artículos de los que está desempacando, el proceso le asignará el indefinido valor a esas variables adicionales.
constante ar = [1];
constante [a, b] = arr;
consola.registro (a) // imprime 1
consola.registro (b) // imprime indefinido
Para evitar que las variables no estén definidas, puede establecer valores predeterminados si no está seguro de la longitud de la matriz de la siguiente manera (la asignación de valores predeterminados no es un requisito):
constante ar = [1];
constante [un = '10', segundo = 'no provisto'] = arr;
consola.registro (a) // imprime 1
consola.registro (b) // imprime "no proporcionado"
Esta desestructuración asigna el valor 1 a variables a, sobrescribiendo su valor por defecto. Variable b mantiene su valor predeterminado porque no se proporciona un valor.
Cómo desestructurar objetos
La desestructuración de objetos no es tan diferente de las matrices. La única diferencia es que las matrices son iterables y los objetos no, lo que da como resultado una forma ligeramente diferente de hacer las cosas.
Cuando se trabaja con objetos, las variables del lado izquierdo del operador de asignación también se inicializan como objetos:
constante persona = {nombre: 'Alvin', edad: 10, altura: 1};
constante {nombre, edad, altura} = persona;
consola.log (nombre) // imprime 'Alvin'
consola.log (altura) // imprime 1
Desde el código, estamos usando nombres de propiedad de la persona objeto. Sin embargo, no tiene que usar los nombres de propiedad exactos en el objeto. Puede desestructurar y almacenar los valores en diferentes nombres de variables de la siguiente manera:
constante persona = {nombre: 'Alvin', edad: 10, altura: 1};
constante {nombre: nombre de pila, edad: años, altura: alturaActual} = persona;
consola.log (nombre) // imprime 'Alvin'
consola.log (altura actual) // imprime 1
Comienza especificando el valor de la propiedad que desea desestructurar, luego especifica el nombre de la variable que usará para almacenar el valor después de dos puntos. Y al igual que las matrices, desestructurar un nombre de propiedad que no existe será indefinido.
Para manejar esto, puede especificar valores predeterminados de manera similar en caso de que el nombre de propiedad que desea asignar a una variable no esté disponible:
constante persona = {nombre: 'Alvin', edad: 10, altura: 1};
constante {nombre, edad, altura, ubicación='Mundial'} = persona;
consola.log (nombre) // imprime 'Alvin'
consola.log (ubicación) // imprime 'en todo el mundo'
El orden de las variables en el lado izquierdo no importa con un objeto ya que los objetos almacenan valores en pares clave-valor. Como tal, el siguiente código producirá los mismos resultados:
constante persona = {nombre: 'Alvin', edad: 10, altura: 1};
constante {edad, altura, nombre} = persona;
consola.log (nombre) // imprime 'Alvin'
consola.log (altura) // imprime 1
Por último, de manera similar a las matrices, también puede usar el parámetro rest para desestructurar varios valores en una variable de esta manera:
constante persona = {nombre: 'Alvin', edad: 10, altura: 1};
constante {nombre, ...descanso} = persona;
consola.log (nombre) // imprime 'Alvin'
consola.log (resto) // imprime {edad: 10, altura: 1}
Solo tenga en cuenta que el parámetro de descanso siempre debe ser el último. De lo contrario, JavaScript lanzará una excepción.
Mejore la calidad de su código con la desestructuración de JavaScript
Las funciones modernas de Javascript, como la desestructuración, le permiten escribir código muy legible. Con la desestructuración, puede desempaquetar rápidamente valores de matrices y objetos. La desestructuración también puede resultar útil en otras situaciones, como intercambiar valores de dos variables. Con suerte, ahora comprende lo que significa la desestructuración en JavaScript, y puede usarlo mientras escribe código.
