ES9 - Nuevas funciones

Aquí, aprenderemos sobre las nuevas funciones de ES9. Comencemos por comprender acerca de los generadores asincrónicos.

Generadores asincrónicos e iteración

Los generadores asincrónicos se pueden convertir en asincrónicos utilizando el asyncpalabra clave. lossyntax para definir un generador asincrónico se da a continuación:

async function* generator_name() {
   //statements
}

Ejemplo

El siguiente ejemplo muestra un generador asincrónico que devuelve Promise en cada llamada al next() método de generador.

<script>
   async function* load(){
      yield await Promise.resolve(1);
      yield await Promise.resolve(2);
      yield await Promise.resolve(3);
   }
   
   let l = load();
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
</script>

La salida del código anterior será la siguiente:

{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: undefined, done: true}

en espera de bucle

Los iterables asincrónicos no se pueden iterar utilizando el método tradicional for..of loopsintaxis a medida que devuelven promesas. ES9 presenta elfor await of loop apoyar asynchronous iteration.

La sintaxis para usar el for await of loop se da a continuación, donde,

En cada iteración se asigna un valor de una propiedad diferente a variable y una variable puede declararse con const, let o var.
iterable - Objeto cuyas propiedades iterables se van a iterar.

for await (variable of iterable) {
   statement
}

Ejemplo

El siguiente ejemplo muestra el uso de for await of loop para iterar un generador asincrónico.

<script>
   async function* load(){
      yield await Promise.resolve(1);
      yield await Promise.resolve(2);
      yield await Promise.resolve(3);
   }

   async function test(){
      for await (const val of load()){
         console.log(val)
      }
   }
   test();
   console.log('end of script')
</script>

La salida del código anterior será como se muestra a continuación:

end of script
1
2
3

Ejemplo

El siguiente ejemplo itera una matriz usando el ciclo de espera de.

<script>
   async function fntest(){
      for await (const val of [10,20,30,40]){
         console.log(val)
      }
   }
   fntest();
   console.log('end of script')
</script>

La salida del código anterior será la siguiente:

end of script
10
20
30
40

Propiedades de reposo / propagación

ES9 admite el uso de operadores Rest y Spread con objetos.

Ejemplo: operador de objetos y restos

El siguiente ejemplo muestra el uso del operador rest con un objeto. El valor de la propiedad de edad del estudiante se copia en la variable de edad, mientras que los valores de las propiedades restantes se copian en la otra variable usando la sintaxis de resto `...`.

<script>
   const student = {
      age:10,
      height:5,
      weight:50
   }
   const {age,...other} = student;
   console.log(age)
   console.log(other)
</script>

La salida del código anterior será como se indica a continuación:

10
{height: 5, weight: 50}

Ejemplo: operador de objeto y propagación

El operador de propagación se puede utilizar para combinar varios objetos o clonar objetos. Esto se muestra en el siguiente ejemplo:

<script>
   //spread operator
   const obj1 = {a:10,b:20}
   const obj2={c:30}
   //clone obj1
   const clone_obj={...obj1}
   //combine obj1 and obj2
   const obj3 = {...obj1,...obj2}
   console.log(clone_obj)
   console.log(obj3)
</script>

La salida del código anterior será como se indica a continuación:

{a: 10, b: 20}
{a: 10, b: 20, c: 30}

Promesa: finalmente ()

los finally()se ejecuta siempre que se establece una promesa, independientemente de su resultado. Esta función devuelve una promesa. Se puede utilizar para evitar la duplicación de código tanto en la promesathen() y catch() manipuladores.

Sintaxis

La sintaxis mencionada a continuación es para la función finally().

promise.finally(function() {
});
promise.finally(()=> {
});

Ejemplo

El siguiente ejemplo declara una función asincrónica que devuelve el cuadrado de un número positivo después de un retraso de 3 segundos. La función arroja un error si se pasa un número negativo. Las declaraciones en el bloque finalmente se ejecutan en cualquier caso, ya sea que la promesa se rechace o se resuelva.

<script>
   let asyncSquareFn = function(n1){
      return new Promise((resolve,reject)=>{
         setTimeout(()=>{
            if(n1>=0){
               resolve(n1*n1)
            }
            else reject('NOT_POSITIVE_NO')
         },3000)
      })
   }
   console.log('Start')

   asyncSquareFn(10)//modify to add -10
   .then(result=>{
      console.log("result is",result)
   }).catch(error=>console.log(error))
   .finally(() =>{
      console.log("inside finally")
      console.log("executes all the time")
   })

   console.log("End");
