ES8 - Nouvelles fonctionnalités

Ce chapitre se concentre sur les nouvelles fonctionnalités d'ES8.

Remplir une chaîne

ES8 introduit deux fonctions de gestion de chaîne pour remplir une chaîne. Ces fonctions peuvent être utilisées pour ajouter de l'espace ou tout jeu de caractères souhaité au début et à la fin d'une valeur de chaîne.

Chaîne. padStart ()

Cette fonction complète la chaîne actuelle avec une chaîne d'entrée donnée à plusieurs reprises depuis le début, jusqu'à ce que la chaîne actuelle atteigne la longueur donnée. La syntaxe de la fonction padStart () est donnée ci-dessous -

Syntaxe

string_value.padStart(targetLength [, padString])

La fonction padStart () accepte deux paramètres qui sont les suivants -

targetLength- Une valeur numérique qui représente la longueur cible de la chaîne après le remplissage. Si la valeur de ce paramètre est inférieure ou égale à la longueur existante de la chaîne, la valeur de la chaîne est renvoyée telle quelle.
padString- Ceci est un paramètre facultatif. Ce paramètre spécifie les caractères à utiliser pour compléter la chaîne. La valeur de la chaîne est remplie d'espaces si aucune valeur n'est transmise à ce paramètre.

Exemple

L'exemple suivant déclare une variable de chaîne, product_cost. La variable sera complétée par des zéros à partir de la gauche jusqu'à ce que la longueur totale de la chaîne soit sept. L'exemple illustre également le comportement de la fonction padStart (), si aucune valeur n'est passée au deuxième paramètre.

<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 sortie du code ci-dessus sera comme indiqué ci-dessous -

String.padEnd ()

Cette fonction complète la chaîne actuelle avec une chaîne d'entrée donnée à plusieurs reprises à partir de la fin, jusqu'à ce que la chaîne actuelle atteigne la longueur spécifiée.

La syntaxe de la fonction padEnd () est donnée ci-dessous -

Syntaxe

string_value.padEnd(targetLength [, padString])

La fonction padEnd () accepte deux paramètres -

targetLength- Une valeur numérique qui représente la longueur cible de la chaîne après le remplissage. Si la valeur de ce paramètre est inférieure ou égale à la longueur existante de la chaîne, la valeur de la chaîne est renvoyée telle quelle.
padString- Ceci est un paramètre facultatif. Ce paramètre spécifie les caractères à utiliser pour compléter la chaîne. La valeur de la chaîne est remplie d'espaces si aucune valeur n'est transmise à ce paramètre.

Exemple

L'exemple suivant déclare une variable de chaîne, product_cost. La variable sera complétée par des zéros de droite jusqu'à ce que la longueur totale de la chaîne soit sept. L'exemple illustre également le comportement de la fonction padStart (), si aucune valeur n'est passée au deuxième paramètre.

<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 sortie du code ci-dessus sera comme mentionné ci-dessous -

Virgules de fin

Une virgule à la fin est simplement une virgule après le dernier élément d'une liste. Les virgules de fin sont également appelées virgules finales.

Virgules de fin et tableau

Les virgules de fin dans les tableaux sont ignorées lors de l'utilisation de la boucle Array.prototype.forEach.

Exemple

L'exemple suivant itère un tableau avec des virgules de fin à l'aide de la boucle 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>

La sortie du code ci-dessus sera comme indiqué ci-dessous -

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

Virgules et appel de fonction

Les virgules de fin, transmises comme arguments, lors de la définition ou de l'appel d'une fonction sont ignorées par le moteur d'exécution JavaScript. Cependant, il y a deux exceptions -

Les définitions de fonction ou l'invocation qui ne contiennent qu'une virgule entraîneront SyntaxError. Par exemple, l'extrait de code suivant générera une erreur -

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

Les virgules de fin ne peuvent pas être utilisées avec les paramètres de repos.

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

Exemple

L'exemple suivant déclare une fonction avec des virgules de fin dans la liste d'arguments.

<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 sortie du code ci-dessus est la suivante -

60
6

Objet: entrées () et valeurs ()

ES8 introduit les nouvelles méthodes suivantes au type d'objet intégré -

Object.entries - La méthode Object.entries () peut être utilisée pour accéder à toutes les propriétés d'un objet.
Object.values() - La méthode Object.values () peut être utilisée pour accéder aux valeurs de toutes les propriétés d'un objet.
Object.getOwnPropertyDescriptors()- Cette méthode retourne un objet contenant tous les propres descripteurs de propriété d'un objet. Un objet vide peut être retourné si l'objet n'a aucune propriété.

Exemple

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

La sortie du code ci-dessus sera la suivante -

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

Exemple

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

La sortie du code ci-dessus sera comme indiqué ci-dessous -

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

Exemple

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

La sortie du code ci-dessus sera comme mentionné ci-dessous -

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

Asynchroniser et attendre

Async / Await est une fonctionnalité très importante dans ES8, c'est un sucre syntaxique pour Promises en JavaScript. Le mot-clé await est utilisé avec les promesses. Ce mot clé peut être utilisé pour suspendre l'exécution d'une fonction jusqu'à ce qu'une promesse soit réglée. Le mot-clé await renvoie la valeur de la promesse si la promesse est résolue alors qu'il renvoie une erreur si la promesse est rejetée. La fonction d'attente ne peut être utilisée qu'à l'intérieur de fonctions marquées comme asynchrones. Une fonction déclarée à l'aide du mot clé async renvoie toujours une promesse.

Syntaxe

La syntaxe de la fonction async avec await est donnée ci-dessous -

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

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

Prenons un exemple qui a une fonction asynchrone qui prend deux secondes pour s'exécuter et qui renvoie une valeur de chaîne. La fonction peut être appelée de deux manières comme indiqué ci-dessous

Utilisation de promise.then ()
Utilisation de aync / await.

Le code ci-dessous montre l'appel de la fonction asynchrone à l'aide de la syntaxe ES6 traditionnelle - 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 sortie du code ci-dessus sera la suivante -

end of script
response is:2 seconds have passed

Le code ci-dessous montre une manière plus propre d'appeler la fonction asynchrone à l'aide de la syntaxe 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 sortie du code ci-dessus sera comme mentionné ci-dessous -

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

Enchaînement de promesses avec Async / await

L'exemple suivant implémente le chaînage des promesses à l'aide de la syntaxe async / await.

Dans cet exemple, add_positivenos_async()La fonction ajoute deux nombres de manière asynchrone et rejette si des valeurs négatives sont passées. Le résultat de l'appel de fonction asynchrone en cours est passé en paramètre aux appels de fonction suivants.

<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 sortie du code ci-dessus sera comme indiqué ci-dessous -

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