Estos son ejemplos de todo lo nuevo en ECMAScript 2016, 2017 y 2018

por rajaraodv

Es difícil hacer un seguimiento de las novedades de JavaScript (ECMAScript). Y es aún más difícil encontrar ejemplos de código útiles.

Así que en este artículo, cubriré las 18 características que se enumeran en las propuestas terminadas del TC39 que se agregaron en ES2016, ES2017 y ES2018 (borrador final) y las mostraré con ejemplos útiles.

Este es un post bastante largo, pero debe ser de fácil lectura. Piense en esto como » lectura compulsiva de Netflix.»Al final de esto, te prometo que tendrás un montón de conocimientos sobre todas estas características.

OK, repasemos esto uno por uno.

Matriz.prototipo.incluye

includes es un método de instancia simple en la matriz y ayuda a encontrar fácilmente si un elemento está en la Matriz (incluyendo NaN a diferencia de indexOf).

Curiosidades: la gente de especificaciones de JavaScript quería llamarlo contains, pero aparentemente esto ya era utilizado por Mootools, por lo que usaron includes .

Exponenciación infix operator

Las operaciones matemáticas como suma y resta tienen operadores de infijo como + y -, respectivamente. Al igual que ellos, el operador infix ** se usa comúnmente para la operación de exponentes. En ECMAScript 2016, se introdujo ** en lugar de Math.pow .

Objeto.valores()

Object.values() es una función nueva que es similar a Object.keys() pero devuelve todos los valores de las propiedades del objeto, excluyendo cualquier valor de la cadena prototípica.

Objeto.entradas()

Object.entries() está relacionado con Object.keys, pero en lugar de devolver solo claves, devuelve ambas claves y valores en la forma de matriz. Esto hace que sea muy sencillo hacer cosas como usar objetos en bucles o convertir objetos en mapas.

Ejemplo 1:

Ejemplo 2:

Cadena de relleno

Dos métodos de instancia se han añadido a la Cadena — String.prototype.padStart y String.prototype.padEnd — que permiten anexar/anteponiendo una cadena vacía o alguna otra cadena al inicio o al final de la cadena original.

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

Esto es muy útil cuando queremos alinear cosas en escenarios como pantalla de impresión bonita o impresión de terminal.

3.1 Ejemplo de padStart:

En el siguiente ejemplo, tenemos una lista de números de diferentes longitudes. Queremos anteponer » 0 » para que todos los elementos tengan la misma longitud de 10 dígitos para fines de visualización. Podemos usar padStart(10, '0') para lograr esto fácilmente.

3.2 Ejemplo de padEnd:

padEnd realmente es útil cuando imprimimos varios artículos de diferentes longitudes y queremos alinearlos correctamente.

El siguiente ejemplo es un buen ejemplo realista de cómo padEnd, padStart y Object.entries se unen para producir una salida hermosa.

3.3 ⚠️ padStart y padEnd en Emojis y otros caracteres de doble byte

Los emojis y otros caracteres de doble byte se representan utilizando múltiples bytes de unicode. ¡Así que padStart y padEnd podrían no funcionar como se esperaba!⚠️

Por ejemplo: Digamos que estamos tratando de rellenar la cadena heart para alcanzar 10 caracteres con el emoji❤️. El resultado se verá como a continuación:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

Esto se debe a que ❤️ tiene 2 puntos de código de largo ('\u2764\uFE0F' )! La palabra heart en sí tiene 5 caracteres, por lo que solo nos quedan un total de 5 caracteres por rellenar. Entonces, lo que sucede es que JS rellena dos corazones usando '\u2764\uFE0F' y que produce ❤️❤️. Para el último, simplemente utiliza el primer byte del corazón \u2764 que produce ❤

, por lo que terminamos con: ❤️❤️❤heart

PD: Puedes usar este enlace para ver las conversiones de caracteres unicode.

Objeto.getOwnPropertyDescriptors

Este método devuelve todos los detalles (incluidos los métodos getter gety setter set) para todas las propiedades de un objeto dado. La motivación principal para agregar esto es permitir la copia / clonación superficial de un objeto en otro objeto que también copie las funciones getter y setter en lugar de Object.assign .

Objeto.asignar copias superficiales de todos los detalles excepto las funciones getter y setter del objeto de origen original.

El siguiente ejemplo muestra la diferencia entre Object.assign y Object.getOwnPropertyDescriptors junto con Object.defineProperties para copiar un objeto original Car en un nuevo objeto ElectricCar. Verá que al usar Object.getOwnPropertyDescriptors, discount las funciones getter y setter también se copian en el objeto de destino.

ANTES…

DESPUÉS…

Agregar comas finales en los parámetros de función

Esta es una actualización menor que nos permite tener comas finales después del último parámetro de función. ¿Por qué? Para ayudar con herramientas como git blame para garantizar que solo se culpen a los nuevos desarrolladores.

El siguiente ejemplo muestra el problema y la solución.

Nota: ¡También puede llamar a funciones con comas finales!

Async / Await

Esta, de lejos, es la característica más importante y útil si me preguntas. Las funciones asincrónicas nos permiten no lidiar con el infierno de devolución de llamada y hacer que todo el código parezca simple.

La palabra clave async le dice al compilador JavaScript que trate la función de manera diferente. El compilador se detiene cada vez que alcanza la palabra clave await dentro de esa función. Asume que la expresión después de await devuelve una promesa y espera hasta que la promesa se resuelva o rechace antes de seguir adelante.

En el ejemplo siguiente, la función getAmount llama a dos funciones asíncronas getUser y getBankBalance. Podemos hacer esto en promise, pero usar async await es más elegante y simple.

6.1 Las funciones asincrónicas por sí mismas devuelven una promesa.

Si está esperando el resultado de una función asíncrona, debe usar la sintaxis then de Promise para capturar su resultado.

En el siguiente ejemplo, queremos registrar el resultado usando console.log pero no dentro de la adición doble. Por lo tanto, queremos esperar y usar la sintaxis then para pasar el resultado a console.log .

6.2 Llamar a async / await en paralelo

En el ejemplo anterior estamos llamando a await dos veces, pero cada vez estamos esperando un segundo (total de 2 segundos). En su lugar, podemos paralelizarlo ya que a y b no dependen entre sí usando Promise.all.

6.3 Funciones async/await de manejo de errores

Hay varias formas de manejar errores al usar async await.

Opción 1-Use try catch dentro de la función

Opción 2-Capture cada expresión await

Dado que cada expresión await devuelve una Promesa, puede detectar errores en cada línea como se muestra a continuación.

Opción 3-Captura toda la función async-await

ECMAScript está actualmente en el borrador final y saldrá en junio o julio de 2018. Todas las características cubiertas a continuación están en la Etapa 4 y formarán parte de ECMAScript 2018.

1. Memoria compartida y atomics

Esta es una característica enorme y bastante avanzada y es una mejora principal de los motores JS.

La idea principal es traer algún tipo de función de subprocesos múltiples a JavaScript para que los desarrolladores de JS puedan escribir programas simultáneos de alto rendimiento en el futuro permitiendo administrar la memoria por sí mismos en lugar de permitir que el motor de JS administre la memoria.

Esto se realiza mediante un nuevo tipo de objeto global llamado SharedArrayBuffer que esencialmente almacena datos en un espacio de memoria compartido. Por lo que estos datos se pueden compartir entre el hilo principal de JS y los hilos de trabajo web.

Hasta ahora, si queríamos compartir datos entre el hilo principal de JS y web-workers, teníamos que copiar los datos y enviarlos al otro hilo usando postMessage . ¡Ya no!

Simplemente usa SharedArrayBuffer y los datos son accesibles instantáneamente tanto por el hilo principal como por varios hilos de trabajo web.

Pero compartir memoria entre hilos puede causar condiciones de carrera. Para ayudar a evitar las condiciones de carrera, se introduce el objeto global «Atomics». Atomics proporciona varios métodos para bloquear la memoria compartida cuando un hilo está utilizando sus datos. También proporciona métodos para actualizar dichos datos en esa memoria compartida de forma segura.

La recomendación es usar esta función a través de alguna biblioteca, pero en este momento no hay bibliotecas construidas sobre esta función.

Si estás interesado, te recomiendo leer:

1. De Trabajadores a Memoria Compartida-lucasfcosta
2. Una introducción de dibujos animados a SharedArrayBuffers – Lin Clark
3. Memoria compartida y energía atómica-Dr. Axel Rauschmayer

2. Restricción literal de plantilla etiquetada eliminada

Primero, necesitamos aclarar qué es un «Literal de Plantilla Etiquetado» para que podamos entender mejor esta característica.

En ES2015+, hay una característica llamada literal de plantilla etiquetada que permite a los desarrolladores personalizar cómo se interpolan las cadenas. Por ejemplo, en la forma estándar, las cadenas se interpolan como se muestra a continuación…

En el literal etiquetado, puede escribir una función para recibir las partes codificadas del literal de cadena, por ejemplo , y las variables de reemplazo, por ejemplo , como parámetros en una función personalizada (por ejemplo greet), y devolver lo que desee de esa función personalizada.

El siguiente ejemplo muestra que nuestra función personalizada de» Etiqueta «greet agrega la hora del día como » ¡Buenos días!»»Buenas tardes», y así sucesivamente dependiendo de la hora del día a la cadena literal y devuelve una cadena personalizada.

Ahora que hablamos de qué son las funciones «etiquetadas», muchas personas desean usar esta función en diferentes dominios, como en Terminal para comandos y solicitudes HTTP para componer URI, etc.

️ ️ El problema con el literal de cadena etiquetada

, por lo que si tiene una función etiquetada que usa internamente algunas reglas de otro dominio (como las reglas de Terminal), puede que necesite usar \ubla123abla que no se parezca a \u0049 o \u{@F804}, entonces obtendría un error de sintaxis.

En ES2018, las reglas se relajan para permitir caracteres de escape aparentemente inválidos, siempre y cuando la función etiquetada devuelva los valores de un objeto con una propiedad «cocinada» (donde los caracteres inválidos son «indefinidos») y, a continuación, una propiedad «cruda» (con lo que desee).

Indicador»dotall»para expresión regular

Actualmente en expresiones regulares, aunque el punto («.») se supone que coincide con un solo carácter, no coincide con caracteres de línea nuevos como \n \r \f etc.

Por ejemplo:

//Before/first.second/.test('first\nsecond'); //false

Esta mejora hace posible que el operador de puntos coincida con cualquier carácter individual. Para asegurarnos de que esto no rompa nada, necesitamos usar \s flag cuando creamos la expresión regular para que esto funcione.

//ECMAScript 2018/first.second/s.test('first\nsecond'); //true Notice: /s ?? 

Aquí está la API general del documento de propuesta:

Expresiones regulares Capturas de Grupo con nombre ?

Esta mejora trae una útil característica de expresiones regulares de otros lenguajes como Python, Java, etc., llamada «Named Groups».»Esta característica permite a los desarrolladores escribir expresiones regulares proporcionar nombres (identificadores) en el formato(?<name>...) para diferentes partes del grupo en la expresión regular. Luego pueden usar ese nombre para agarrar el grupo que necesiten con facilidad.

4.1 Ejemplo básico de grupo con nombre

4.2 Usando grupos con nombre dentro de la expresión regular en sí

Podemos usar el formato \k<group name> para hacer referencia al grupo dentro de la expresión regular en sí. El siguiente ejemplo muestra cómo funciona.

4.3 Uso de grupos con nombre en Cadena.prototipo.reemplazar

La función de grupo con nombre ahora se integra en el método de instancia replace de String. Así que podemos intercambiar fácilmente palabras en la cadena.

Por ejemplo, cambie » FirstName, LastName «a»LastName, FirstName».

Propiedades de reposo para objetos

Operador de reposo ... (tres puntos) nos permite extraer propiedades de objetos que aún no se han extraído.

5.1 Puede usar rest para ayudar a extraer solo las propiedades que desee

5.2 ¡Aún mejor, puede eliminar elementos no deseados! ??

Propiedades de extensión para objetos

Las propiedades de extensión también se parecen a las propiedades de rest con tres puntos ..., pero la diferencia es que se usa la extensión para crear (reestructurar) nuevos objetos.

Consejo: el operador de propagación se utiliza en el lado derecho del signo igual. El resto se usa en el lado izquierdo del signo igual.

Expresiones regulares Lookbehind Aserciones

Esta es una mejora de la expresión regular que nos permite garantizar que alguna cadena exista inmediatamente *antes* de otra cadena.

Ahora puede usar un grupo (?<=…) (signo de interrogación, menor que, igual) para mirar hacia atrás en busca de aserción positiva.

Afirmación positiva: Digamos que queremos asegurarnos de que el signo # existe antes de la palabra winning (es decir: #winning) y queremos que la expresión regular devuelva solo la cadena «winning». Así es como lo escribirías.

Afirmación negativa: Digamos que queremos extraer números de líneas que tienen signos € y no signs antes de esos números.

RegExp Escapes de propiedades Unicode

No era fácil escribir expresiones regulares para que coincidieran con varios caracteres unicode. Cosas como \w , \W , \d etc solo coincide con caracteres y números en inglés. Pero, ¿qué pasa con los números en otros idiomas como el hindi, el griego, etc.?

Ahí es donde entran en juego los Escapes de propiedades Unicode. Resulta que Unicode agrega propiedades de metadatos para cada símbolo (carácter) y las usa para agrupar o caracterizar varios símbolos.

Por ejemplo, la base de datos Unicode agrupa todos los caracteres hindi (हिन्दी) en una propiedad llamada Script con valor Devanagari y otra propiedad llamada Script_Extensions con el mismo valor Devanagari. Así que podemos buscar Script=Devanagari y obtener todos los caracteres hindi.

Devanagari se puede usar para varios idiomas indios como Marathi, Hindi, sánscrito, etc.

A partir de ECMAScript 2018, podemos usar \p para escapar caracteres junto con {Script=Devanagari} para coincidir con todos esos caracteres indios. Es decir, podemos usar: \p{Script=Devanagari} en la expresión regular para que coincida con todos los caracteres Devanagari.

//The following matches multiple hindi character/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true //PS:there are 3 hindi characters h

De manera similar, la base de datos Unicode agrupa todos los caracteres griegos bajo la propiedad Script_Extensions (y Script ) con el valor Greek . Así que podemos buscar todos los caracteres griegos usando Script_Extensions=Greek o Script=Greek .

Es decir, podemos usar: \p{Script=Greek} en la expresión regular para que coincida con todos los caracteres griegos.

//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

Además, la base de datos Unicode almacena varios tipos de Emojis bajo las propiedades booleanasEmoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, y Emoji_Modifier_Base con valores de propiedad como ‘true’. Así que podemos buscar todos los Emojis simplemente seleccionando Emoji para que sea true.

Es decir, podemos usar: \p{Emoji}, \Emoji_Modifier y así sucesivamente para combinar varios tipos de Emojis.

El siguiente ejemplo lo aclarará todo.

Por último, podemos usar el carácter de escape «P»mayúscula(\P ) en lugar de p pequeña (\p ), para negar las coincidencias.

1. Propuesta de ECMAScript 2018

Promesa.prototipo.por último()

finally() es un nuevo método de instancia que se agregó a Promise. La idea principal es permitir ejecutar una devolución de llamada después de resolve o reject para ayudar a limpiar las cosas. La devolución de llamada finally se llama sin ningún valor y siempre se ejecuta sin importar qué.

Veamos varios casos.

Iteración asíncrona

Esta es una característica * extremadamente * útil. Básicamente nos permite crear bucles de código asíncrono con facilidad.

Esta característica agrega un nuevo bucle «a la espera de» que nos permite llamar a funciones asincrónicas que devuelven promesas (o Matrices con un montón de promesas) en un bucle. Lo bueno es que el bucle espera a que se resuelva cada Promesa antes de pasar al siguiente bucle.

¡Eso es prácticamente todo!

Si esto fue útil, haga clic en el clap ? botón abajo un par de veces para mostrar su apoyo! ⬇⬇⬇ ??

Mis Otros mensajes

1. Echa un vistazo a estos útiles consejos y trucos de ECMAScript 2015 (ES6)
2. 5 Partes «Malas» De JavaScript Que Se Arreglan En ES6
3. ¿Es «Clase» En ES6 La Nueva Parte «Mala»?