ES9 - Nouvelles fonctionnalités

Ici, nous allons découvrir les nouvelles fonctionnalités d'ES9. Commençons par comprendre les générateurs asynchrones.

Générateurs asynchrones et itération

Les générateurs asynchrones peuvent être rendus asynchrones en utilisant le asyncmot-clé. lesyntax pour définir un générateur asynchrone est donné ci-dessous -

async function* generator_name() {
   //statements
}

Exemple

L'exemple suivant montre un générateur asynchrone qui renvoie Promise à chaque appel au next() méthode de générateur.

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

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

pour attente de boucle

Les itérables asynchrones ne peuvent pas être itérés en utilisant le traditionnel for..of loopsyntaxe car ils renvoient des promesses. ES9 présente lefor await of loop soutenir asynchronous iteration.

La syntaxe d'utilisation de for await of loop est donné ci-dessous, où,

À chaque itération, une valeur d'une propriété différente est attribuée à variable et une variable peut être déclarée avec const, let ou var.
iterable - Objet dont les propriétés itérables doivent être itérées.

for await (variable of iterable) {
   statement
}

Exemple

L'exemple suivant montre l'utilisation de for await of loop pour itérer un générateur asynchrone.

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

end of script
1
2
3

Exemple

L'exemple suivant itère un tableau à l'aide de la boucle for wait of.

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

La sortie du code ci-dessus sera la suivante -

end of script
10
20
30
40

Propriétés de repos / propagation

ES9 prend en charge l'utilisation d'opérateurs Repos et Spread avec des objets.

Exemple: opérateur objet et repos

L'exemple suivant montre l'utilisation de l'opérateur repos avec un objet. La valeur de la propriété age de student est copiée dans la variable age tandis que les valeurs des propriétés restantes sont copiées dans l'autre variable en utilisant la syntaxe rest `...`.

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

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

10
{height: 5, weight: 50}

Exemple: opérateur objet et propagation

L'opérateur de diffusion peut être utilisé pour combiner plusieurs objets ou cloner des objets. Ceci est illustré dans l'exemple suivant -

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

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

Promesse: enfin ()

le finally()est exécutée chaque fois qu'une promesse est réglée, quel que soit son résultat. Cette fonction renvoie une promesse. Il peut être utilisé pour éviter la duplication de code dans les deuxthen() et catch() gestionnaires.

Syntaxe

La syntaxe mentionnée ci-dessous est pour la fonction finally().

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

Exemple

L'exemple suivant déclare une fonction asynchrone qui renvoie le carré d'un nombre positif après un délai de 3 secondes. La fonction renvoie une erreur si un nombre négatif est passé. Les instructions du bloc finally sont exécutées dans les deux cas, que la promesse soit rejetée ou résolue.

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

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

Modèle de révision littérale

Depuis ES7, les modèles étiquetés sont conformes aux règles des séquences d'échappement suivantes -

Les séquences d'échappement Unicode sont représentées à l'aide de "\u", par exemple \u2764\uFE0F
Les séquences d'échappement de points de code Unicode sont représentées à l'aide de "\u{}", par exemple \u{2F}
Les séquences d'échappement hexadécimales sont représentées à l'aide de "\x", par exemple \xA8
Les séquences d'échappement de littéraux octaux sont représentées par "" et suivies d'un ou plusieurs chiffres, par exemple \125

Dans ES2016 et les versions antérieures, si des séquences d'échappement non valides sont utilisées avec des fonctions étiquetées, une erreur de syntaxe sera générée comme indiqué ci-dessous -

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

Cependant, contrairement aux versions précédentes, ES9 analyse la séquence Unicode non valide comme non définie et ne génère pas d'erreur. Ceci est illustré dans l'exemple suivant -

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

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

Chaînes brutes

ES9 introduit une propriété spéciale raw, disponible sur le premier argument de la fonction de balise. Cette propriété vous permet d'accéder aux chaînes brutes telles qu'elles ont été saisies, sans traiter les séquences d'échappement.

Exemple

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

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

Fonction d'expression régulière

Dans les expressions régulières, l'opérateur point ou un point est utilisé pour faire correspondre un seul caractère. le. dot operator saute les caractères de saut de ligne comme \n, \r comme indiqué dans l'exemple ci-dessous -

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 modèle d'expression régulière est représenté par le / regular_expression /.La méthode test () prend un paramètre de chaîne et recherche le modèle regex. Dans l'exemple ci-dessus, letest() methodrecherche un motif commençant par Tutoriels, suivi d'un caractère unique et se terminant par Point. Si nous utilisons le\n ou \r dans la chaîne d'entrée entre Tutoriels et Point, la méthode test () retournera false.

true
false
false

ES9 introduit un nouveau drapeau - DotAllFlag (\s)qui peut être utilisé avec Regex pour faire correspondre les terminateurs de ligne et les émojis. Ceci est illustré dans l'exemple suivant -

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

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

true
true

Groupes de capture nommés

Avant ES9, les groupes de capture étaient accessibles par des index. ES9 nous permet d'attribuer des noms aux groupes de capture. La syntaxe pour le même est donnée ci-dessous -

(?<Name1>pattern1)

Exemple

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

1999
04

↰ Previous page

ES9 - Nouvelles fonctionnalités

Générateurs asynchrones et itération

Exemple

pour attente de boucle

Exemple

Exemple

Propriétés de repos / propagation

Exemple: opérateur objet et repos

Exemple: opérateur objet et propagation

Promesse: enfin ()

Syntaxe

Exemple

Modèle de révision littérale

Chaînes brutes

Exemple

Fonction d'expression régulière

Groupes de capture nommés

Exemple

Tutoriel ES6