Eliminar asignación de JavaScript

 

Introducción

Si desea seleccionar elementos de una matriz u objeto antes de la actualización de ES2015 a JavaScript, deberá seleccionarlos individualmente o utilizar un bucle.

La especificación ES2015 introdujo la asignación destructiva, una forma más rápida de recuperar elementos de matriz o propiedades de objetos en sus variables.

En este artículo, usaremos la tarea destructiva para encontrar valores de matrices y objetos en variables. Luego veremos un uso avanzado de la tarea destructiva que nos permite establecer valores predeterminados para las variables, capturar entradas indefinidas e intercambiar variables en una sola línea.

Eliminar matriz

Cuando queremos ordenar elementos y usarlos en variables separadas, generalmente escribimos código como este:

let myArray = [1, 2, 3];
let first = myArray[0];
let second = myArray[1];
let third = myArray[2];

Desde la actualización principal de ES2015 a JavaScript, podemos hacer la misma tarea como esta ahora:

let myArray = [1, 2, 3];
let [first, second, third] = myArray;

El segundo ejemplo, más corto, utilizó la sintaxis destructiva de JavaScript myArray. Cuando destruimos una matriz, copiamos los valores de sus elementos con variables. Una sintaxis de descifrado de matriz es como una sintaxis de asignación de variable regular (let x = y;). La diferencia es que hay una o más variables a la izquierda editar.

El código anterior generó tres nuevas variables: first, secondy third. A estas variables también se les asignaron valores: first igual a 1, second igual a 2, y third igual a 3.

Con esta sintaxis, JavaScript ve que first y 1 tiene el mismo índice en sus respectivas matrices, 0. Los valores correspondientes a su orden se asignan a las variables. Siempre que la posición coincida entre la izquierda y la derecha, la asignación destructiva se realizará en consecuencia.

Te puede interesar:Promesas en Node.js.

La sintaxis destructiva también funciona con las cosas, veremos cómo.

Destrucción de objetos

Antes de que la sintaxis no estructurada esté disponible, si quisiéramos almacenar las propiedades del objeto en diferentes variables, escribiríamos un código como este:

const foobar = {
    foo: "hello",
    bar: "world"
};

const foo = foobar.foo;
const bar = foobar.bar;

Con la sintaxis destructiva, podemos hacer lo mismo rápidamente ahora con menos líneas de código:

const foobar = {
    foo: "hello",
    bar: "world"
};

const { foo, bar } = foobar;

Mientras que los artículos de matriz se deconstruyen por su ubicación, las propiedades de los objetos se eliminan de su nombre central. En el ejemplo anterior, después de declarar el objeto foobar luego creamos dos variables: foo y bar. El valor de la propiedad del objeto con el mismo nombre se asigna a cada variable. Por lo tanto foo es «Hola» y bar es un «mundo».

Nota: La tarea destructiva funciona tanto si declaras una variable con var, leto const.

Si prefiere dar un nombre de variable diferente al eliminar un objeto, podemos ajustar nuestro código:

const foobar = {
    foo: "hello",
    bar: "world"
};

const { foo: baz, bar } = foobar;
console.log(baz, bar); // hello world

Con dos puntos, podemos hacer coincidir la propiedad de un objeto y darle un nuevo nombre a la variable creada. El código anterior no crea una variable foo. Si intentas usar foo obtendrás un ReferenceError, lo que indica que no estaba definido.

Ahora que tenemos los conceptos básicos para eliminar artículos y objetos, echemos un vistazo a algunos trucos ingeniosos con esta nueva sintaxis. Comencemos con nuestra selección de valores predeterminados.

Valores predeterminados en variables eliminadas

¿Qué sucede si intentamos deconstruir más variables que la cantidad de elementos de matriz o propiedades de los objetos? Veamos un ejemplo rápido:

Te puede interesar:Construyendo una API REST con Node y Express

let [alpha1, alpha2, alpha3] = ['a', 'b'];

console.log(alpha1, alpha2, alpha3);

Nuestra salida será:

a b undefined

Las variables no especificadas se establecen en undefined. Si queremos evitar que nuestras variables destruidas sean undefined, podemos darles un valor predeterminado. Reutilicemos el ejemplo anterior y el predeterminado alpha3 a ‘c’:

let [alpha1, alpha2, alpha3 = 'c'] = ['a', 'b'];

console.log(alpha1, alpha2, alpha3);

Si ejecutamos esto en node o el navegador, veremos el siguiente resultado en la consola:

a b c

Los valores predeterminados se crean utilizando el = operador cuando creamos una variable. Cuando creamos variables con un valor predeterminado, si hay una coincidencia en el entorno no estructurado, se cancelará.

Declaramos que este es el caso del siguiente ejemplo, que establece un valor predeterminado para un objeto:

const { prime1 = 1, prime2 } = { prime1: 2, prime2: 3 };

console.log(prime1, prime2);

En el ejemplo anterior, hacemos un valor predeterminado prime1 a 1. Debería contrafirmarse como 2 porque un prime1 propiedad sobre el objeto a la derecha de la tarea. Esto ejecuta:

2 3

¡Excelente! Hemos verificado que los valores predeterminados se sobrescriben cuando hay un juego. Esto también es bueno porque el primer número primo es 2 y no 1.

Los valores predeterminados son útiles cuando no tenemos suficientes valores en la matriz u objeto. Veamos cómo manejar situaciones donde hay muchos más valores que no necesitan ser variables.

Capturar entradas no especificadas en una tarea eliminada

A veces intentamos seleccionar algunas entradas de una matriz u objeto y capturar los valores restantes que no pusimos en variables individuales. Podemos hacer eso con el ... operador.

Te puede interesar:Desplegando una aplicación Node.js en un Droplet de DigitalOcean con Docker

Coloque el primer elemento de una matriz en una nueva variable, pero mantenga los otros elementos en una nueva matriz:

const [favoriteSnack, ...fruits] = ['chocolate', 'apple', 'banana', 'mango'];

En el código anterior, establecemos favoriteSnack al «chocolate». Porque usamos el ... operador, fruits igual a los elementos restantes de la matriz, .i ['apple', 'banana', 'mango'].

Nos referimos a las variables creadas por ... en la tarea destructiva como elemento de relajación. El elemento de relajación debe ser el último elemento de la tarea destructiva.

Como puede ser escéptico, también podemos utilizar el elemento de relajación en los artículos:

const { id, ...person } = {
    name: 'Tracy',
    age: 24,
    id: 1020212,
};

Quitamos el id la propiedad del objeto a la derecha de la asignación destructiva en su propia variable. Luego ponemos las propiedades restantes del objeto en un person variable. En este caso, id equivaldría a 1020212 y person equivaldría a { name: 'Tracy', age: 24 }.

Ahora que hemos visto cómo conservar todos los datos, veremos qué tan flexible es la asignación destructiva cuando queremos omitir datos.

Valores selectivos en la tarea eliminada

No es necesario que asignemos cada entrada a una variable. Por ejemplo, si solo queremos asignar una variable a muchas opciones podemos escribir:

const [name] = ['Katrin', 'Judy', 'Eva'];
const { nyc: city } = { nyc: 'New York City', ldn: 'London' };

Fuimos asignados name a ‘Katrin’ de la matriz y city a ‘Ciudad de Nueva York’ desde el objeto. Con los objetos, debido a que somos compatibles con los nombres centrales, es trivial seleccionar ciertas propiedades que queremos en las variables. En el ejemplo anterior, ¿cómo podríamos atrapar a «Katrin» y «Eva» sin tomar también a «Judy»?

La sintaxis destructiva nos permite perforar agujeros para valores que no nos interesan. Usaremos un agujero para atrapar a ‘Katrin’ y ‘Eva’ de una sola vez:

Te puede interesar:Leer y escribir YAML en un archivo en Node.js / JavaScript

const [name1, , name2] = ['Katrin', 'Judy', 'Eva'];

Note la brecha en la tarea variable entre name1 y name2.

Hasta ahora hemos visto cuán flexible puede ser la tarea destructiva, aunque solo se trate de valores planos. En JavaScript, las matrices se pueden editar y los objetos se pueden incrustar con objetos. También podemos ordenar cosas y ordenar cosas. Veamos cómo la tarea destructiva maneja los valores anidados.

Eliminación de valores anidados

Podemos incrustar variables destructivas para hacer coincidir las entradas de matriz de matrices y objetos, lo que nos da un control preciso sobre lo que elegimos. Considere tener una matriz de matrices. Copiemos el primer elemento de cada matriz interna en sus propias variables:

