Post Top Ad

Your Ad Spot

martes, 13 de octubre de 2020

Mejoras literales de objetos ES6

 

Los literales de objetos en ES6 han experimentado algunas mejoras con respecto a sus predecesores ES5. Estas mejoras ayudan a los desarrolladores a resolver problemas con menos escritura y menos código. Además de esto, muchos encuentran que los nuevos estilos de sintaxis son más concisos y fáciles de entender. En este tutorial ES6, vamos a echar un vistazo a Mejoras de objeto como objeto literal taquigrafía , método objeto de la taquigrafía , claves de objeto Computarizada y objetos desestructuración . Saltemos de inmediato.


ES6 Taquigrafía literal del objeto

Los objetos en JavaScript siempre han sido bastante fáciles de crear utilizando la sintaxis literal de objeto estándar Echemos un vistazo a cómo armar un objeto usando ES5. Observe que dentro del legosetobjeto, asignamos las variables de partnumberdescriptiona las propiedades del objeto con el mismo nombre.

Literal de objeto ES5

Literal de objeto ES6

Podemos reescribir este objeto literal aquí usando la sintaxis de ES6. En ES6, si tiene variables en el contexto que tienen el mismo nombre que las propiedades del objeto, ya no tiene que escribir el nombre dos veces como en ES5. El objeto literal aquí de legosetasume automáticamente los valores de las variables correspondientes en el contexto, siendo partnumberdescriptionEsa es una adición agradable y bienvenida al idioma que le permitirá escribir menos.

ES5 Devolución de un objeto

Ahora, creamos una función y dentro de esa función hay un par de variables de makemodelLuego devolvemos un objeto literal que contiene esos valores. Nuevamente, en ES5 debemos escribir dos veces los nombres de las variables. Rehagamos esto en ES6.

ES6 Devolución de un objeto

En ES6 podemos devolver un objeto literal de una manera súper concisa. Aquí tenemos la misma función con las mismas variables. Podemos devolver un objeto que contenga esos valores como propiedades muy fácilmente como ve aquí. Los resultados son los mismos que los anteriores.


Método abreviado del objeto ES6

Como sabemos, los objetos no son solo para almacenar datos, también pueden contener funciones o métodos. En ES5 logramos esto escribiendo manualmente la palabra clave de función y la función asociada después de una propiedad específica en el objeto. Esto funciona bien, pero se mejora en ES6 con una notación taquigráfica más limpia.

Método de objeto ES5

Método abreviado del objeto ES6

El ejemplo actualizado de un método de objeto que utiliza taquigrafía está aquí. El método que estamos viendo, por supuesto, aquí es el buildset()método. Ya no tenemos que escribir manualmente la propiedad y luego usar la palabra clave de función. Simplemente escriba el nombre de su método seguido de paréntesis y listo. Muy agradable.

ES5 Segundo ejemplo de un método de objeto

Este es solo otro ejemplo de un método de objeto en ES5. La racepropiedad del objeto literal que se devuelve contiene una función denominada raceFunciona, pero ES6 puede hacerlo mejor.

ES6 Segundo ejemplo de taquigrafía del método de objeto

En esta iteración del método del objeto, de nuevo hacemos uso de la sintaxis abreviada del método del objeto. Simplemente escribimos race()con nuestro código de función entre llaves y todo está bien. Además, puede ver que hacemos uso de la nueva plantilla literal con interpolación de cadenas haciendo uso del carácter de tilde. Ahora tenemos la interpolación de cadenas en JavaScript similar a cómo PHP maneja la interpolación de cadenas.


Claves de objeto calculado ES6

En ES5 entendemos los objetos como matrices asociativas, o hashmaps, con claves basadas en cadenas. Hasta ahora esas claves han sido inmutables. En ES6, ahora es posible construir propiedades de objeto, o claves, dentro del objeto utilizando la notación de corchetes en la clave del objeto. Es un poco complicado ya que es un concepto tan nuevo, así que veamos algunos ejemplos. Esta vez, veremos primero ES6 y luego el código equivalente que tomaría en ES5.

Clave de objeto calculado ES6

En este ejemplo, observe que tenemos corchetes alrededor de la descriptionclave en el legosetobjeto. Como resultado de esto, la cadena 'descripción' no es la clave, sino que el valor que contiene se convierte en la clave del objeto. Este es un ejemplo de una clave de objeto calculada en ES6.

Aquí está el código ES5 requerido para hacer lo mismo. No es divertido.

Expresión de clave de objeto ES6

En este ejemplo, mostramos que incluso puede llamar a un método directamente en la clave del objeto.

La versión ES5 de esto no es tan fácil.

Esto es un poco complicado aquí, donde configuramos una matriz, y luego usamos esa matriz de diferentes maneras como las claves reales de nuestro coolobjectAl colocar corchetes alrededor de la clave de un objeto, está configurando una clave calculada en ES6.


Desestructuración de objetos ES6

Sacar datos de objetos y matrices para usarlos en su programa es una de las cosas más comunes que deberá hacer al escribir JavaScript. ES6 agrega algunas características nuevas para intentar hacer esto más fácil con la desestructuración. Al usar una expresión de desestructuración, toma el valor a la derecha del =signo y lo separa para asignar variables a la izquierda del =signo. Con suerte, tiene sentido en este ejemplo.

Ejemplo de desestructuración de objetos 1

Como podemos ver aquí, simplemente usando un operador de asignación podemos tomar los valores de un objeto y extraerlos en nuevas variables para usar en su programa. Además, puede elegir los valores con los que desea trabajar, no es necesario que sea el objeto completo. Así que aquí tenemos nuestro objeto de estudiante, pero solo queremos hacer uso de las claves de correo electrónico y nextClass en nuestro código. Usando la expresión de let {email, nextClass} = estudiante; , eso es exactamente lo que logramos.

Ejemplo de Desestructuración de Objetos 2

Este ejemplo de desestructuración de objetos establece un purchasepriceobjeto con un precio de venta de 5, un precio medio de 10 y un precio de margen de 15. A continuación, utilizamos la desestructuración de objetos para extraer esos valores en variables. Desconectamos el valor de markupy obtenemos el valor correcto de 15.

Es importante asegurarse de que las propiedades coincidan entre el objeto y nuestras nuevas variables. Así que en nuestro purchasepriceobjetivo aquí tenemos una saleaveragemarkuppropiedad. Esos coinciden exactamente con nuestras nuevas variables con las que estamos usando la desestructuración.

Ejemplo de desestructuración 3

El ejemplo 3 usa el mismo objeto literal que teníamos en el ejemplo 2, sin embargo, estamos usando una nueva sintaxis para la desestructuración. En los ejemplos anteriores, asumimos que nuestras nuevas variables y las claves del objeto que se está desestructurando son exactamente las mismas. De hecho, deben estarlo para que esto funcione correctamente. ¿Qué pasa si desea utilizar nuevos nombres de variable mientras desestructura? Esto también es posible y es exactamente lo que hicimos aquí en el ejemplo 3.

Ejemplo de desestructuración 4

Este es otro ejemplo simple de desestructuración de objetos que hace uso de valores de cadena simples en el objeto literal. Luego desestructuramos el companyobjeto en las variables de nameindustryCerrar la sesión de esos valores muestra el resultado correcto.

Ejemplo de desestructuración 5

Nuevamente hacemos uso del companyobjeto pero agregamos algunas claves al objeto. La nueva productsclave contiene una matriz de valores y la tickerclave contiene un valor de cadena simple. Cuando desestructuramos, elegimos usar solo productsticker, y esto está perfectamente bien. No es necesario utilizar todas las teclas al desestructurar. Puede elegir lo que necesita para su aplicación.

Ejemplo de desestructuración 6

Esta es una característica nueva bastante interesante aquí donde puede usar la desestructuración de objetos como un argumento de función. Observe cómo en la declaración de la función, simplemente podemos pasar una expresión de desestructuración de objeto e inmediatamente obtenemos acceso a todos los valores del objeto dentro de la función.

Ejemplo de desestructuración 7

Veamos un ejemplo final para comprender cómo funciona la desestructuración de objetos. Todo lo que tenemos es una función simple que saluda a alguien y menciona su trabajo. Llamamos a la función, pasando un objeto y funciona muy bien.


Resumen de mejoras del literal de objetos de ES6

ES6 tiene muchas características nuevas y agradables para trabajar con objetos. Cubrimos la notación abreviada literal de objeto, que facilita la asignación de variables a un objeto sin tener que escribir el nombre del valor dos veces cada vez. El siguiente paso fue mirar la abreviatura del método de objeto, que es una forma más agradable de declarar funciones o métodos dentro de sus objetos. Este es otro caso en el que ya no tenemos que escribir la palabra clave de función como también aprendimos con las funciones de flecha. El siguiente paso fue un vistazo rápido a cómo ahora podemos usar claves calculadas en objetos haciendo uso de corchetes que rodean la clave del objeto. Finalmente, echamos un vistazo a la desestructuración de objetos en ES6. Vimos que la desestructuración de objetos es una forma muy conveniente de desmantelar o extraer datos de un objeto para hacer uso de esos valores en sus propias variables.


No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas