ES8 - Nuevas funciones

Este capítulo se centra en las nuevas funciones de ES8.

Relleno de una cuerda

ES8 introduce dos funciones de manejo de cadenas para rellenar una cadena. Estas funciones se pueden utilizar para agregar espacio o cualquier conjunto de caracteres deseado al principio y al final de un valor de cadena.

Cuerda. padStart ()

Esta función rellena la cadena actual con una cadena de entrada dada repetidamente desde el principio, hasta que la cadena actual alcanza la longitud dada. La sintaxis de la función padStart () se da a continuación:

Sintaxis

string_value.padStart(targetLength [, padString])

La función padStart () acepta dos parámetros que son los siguientes:

targetLength- Un valor numérico que representa la longitud de destino de la cadena después del relleno. Si el valor de este parámetro es menor o igual que la longitud existente de la cadena, el valor de la cadena se devuelve tal cual.
padString- Este es un parámetro opcional. Este parámetro especifica los caracteres que deben usarse para rellenar la cadena. El valor de la cadena se rellena con espacios si no se pasa ningún valor a este parámetro.

Ejemplo

El siguiente ejemplo declara una variable de cadena, product_cost. La variable se rellenará con ceros desde la izquierda hasta que la longitud total de la cadena sea siete. El ejemplo también ilustra el comportamiento de la función padStart (), si no se pasa ningún valor al segundo parámetro.

<script>

   //pad the String with 0
   let product_cost = '1699'.padStart(7,0)
   console.log(product_cost)
   console.log(product_cost.length)

   //pad the String with blank spaces
   let product_cost1 = '1699'.padStart(7)
   console.log(product_cost1)
   console.log(product_cost1.length)
</script>

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

String.padEnd ()

Esta función rellena la cadena actual con una cadena de entrada dada repetidamente desde el final, hasta que la cadena actual alcanza la longitud especificada.

La sintaxis de la función padEnd () se da a continuación:

Sintaxis

string_value.padEnd(targetLength [, padString])

La función padEnd () acepta dos parámetros:

targetLength- Un valor numérico que representa la longitud de destino de la cadena después del relleno. Si el valor de este parámetro es menor o igual que la longitud existente de la cadena, el valor de la cadena se devuelve tal cual.
padString- Este es un parámetro opcional. Este parámetro especifica los caracteres que deben usarse para rellenar la cadena. El valor de la cadena se rellena con espacios si no se pasa ningún valor a este parámetro.

Ejemplo

El siguiente ejemplo declara una variable de cadena, product_cost. La variable se rellenará con ceros desde la derecha hasta que la longitud total de la cadena sea siete. El ejemplo también ilustra el comportamiento de la función padStart (), si no se pasa ningún valor al segundo parámetro.

<script>

   //pad the string with x
   let product_cost = '1699'.padEnd(7,'x')
   console.log(product_cost)
   console.log(product_cost.length)
   
   //pad the string with spaces
   let product_cost1 = '1699'.padEnd(7)
   console.log(product_cost1)
   console.log(product_cost1.length)
</script>

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

Comas finales

Una coma final es simplemente una coma después del último elemento de una lista. Las comas finales también se conocen como comas finales.

Array y comas finales

Las comas finales en las matrices se omiten mientras se usa Array.prototype.forEach.

Ejemplo

El siguiente ejemplo itera una matriz con comas finales usando foreach loop.

<script>

   let marks = [100,90,80,,]
   console.log(marks.length)
   console.log(marks)
   marks.forEach(function(e){ //ignores empty value in array
      console.log(e)
   })
</script>

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

4
[100, 90, 80, empty]
100
90
80

Comas finales y llamada a función

Las comas finales, pasadas como argumentos, al definir o invocar una función son ignoradas por el motor de ejecución de JavaScript. Sin embargo, hay dos excepciones:

Las definiciones de funciones o la invocación que contienen solo una coma darán como resultado SyntaxError. Por ejemplo, el siguiente fragmento arrojará un error:

function test(,){} // SyntaxError: missing formal parameter
(,)=>{}; //SyntaxError: expected expression, got ','
test(,) //SyntaxError: expected expression, got ','

Las comas finales no se pueden usar con parámetros de descanso.

function test(...arg1,){} // SyntaxError: parameter after rest parameter
(...arg1,)=>{} // SyntaxError: expected closing parenthesis, got ','

Ejemplo

El siguiente ejemplo declara una función con comas finales en la lista de argumentos.

<script>

   function sumOfMarks(marks,){ // trailing commas are ignored
      let sum=0;
      marks.forEach(function(e){
         sum+=e;
      })
      return sum;
   }

   console.log(sumOfMarks([10,20,30]))
   console.log(sumOfMarks([1,2,3],))// trailing comma is ignored
</script>

La salida del código anterior es la siguiente:

60
6

Objeto: entradas () y valores ()

ES8 introduce los siguientes métodos nuevos para el tipo de objeto integrado:

Object.entries - El método Object.entries () se puede utilizar para acceder a todas las propiedades de un objeto.
Object.values() - El método Object.values () se puede utilizar para acceder a los valores de todas las propiedades de un objeto.
Object.getOwnPropertyDescriptors()- Este método devuelve un objeto que contiene todos los descriptores de propiedad propios de un objeto. Se puede devolver un objeto vacío si el objeto no tiene propiedades.

Ejemplo

<script>
   const student ={
      firstName:'Kannan',
      lastName:'Sudhakaran'
   }
   console.log(Object.entries(student))
   console.log(Object.values(student))
</script>

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

[
["firstName", "Kannan"],
["lastName", "Sudhakaran"],
]
["Kannan", "Sudhakaran"]

Ejemplo

<script>
   const marks = [10,20,30,40]
   console.log(Object.entries(marks))
   console.log(Object.values(marks))
</script>

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

["0", 10],
["1", 20],
["2", 30],
["3", 40]
]
[10, 20, 30, 40]

Ejemplo

<script>
   const student = {
      firstName : 'Mohtashim',
      lastName: 'Mohammad',
      get fullName(){
         return this.firstName + ':'+ this.lastName
      }
   }
   console.log(Object.getOwnPropertyDescriptors(student))
</script>

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

{firstName: {value: "Mohtashim", writable: true, enumerable: true, configurable: true}
fullName: {get: ƒ, set: undefined, enumerable: true, configurable: true}
lastName: {value: "Mohammad", writable: true, enumerable: true, configurable: true}
}

Async y Await

Async / Await es una característica muy importante en ES8, es un azúcar sintáctico para Promises en JavaScript. La palabra clave await se usa con promesas. Esta palabra clave se puede utilizar para pausar la ejecución de una función hasta que se establezca una promesa. La palabra clave await devuelve el valor de la promesa si la promesa se resuelve, mientras que arroja un error si se rechaza la promesa. La función de espera solo se puede usar dentro de funciones marcadas como asíncronas. Una función que se declara con la palabra clave async siempre devuelve una promesa.

Sintaxis

La sintaxis de la función asíncrona con await se proporciona a continuación:

async function function_name(){
   let result_of_functionCall = await longRunningMethod();
}
//invoking async function

function_name().then(()=>{})
   .catch(()=>{})

Considere un ejemplo que tiene una función asincrónica que tarda dos segundos en ejecutarse y devuelve un valor de cadena. La función se puede invocar de dos formas como se muestra a continuación

Usando promise.then ()
Usando aync / await.

El siguiente código muestra la invocación de la función asincrónica utilizando la sintaxis tradicional de ES6: promise.then ()

<script>
   function fnTimeConsumingWork(){
      return new Promise((resolve,reject)=>{
         setTimeout(() => {
            resolve('response is:2 seconds have passed')
         }, 2000);
      })
   }

   fnTimeConsumingWork().then(resp=>{
      console.log(resp)
   })
   console.log('end of script')
</script>

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

end of script
response is:2 seconds have passed

El siguiente código muestra una forma más limpia de invocar la función asincrónica usando la sintaxis de ES8 - async / await

<script>
   function fnTimeConsumingWork(){
      return new Promise((resolve,reject)=>{
         setTimeout(() => {
            resolve('response is:2 seconds have passed')
         }, 2000);
      })
   }
   async function my_AsyncFunc(){
      console.log('inside my_AsyncFunc')
      const response = await fnTimeConsumingWork();// clean and readable
      console.log(response)
   }
   my_AsyncFunc();
   console.log("end of script")
</script>

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

inside my_AsyncFunc
end of script
response is:2 seconds have passed

Promesa encadenamiento con Async / await

El siguiente ejemplo implementa el encadenamiento de promesas usando la sintaxis async / await.

En este ejemplo, add_positivenos_async()La función agrega dos números de forma asincrónica y rechaza si se pasan valores negativos. El resultado de la llamada de función asíncrona actual se pasa como parámetro a las siguientes llamadas de función.

<script>
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         } else
            reject('NOT_Postive_Number_Passed')
      })
      return p;
   }
   async function addInSequence() {
      let r1 = await add_positivenos_async(10, 20)
      console.log("first result", r1);
      let r2 = await add_positivenos_async(r1, r1);
      console.log("second result", r2)
      let r3 = await add_positivenos_async(r2, r2);
      console.log("third result", r3)
      return "Done Sequence"
   }
   addInSequence().then((r)=>console.log("Async :",r));
   console.log('end')
</script>

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

end
first result 30
second result 60
third result 120
Async : Done Sequence

↰ Previous page Next page ↱