let [[part1], [part2], [part3], [part4]] = [['fee', 'mee'], ['fi', 'li'], ['fo', 'ko'], ['fum', 'plum']];

console.log(part1, part2, part3, part4);

La siguiente salida mostrará el paso de este código:

fee fi fo fum

Doblando todas las variables a la izquierda con [], JavaScript sabe que queremos el valor dentro de una matriz y no la matriz en sí.

Cuando destruimos objetos anidados, necesitamos hacer coincidir la clave del objeto anidado para recuperarlo. Por ejemplo, intentemos capturar algunos datos de prisioneros en JavaScript:

const {
    name,
    crimes: {
        yearsToServe
    }
} = {
    name: 'John Doe',
    crimes: {
        charged: ['grand theft auto', 'stealing candy from a baby'],
        yearsToServe: 25
    }
};

console.log(yearsToServe);

Al yearsToServe propiedad, tenemos que hacer coincidir el anidamiento primero crimes objeto. En este caso, un yearsToServe propiedad de la crimes objeto fijado en 25. Así, nuestro yearsToServe a la variable se le asignará un valor de 25.

Tenga en cuenta que no creamos un crimes objeto en el ejemplo anterior. Creamos dos variables: name y yearsToServe. Aunque necesitamos hacer coincidir la estructura anidada, JavaScript no crea objetos intermedios.

Hasta ahora ha logrado un logro al cubrir muchas de las capacidades de sintaxis eliminadas. ¡Necesitamos ver algunos usos prácticos para él!

Te puede interesar:Usar fetch para enviar solicitudes HTTP en JavaScript

Utilice escenarios para destruir matrices y objetos

Hay muchos usos para eliminar matrices y un objeto, así como las líneas de código de beneficios. A continuación, se muestran algunos casos comunes en los que la reestructuración mejora la legibilidad de nuestro código:

Para bucles

Los desarrolladores utilizan esta tarea destructiva para extraer rápidamente valores de interés de un artículo en un for lazo. Por ejemplo, si desea imprimir todas las claves y valores de un objeto, puede escribir lo siguiente:

const greetings = { en: 'hi', es: 'hola', fr: 'bonjour' };

for (const [key, value] of Object.entries(greetings)) {
    console.log(`${key}: ${value}`);
}

Primero, creamos un greetings una variable que almacena cómo decir «Hola» en varios idiomas. Luego doblamos los valores del objeto usando el Object.entries() método que crea una matriz anidada. Una matriz bidimensional representa cada propiedad de un objeto y el primer elemento es la clave y el segundo es su valor. En este caso, Object.entries() crea la siguiente serie [['en', 'hi'], ['es', 'hola'], ['fr', 'bonjour']].

En nuestro for bucle, deconstruimos las secciones individuales en key y value variables. Luego los registramos en la consola. Este programa genera lo siguiente:

en: hi
es: hola
fr: bonjour

Intercambio de variables

Podemos usar la sintaxis deconstruida para intercambiar variables sin una variable temporal. Supongamos que está trabajando y tomando un descanso. Querías té, aunque tu madre necesitaba café. Desafortunadamente, las bebidas estaban mezcladas. Si esto estuviera en JavaScript, puede intercambiar fácilmente las bebidas usando la sintaxis destructiva:

let myCup = 'coffee';
let coworkerCup = 'tea';
[myCup, coworkerCup] = [coworkerCup, myCup];

Ahora myCup hay ‘té’ y coworkerCup hay ‘café’. Tenga en cuenta que no let, consto var mientras usa la tarea destructiva. Debido a que no estamos declarando nuevas variables, tenemos que omitir esas palabras clave.

Conclusión

Con la tarea destructiva, podemos extraer rápidamente valores de matrices u objetos y ponerlos en sus propias variables. JavaScript hace esto estableciendo la matriz de la variable o haciendo coincidir el nombre de la variable con el nombre de la propiedad del objeto.

Vimos que podemos asignar valores predeterminados a las variables que estamos creando. Podemos capturar las propiedades dejadas por matrices y objetos usando el ... operador. Podemos omitir las entradas haciendo huecos, indicados por comas sin nada entre ellos. Esta sintaxis también es lo suficientemente flexible como para destruir matrices y objetos anidados.

Proporcionamos algunos lugares ingeniosos para usar la tarea destructiva. ¿Dónde los usará a continuación?

Te puede interesar:Introducción a las transmisiones de Node.js

.