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.

    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:

    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.

    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:

    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!

    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?

    .

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *