ES8 - Nuove funzionalità

Questo capitolo si concentra sulle nuove funzionalità di ES8.

Riempire una stringa

ES8 introduce due funzioni di gestione delle stringhe per riempire una stringa. Queste funzioni possono essere utilizzate per aggiungere spazio o qualsiasi set di caratteri desiderato all'inizio e alla fine di un valore di stringa.

Corda. padStart ()

Questa funzione riempie ripetutamente la stringa corrente con una data stringa di input dall'inizio, fino a quando la stringa corrente raggiunge la lunghezza data. La sintassi della funzione padStart () è fornita di seguito:

Sintassi

string_value.padStart(targetLength [, padString])

La funzione padStart () accetta due parametri che sono i seguenti:

  • targetLength- Un valore numerico che rappresenta la lunghezza di destinazione della stringa dopo il riempimento. Se il valore di questo parametro è minore o uguale alla lunghezza esistente della stringa, il valore della stringa viene restituito così com'è.

  • padString- Questo è un parametro opzionale. Questo parametro specifica i caratteri che dovrebbero essere usati per riempire la stringa. Il valore della stringa viene riempito con spazi se non viene passato alcun valore a questo parametro.

Esempio

L'esempio seguente dichiara una variabile di stringa, product_cost. La variabile verrà riempita con zeri da sinistra fino a quando la lunghezza totale della stringa è sette. L'esempio illustra anche il comportamento della funzione padStart (), se non viene passato alcun valore al secondo parametro.

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

L'output del codice precedente sarà come indicato di seguito:

0001699
7
1699
7

String.padEnd ()

Questa funzione riempie ripetutamente la stringa corrente con una data stringa di input dalla fine, fino a quando la stringa corrente raggiunge la lunghezza specificata.

La sintassi della funzione padEnd () è fornita di seguito:

Sintassi

string_value.padEnd(targetLength [, padString])

La funzione padEnd () accetta due parametri:

  • targetLength- Un valore numerico che rappresenta la lunghezza di destinazione della stringa dopo il riempimento. Se il valore di questo parametro è minore o uguale alla lunghezza esistente della stringa, il valore della stringa viene restituito così com'è.

  • padString- Questo è un parametro opzionale. Questo parametro specifica i caratteri che dovrebbero essere usati per riempire la stringa. Il valore della stringa viene riempito con spazi se non viene passato alcun valore a questo parametro.

Esempio

L'esempio seguente dichiara una variabile di stringa, product_cost. La variabile verrà riempita con zeri da destra fino a quando la lunghezza totale della stringa è sette. L'esempio illustra anche il comportamento della funzione padStart (), se non viene passato alcun valore al secondo parametro.

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

L'output del codice sopra sarà come indicato di seguito -

1699xxx
7
1699
7

Virgole finali

Una virgola finale è semplicemente una virgola dopo l'ultimo elemento di un elenco. Le virgole finali sono note anche come virgole finali.

Virgole e matrice finali

Le virgole finali negli array vengono ignorate durante l'utilizzo di Array.prototype.forEach loop.

Esempio

L'esempio seguente che esegue l'iterazione di un array con virgole finali utilizzando il ciclo 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>

L'output del codice sopra sarà come mostrato di seguito -

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

Virgole finali e chiamata di funzione

Le virgole finali, passate come argomenti, quando si definisce o si richiama una funzione vengono ignorate dal motore di runtime JavaScript. Tuttavia, ci sono due eccezioni:

  • Le definizioni di funzione o il richiamo che contiene solo una virgola risulteranno in SyntaxError. Ad esempio, il seguente frammento di codice genererà un errore:

function test(,){} // SyntaxError: missing formal parameter
(,)=>{}; //SyntaxError: expected expression, got ','
test(,) //SyntaxError: expected expression, got ','
  • Le virgole finali non possono essere utilizzate con i parametri rest.

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

Esempio

L'esempio seguente dichiara una funzione con virgole finali nell'elenco degli argomenti.

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

L'output del codice sopra è il seguente:

60
6

Oggetto: voci () e valori ()

ES8 introduce i seguenti nuovi metodi per il tipo di oggetto incorporato:

  • Object.entries - Il metodo Object.entries () può essere utilizzato per accedere a tutte le proprietà di un oggetto.

  • Object.values() - Il metodo Object.values ​​() può essere utilizzato per accedere ai valori di tutte le proprietà di un oggetto.

  • Object.getOwnPropertyDescriptors()- Questo metodo restituisce un oggetto contenente tutti i propri descrittori di proprietà di un oggetto. Se l'oggetto non ha proprietà, può essere restituito un oggetto vuoto.

Esempio

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

L'output del codice precedente sarà il seguente:

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

Esempio

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

L'output del codice sopra sarà come indicato di seguito:

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

Esempio

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

L'output del codice sopra sarà come indicato di seguito -

{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 è una funzionalità molto importante in ES8 ed è uno zucchero sintattico per Promises in JavaScript. La parola chiave await viene utilizzata con le promesse. Questa parola chiave può essere utilizzata per sospendere l'esecuzione di una funzione fino a quando non viene saldata una promessa. La parola chiave await restituisce il valore della promessa se la promessa viene risolta mentre genera un errore se la promessa viene rifiutata. La funzione await può essere utilizzata solo all'interno di funzioni contrassegnate come async. Una funzione dichiarata utilizzando la parola chiave async restituisce sempre una promessa.

Sintassi

La sintassi della funzione async con await è fornita di seguito:

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

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

Considera un esempio che ha una funzione asincrona che impiega due secondi per essere eseguita e restituisce un valore stringa. La funzione può essere richiamata in due modi come mostrato di seguito

  • Utilizzando promise.then ()
  • Utilizzando aync / await.

Il codice seguente mostra l'invocazione della funzione asincrona utilizzando la sintassi ES6 tradizionale: 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>

L'output del codice precedente sarà il seguente:

end of script
response is:2 seconds have passed

Il codice seguente mostra un modo più pulito per invocare la funzione asincrona utilizzando la sintassi 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>

L'output del codice sopra sarà come indicato di seguito -

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

Prometti il ​​concatenamento con Async / await

L'esempio seguente implementa il concatenamento delle promesse utilizzando la sintassi async / await.

In questo esempio, add_positivenos_async()la funzione aggiunge due numeri in modo asincrono e rifiuta se vengono passati valori negativi. Il risultato della chiamata di funzione asincrona corrente viene passato come parametro alle successive chiamate di funzione.

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

L'output del codice precedente sarà il seguente:

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