ECMAScript 2022
Nouvelles fonctionnalités en JavaScript 2022
Supporté dans tous les navigateurs modernes depuis mars 2023 .
| Fonctionnalité | Description | |
|---|---|---|
| Array at() | Renvoie un élément indexé d'un tableau | |
| String at() | Renvoie un élément indexé d'une chaîne | |
| RegExp /d | Effectue des correspondances de sous-chaînes | |
| Object.hasOwn() | Vérifie si une propriété est la propriété propre d'un objet | |
| error.cause | Permet de spécifier la raison d'une erreur | |
| await import | Permet aux modules JavaScript d'attendre des ressources nécessitant une importation avant de s'exécuter. | |
| Déclarations de champs de classe | Permet de définir des propriétés directement au sein d'une classe | |
| Méthodes et champs privés | Permet des propriétés privées (#méthode et #champ) |
Support des navigateurs
ECMAScript 2022 est supporté dans tous les navigateurs modernes depuis mars 2023 :
| Chrome 94 | Edge 94 | Firefox 93 | Safari 16.4 | Opera 80 |
| Sep 2021 | Sep 2021 | Oct 2021 | Mar 2023 | Oct 2021 |
JavaScript Array at()
ES2022 a introduit la méthode de tableau at() :
Exemples
Obtenez le troisième élément du tableau fruits :
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
let fruit = fruits.at(2); Obtenez le troisième élément du tableau fruits :
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
let fruit = fruits[2]; La méthode at() renvoie un élément indexé d'un tableau.
La méthode at() renvoie le même résultat que [] .
La méthode at() est supportée dans tous les navigateurs modernes depuis mars 2022 :
Remarque
De nombreuses langues permettent l'indexation négative comme [-1] pour accéder aux éléments à partir de la fin d'un objet / tableau / chaîne.
Cela n'est pas possible en JavaScript, car [] est utilisé pour accéder à la fois aux tableaux et aux objets. obj[-1] fait référence à la valeur de la clé -1, et non à la dernière propriété de l'objet.
La méthode at() a été introduite dans ES2022 pour résoudre ce problème.
JavaScript String at()
ES2022 a introduit la méthode de chaîne at() :
Exemples
Obtenez la troisième lettre du nom :
const name = "formation-ti.org";
let letter = name.at(2); Obtenez la troisième lettre du nom :
const name = "formation-ti.org";
let letter = name[2]; La méthode at() renvoie un élément indexé d'une chaîne.
La méthode at() renvoie le même résultat que [] .
Modificateur RegExp d
ES2022 a ajouté le modificateur /d pour exprimer le début et la fin de la correspondance.
Exemple
let text = "aaaabb";
let result = text.match(/(aa)(bb)/d); Les modificateurs RegExp sont utilisés pour spécifier des recherches insensibles à la casse et d'autres recherches globales :
| Modificateur | Description | Essayez-le |
|---|---|---|
| i | Effectue une correspondance insensible à la casse | |
| g | Effectue une correspondance globale (trouve tout) | |
| m | Effectue des correspondances multilignes | |
| d | Effectue des correspondances de sous-chaînes (Nouveau dans ES2022) |
Object hasOwn
ES2022 fournit un moyen sûr de vérifier si une propriété est la propriété propre d'un objet.
Object.hasOwn() est similaire à Object.hasOwnProperty() mais prend en charge tous les types d'objets.
Exemple
Object.hasOwn(myObject, age) Cause d'erreur
À partir d'ECMAScript 2022, le constructeur Error (et ses sous-classes comme TypeError, SyntaxError, etc.) prend en charge une propriété optionnelle {cause} .
Cela vous permet de créer des erreurs enchaînées, où une erreur inclut une autre comme sa cause.
Exemple (avant)
try {
// Créer un échec de parsing JSON
JSON.parse("blablablabla");
} catch(err) {
let text = err.name + " " + err.message;
}
Exemple (maintenant)
try {
try {
// Créer un échec de parsing JSON
JSON.parse(" blablablabla ");
} catch(err) {
// Créer une nouvelle erreur et inclure l'original comme cause
throw new Error("Échec du chargement JSON", {cause:err});
}
} catch(err){
let text = err.name + " " + err.message;
document.getElementById("demo").innerHTML = text;
}
JavaScript await import
Les modules JavaScript peuvent maintenant attendre des ressources nécessitant une importation avant de s'exécuter :
import {myData} from './myData.js';
const data = await myData(); Déclarations de champs de classe JavaScript
class Hello {
counter = 0; // Champ de classe
}
const myClass = new Hello();
let x = myClass.counter; Méthodes et champs privés JavaScript
class Hello {
#counter = 0; // Champ privé
#myMethod() {} // Méthode privée
}
const myClass = new Hello();
let x = myClass.#counter; // Erreur
myClass.#myMethod(); // Erreur