</script>

La salida del código anterior será como se muestra a continuación

Start
End
//after 3 seconds
result is 100
inside finally
executes all the time

Revisión literal de plantilla

A partir de ES7, las plantillas etiquetadas se ajustan a las reglas de las siguientes secuencias de escape:

Las secuencias de escape Unicode se representan mediante "\u", por ejemplo \u2764\uFE0F
Las secuencias de escape de puntos de código Unicode se representan mediante "\u{}", por ejemplo \u{2F}
Las secuencias de escape hexadecimales se representan mediante "\x", por ejemplo \xA8
Las secuencias de escape literal octales se representan mediante "" y seguidas de uno o más dígitos, por ejemplo \125

En ES2016 y versiones anteriores, si se utilizan secuencias de escape no válidas con funciones etiquetadas, se generará un error de sintaxis como se muestra a continuación:

//tagged function with an invalid unicode sequence
myTagFn`\unicode1`
// SyntaxError: malformed Unicode character escape sequence

Sin embargo, a diferencia de las versiones anteriores, ES9 analiza la secuencia Unicode no válida como indefinida y no arroja ningún error. Esto se muestra en el siguiente ejemplo:

<script>
   function myTagFn(str) {
      return { "parsed": str[0] }
   }
   let result1 =myTagFn`\unicode1` //invalid unicode character
   console.log(result1)
   let result2 =myTagFn`\u2764\uFE0F`//valid unicode
   console.log(result2)
</script>

La salida del código anterior será como se muestra a continuación:

{parsed: undefined}
{parsed: "❤️"}

Cuerdas crudas

ES9 introduce una propiedad especial raw, disponible en el primer argumento de la función de etiqueta. Esta propiedad le permite acceder a las cadenas sin procesar tal como se ingresaron, sin procesar las secuencias de escape.

Ejemplo

<script>
   function myTagFn(str) {
      return { "Parsed": str[0], "Raw": str.raw[0] }
   }
   let result1 =myTagFn`\unicode`
   console.log(result1)

   let result2 =myTagFn`\u2764\uFE0F`
   console.log(result2)
</script>

La salida del código anterior será la siguiente:

{Parsed: undefined, Raw: "\unicode"}
{Parsed: "❤️", Raw: "\u2764\uFE0F"}

Característica de expresión regular

En las expresiones regulares, el operador de punto o un punto se usa para hacer coincidir un solo carácter. los. dot operator salta caracteres de salto de línea como \n, \r como se muestra en el siguiente ejemplo:

console.log(/Tutorials.Point/.test('Tutorials_Point')); //true
console.log(/Tutorials.Point/.test('Tutorials\nPoint')); //false
console.log(/Tutorials.Point/.test('Tutorials\rPoint')); //false

Un patrón de expresión regular se representa como / regular_expression /.El método test () toma un parámetro de cadena y busca el patrón de expresiones regulares. En el ejemplo anterior, eltest() methodbusca un patrón que comienza con Tutoriales, seguido de cualquier carácter y termina con Punto. Si usamos el\n o \r en la cadena de entrada entre Tutoriales y Point, el método test () devolverá falso.

true
false
false

ES9 presenta una nueva bandera: DotAllFlag (\s)que se puede usar con Regex para combinar terminadores de línea y emojis. Esto se muestra en el siguiente ejemplo:

console.log(/Tutorials.Point/s.test('Tutorials\nPoint'));
console.log(/Tutorials.Point/s.test('Tutorials\rPoint'));

La salida del código anterior será la que se menciona a continuación:

true
true

Grupos de captura nombrados

Antes de ES9, los índices accedían a los grupos de captura. ES9 nos permite asignar nombres a los grupos de captura. La sintaxis para el mismo se da a continuación:

(?<Name1>pattern1)

Ejemplo

const birthDatePattern = /(?<myYear>[0-9]{4})-(?<myMonth>[0-9]{2})/;
const birthDate = birthDatePattern.exec('1999-04');
console.log(birthDate.groups.myYear);
console.log(birthDate.groups.myMonth);

La salida del código anterior es como se muestra a continuación:

1999
04

↰ Previous page