ECMAScript 2020
Nouvelles fonctionnalités de JavaScript 2020
| Fonctionnalité | Description |
|---|---|
| BigInt | Stocke des valeurs trop grandes pour être représentées par un nombre JavaScript |
| String matchAll() | Recherche toutes les occurrences d'une sous-chaîne dans une chaîne |
| Promise.allSettled() | Prend des promesses en entrée et renvoie une seule promesse |
| Importation dynamique | Charge des modules JavaScript à l'exécution |
| globalThis | Fait référence à l'objet global indépendamment de l'environnement d'exécution |
| import.meta | Renvoie un objet indiquant l'URL de base d'un module |
| Exports de namespace | Exporte un namespace complet d'un module sans avoir à l'importer au préalable |
Nouveaux opérateurs JavaScript en 2020
| Opérateur | Description | |
|---|---|---|
| ?? | La coalescence nullish renvoie le premier argument qui n'est pas nullish | |
| ?. | La chaîne optionnelle renvoie undefined si un objet est undefined ou null | |
| &&= | L'assignation logique AND assigne la deuxième valeur si la première valeur est vraie | |
| ||= | L'assignation logique OR assigne la deuxième valeur si la première valeur est fausse | |
| ??= | L'assignation de coalescence nullish assigne la deuxième valeur si la première valeur est undefined ou null |
Support des navigateurs
ECMAScript 2020 est pris en charge dans tous les navigateurs modernes depuis avril 2021 .
| Chrome 80 | Edge 80 | Firefox 80 | Safari 14.1 | Opera 67 |
| Février 2020 | Février 2020 | Août 2020 | Avril 2021 | Mars 2020 |
JavaScript BigInt
Les variables BigInt en JavaScript sont utilisées pour stocker de grandes valeurs entières qui sont trop grandes pour être représentées par un Number JavaScript normal.
Les entiers JavaScript ne sont précis qu'à environ 15 chiffres.
Exemple d'entier
let x = 999999999999999;
let y = 9999999999999999; // trop grand Exemple BigInt
let x = 9999999999999999;
let y = 9999999999999999n; Pour créer un BigInt , ajoutez n à la fin d'un entier ou appelez BigInt() :
Exemple
let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345) Le typeof d'un BigInt est "bigint" :
Exemple
let x = BigInt(999999999999999);
let type = typeof x; JavaScript String matchAll()
Avant ES2020, il n'y avait pas de méthode de chaîne permettant de rechercher toutes les occurrences d'une sous-chaîne dans une chaîne.
Exemple
const iterator = text.matchAll("Cats");
Si le paramètre est une expression régulière, le drapeau global (g) doit être défini, sinon une TypeError est levée.
Exemple
const iterator = text.matchAll(/Cats/g);
Si vous souhaitez effectuer une recherche sans tenir compte de la casse, le drapeau insensible (i) doit être défini :
Exemple
const iterator = text.matchAll(/Cats/gi);
Remarque
ES2021 a introduit la méthode de chaîne replaceAll().
L'opérateur de coalescence nullish (??)
L'opérateur ?? renvoie le premier opérande s'il n'est pas nullish . Sinon, il renvoie le second .
L'opérateur ?? renvoie le second opérande si le premier opérande est nullish .
Nullish est un terme qui désigne null ou undefined .
L'opérateur ?? est utilisé pour fournir des valeurs par défaut et se distingue de l'opérateur logique OR || car il ne considère que null et undefined comme "nullish" et ignore d'autres valeurs "falsy" comme 0 ou une chaîne vide.
Exemple
let name = null;
let text = "missing";
let result = name ?? text; L'opérateur de chaîne optionnelle (?.)
L' opérateur de chaîne optionnelle renvoie undefined si une propriété d'objet est undefined ou null (au lieu de lever une erreur).
Exemple
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name; La chaîne optionnelle fonctionne non seulement sur les propriétés d'objet, mais aussi sur les appels de fonction et les tableaux.
Appels de fonction
| Cas d'utilisation | Syntaxe | Comportement |
|---|---|---|
| Appel de fonction sécurisé | obj.method?.() | Renvoie undefined si la méthode n'existe pas |
| Gestion des retours | let x = fn?.() | x est undefined si fn n'existe pas |
Tableaux
| Cas d'utilisation | Syntaxe | Renvoie |
|---|---|---|
| Accès sécurisé à un élément | arr?.[2] | undefined si arr est null ou undefined |
| Propriété sécurisée sur un élément | arr?.[1]?.name | Renvoie undefined en toute sécurité |
| Appel de méthode sécurisé | arr?.map(fn) | Renvoie undefined si arr n'existe pas |
| Valeur par défaut de secours | arr?.[0] ?? "N/A" | Renvoie "N/A" si arr ou l'élément est manquant |
L'opérateur &&=
L' opérateur d'assignation logique AND est utilisé entre deux valeurs.
Si la première valeur est true , la deuxième valeur est assignée.
Exemple d'assignation logique AND
let x = 10;
x &&= 5; L'opérateur ||=
L' opérateur d'assignation logique OR est utilisé entre deux valeurs.
Si la première valeur est false , la deuxième valeur est assignée.
Exemple d'assignation logique OR
let x = 10;
x ||= 5; L'opérateur ??=
L' opérateur d'assignation de coalescence nullish est utilisé entre deux valeurs.
Si la première valeur est undefined ou null , la deuxième valeur est assignée.
Exemple d'assignation de coalescence nullish
let x;
x ??= 10; JavaScript Promise.allSettled()
La méthode Promise.allSettled() renvoie une seule promesse à partir d'une liste de promesses.
Exemple
// Créer une promesse
const myPromise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, "Roi");
});
// Créer une autre promesse
const myPromise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "Reine");
});
// Régler tout
Promise.allSettled([myPromise1, myPromise2]).then((results) =>
results.forEach((x) => myDisplay(x.status)),
); Remarque
Promise.allSettled() signifie "Exécutez simplement toutes les promesses. Je ne me soucie pas des résultats".
JavaScript Importation dynamique
L'importation dynamique est un moyen de charger des modules JavaScript à l'exécution , plutôt qu'au début de votre programme.
Syntaxe
import("./module.js") - L'argument doit être une chaîne ou une expression qui résout à un chemin
- Vous devez exécuter l'importation à l'intérieur d'un module script (<script type="module">)
Contrairement aux importations statiques (qui doivent apparaître en haut d'un fichier), les importations dynamiques peuvent être utilisées n'importe où - à l'intérieur de fonctions, de conditionnelles, de gestionnaires d'événements, etc.
| Type | Exemple | Quand chargé |
|---|---|---|
| Statique | import { add } from './math.js'; | Au moment du chargement |
| Dynamique | const math = await import('./math.js'); | Quand nécessaire |
JavaScript Global This
globalThis fournit un moyen standard d'accéder à l'objet global, quel que soit l'environnement dans lequel votre code s'exécute : dans le navigateur, Node.js, dans un Web Worker ou un autre runtime JS.
L'objet global est l'objet de niveau supérieur dans un environnement JavaScript :
- Dans les navigateurs, c'est window .
- Dans Node.js, c'est global .
- Dans les Web Workers, c'est self .
De nombreux environnements ont leur propre nom pour cet objet . Cela a causé des problèmes de compatibilité pour le code destiné à s'exécuter partout.
globalThis a été introduit dans ECMAScript 2020 (ES11) pour résoudre ce problème. C'est une référence unifiée à l'objet global, peu importe l'environnement.
Exemples
globalThis === window); // vrai dans les navigateurs
globalThis === global); // vrai dans Node.js Exemple
Définir une variable vraiment globale :
globalThis.appName = "formation-ti.org Démo"; Auparavant, les développeurs devaient utiliser des solutions de contournement comme :
Exemple
const getGlobal = function() {
if (typeof self !== 'undefined') return self;
if (typeof window !== 'undefined') return window;
if (typeof global !== 'undefined') return global;
throw new Error('Impossible de trouver l'objet global');
};
Avec globalThis , cela n'est plus nécessaire.
JavaScript import.meta
import.meta renvoie un objet contenant l'URL de base d'un module.
Exemple
const myObject = import.meta;
Exports de namespace de module
Avec les exports de namespace de module, vous pouvez réexporter un namespace entier de votre propre module, sans avoir à l'importer au préalable.
Exemple
Avant :
// réexporter tous les exports nommés directement
export * from "./utils.js";
// les consommateurs peuvent utiliser :
import { add } from "./math.js";
Maintenant :
// réexporter tout comme un namespace
export * as utils from "./utils.js";
// les consommateurs peuvent utiliser :
import { utils } from "./math.js";