ES8 - Novos recursos

Este capítulo enfoca os novos recursos do ES8.

Preenchendo uma corda

ES8 apresenta duas funções de manuseio de string para preencher uma string. Essas funções podem ser usadas para adicionar espaço ou qualquer conjunto de caracteres desejado ao início e ao final de um valor de string.

Corda. padStart ()

Esta função preenche a string atual com uma determinada string de entrada repetidamente desde o início, até que a string atual alcance o comprimento fornecido. A sintaxe da função padStart () é fornecida abaixo -

Sintaxe

string_value.padStart(targetLength [, padString])

A função padStart () aceita dois parâmetros que são os seguintes -

  • targetLength- Um valor numérico que representa o comprimento alvo da string após o preenchimento. Se o valor deste parâmetro for menor ou igual ao comprimento existente da string, o valor da string será retornado como está.

  • padString- Este é um parâmetro opcional. Este parâmetro especifica os caracteres que devem ser usados ​​para preencher a string. O valor da string é preenchido com espaços se nenhum valor for passado para este parâmetro.

Exemplo

O exemplo a seguir declara uma variável de string, product_cost. A variável será preenchida com zeros da esquerda até que o comprimento total da string seja sete. O exemplo também ilustra o comportamento da função padStart (), se nenhum valor for passado para o 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>

A saída do código acima será conforme indicado abaixo -

0001699
7
1699
7

String.padEnd ()

Esta função preenche a string atual com uma determinada string de entrada repetidamente a partir do final, até que a string atual atinja o comprimento especificado.

A sintaxe da função padEnd () é fornecida abaixo -

Sintaxe

string_value.padEnd(targetLength [, padString])

A função padEnd () aceita dois parâmetros -

  • targetLength- Um valor numérico que representa o comprimento alvo da string após o preenchimento. Se o valor deste parâmetro for menor ou igual ao comprimento existente da string, o valor da string será retornado como está.

  • padString- Este é um parâmetro opcional. Este parâmetro especifica os caracteres que devem ser usados ​​para preencher a string. O valor da string é preenchido com espaços se nenhum valor for passado para este parâmetro.

Exemplo

O exemplo a seguir declara uma variável de string, product_cost. A variável será preenchida com zeros da direita até que o comprimento total da string seja sete. O exemplo também ilustra o comportamento da função padStart (), se nenhum valor for passado para o 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>

A saída do código acima será conforme mencionado abaixo -

1699xxx
7
1699
7

Trailing Commas

Uma vírgula final é simplesmente uma vírgula após o último item de uma lista. As vírgulas finais também são conhecidas como vírgulas finais.

Trailing Commas and Array

As vírgulas finais em matrizes são ignoradas durante o uso do loop Array.prototype.forEach.

Exemplo

O exemplo a seguir iterando uma matriz com vírgulas finais usando o loop foreach.

<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>

A saída do código acima será conforme mostrado abaixo -

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

Vírgulas finais e chamada de função

Vírgulas finais, passadas como argumentos, ao definir ou chamar uma função são ignoradas pelo mecanismo de tempo de execução JavaScript. No entanto, existem duas exceções -

  • As definições de função ou invocação que contém apenas uma vírgula resultarão em SyntaxError. Por exemplo, o seguinte snippet gerará um erro -

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

  • Vírgulas finais não podem ser usadas com parâmetros de descanso.

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

Exemplo

O exemplo a seguir declara uma função com vírgulas à direita na 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>

A saída do código acima é a seguinte -

60
6

Objeto: entradas () e valores ()

ES8 apresenta os seguintes novos métodos para o tipo de objeto embutido -

  • Object.entries - O método Object.entries () pode ser usado para acessar todas as propriedades de um objeto.

  • Object.values() - O método Object.values ​​() pode ser usado para acessar valores de todas as propriedades de um objeto.

  • Object.getOwnPropertyDescriptors()- Este método retorna um objeto contendo todos os descritores de propriedade próprios de um objeto. Um objeto vazio pode ser retornado se o objeto não tiver nenhuma propriedade.

Exemplo

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

A saída do código acima será a seguinte -

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

Exemplo

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

A saída do código acima será conforme a seguir -

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

Exemplo

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

A saída do código acima será conforme mencionado abaixo -

{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 e Await

Async / Await é um recurso muito importante no ES8. É um açúcar sintático para Promises em JavaScript. A palavra-chave await é usada com promessas. Esta palavra-chave pode ser usada para pausar a execução de uma função até que uma promessa seja cumprida. A palavra-chave await retorna o valor da promessa se a promessa for resolvida, enquanto lança um erro se a promessa for rejeitada. A função await só pode ser usada dentro de funções marcadas como assíncronas. Uma função que é declarada usando a palavra-chave async sempre retorna uma promessa.

Sintaxe

A sintaxe da função assíncrona com await é fornecida abaixo -

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

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

Considere um exemplo que possui uma função assíncrona que leva dois segundos para ser executada e retorna um valor de string. A função pode ser chamada de duas maneiras, conforme mostrado abaixo

  • Usando a promessa.then ()
  • Usando aync / await.

O código a seguir mostra a chamada da função assíncrona usando a sintaxe ES6 tradicional - promessa.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>

A saída do código acima será a seguinte -

end of script
response is:2 seconds have passed

O código a seguir mostra uma maneira mais limpa de invocar a função assíncrona usando a sintaxe 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>

A saída do código acima será conforme mencionado abaixo -

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

Promessa de encadeamento com Async / await

O exemplo a seguir implementa o encadeamento de promessa usando a sintaxe async / await.

Neste exemplo, add_positivenos_async()A função adiciona dois números de forma assíncrona e rejeita se valores negativos forem passados. O resultado da chamada de função assíncrona atual é passado como parâmetro para as chamadas de função subsequentes.

<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>

A saída do código acima será conforme fornecido abaixo−

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