Récemment, le chaînage facultatif et la valeur d'attribut par défaut ( coalescence nulle ) sont passés à la dernière et quatrième étape du processus TC39.
En pratique, cela signifie que ces innovations et d'autres feront partie du standard JavaScript dès 2020. Nous les considérerons dans cet article.
Vous pouvez suivre le support du navigateur ici («Fonctionnalités 2020») - env. perev.
L'utilisation d'expressions régulières collantes ou globales, lorsque vous devez capturer plusieurs groupes sur la même ligne, peut ne pas être triviale.
String.prototype.match ne renvoie pas les groupes capturés en présence d'un indicateur global, et sans lui, vous ne pouvez obtenir que la première correspondance complète avec le modèle et son groupe.
Un exemple:
let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; const results = str.match(regexp); console.log(results);
Résultat avec le drapeau "g"
Le résultat sans le drapeau "g"L'utilisation de String.prototype.matchAll garantit que toutes les correspondances et leurs groupes sont renvoyés.
Un exemple:
let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; let array = [...str.matchAll(regexp)]; console.log(array);
Résultat:
Avant BigInt, la plus grande valeur représentée par Number était 2⁵³-1 (MAX_SAFE_INTEGER). JavaScript aura désormais une primitive qui peut dépasser la limite.
Vous pouvez créer un BigInt en ajoutant 'n' à un nombre ou en utilisant la fonction BigInt ().
Un exemple:
let bigInt = 4n console.log(bigInt * bigInt)
- BigInt n'est pas équivalent à Number , mais peut être converti en ce dernier.
- Lorsque vous effectuez des opérations telles que la division, le résultat sera arrondi à l'entier le plus proche.
- Ne peut pas être utilisé avec Number sans transtypage de type.
Essayer d'ajouter BigInt avec un nombre ...
let bigInt = 4n + 2 console.log(bigInt)
... entraîne une exception:
L'accès aux objets globaux dans le monde JavaScript a toujours été un casse-tête. Vous devez être familiarisé avec la syntaxe spécifique à l'environnement, ce qui crée des difficultés inutiles lors de l'écriture de code portable et rend nécessaire l'utilisation de quelque chose comme getGlobal.
Un exemple:
var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('no global object found'); }; var globals = getGlobal();
Avec l'avènement de globalThis, vous pouvez arrêter de penser à l'environnement et unifier les objets globaux.
Un exemple:
globalThis.someFunction = () => 'hello' console.log(globalThis.someFunction())
Supposons que vous ayez quelques promesses et que vous vouliez faire quelque chose après qu'elles soient terminées (peu importe si elles réussissent ou non). Promise.allSettled est à cet effet.
Un exemple:
const fulfilledPromise = Promise.resolve("success"); const rejectedPromise = Promise.reject("error") const promises = [fulfilledPromise, rejectedPromise]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result)));
Résultat:
Vous souhaitez charger un module lors de l'exécution, en fonction d'une condition spécifique? Maintenant, cela peut être fait sans bibliothèques tierces.
Il suffit d'appeler la fonction d' importation , qui renverra la promesse.
Un exemple:
import("some_module") .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); });
Contrairement à l'importation statique, où vous devez spécifier explicitement le nom du module, lors de l'importation dynamique, vous pouvez, par exemple, passer un modèle à la fonction.
Exemple d'utilisation d'un modèle:
import(`${some_module}.js`) .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); });
Lorsque vous devez obtenir un attribut ou une valeur par défaut, s'il est nul ou non défini , nous utilisons généralement l'opérateur '||'.
Avant la fusion Nullish:
const response = someResponse.properties.mayBeUndefined || 'Response';
Imaginez, cependant, qu'un attribut ait une «fausse» valeur.
Le problème de l'utilisation de '||':
const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined || 'Response'; console.log(response)
Résultat:
Il s'agit d'un comportement indésirable. Dans ce cas, nous avions besoin d'une valeur d'attribut, pas d'une valeur par défaut.
Avec Nullish coalescing ce problème ne sera pas. La valeur par défaut sera renvoyée uniquement pour les attributs nuls ou non définis .
Utilisation de la coalescence Nullish:
const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined ?? 'Response'; console.log(response)
Résultat:
Pour accéder au sous-attribut, nous devons nous assurer que l'attribut ci-dessus existe. Jusqu'à présent, l'existence de chacun des sur-attributs doit être vérifiée manuellement.
Avant le chaînage facultatif:
const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty ? someObj.NotOtherProperty.name: undefined; console.log(property);
Avec l'avènement du chaînage optionnel , vous pouvez utiliser l'opérateur '?.' pour un accès facultatif aux sous-attributs. Le code ci-dessous est équivalent au code ci-dessus.
Utilisation du chaînage facultatif:
const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty?.name; console.log(property);
Le chaînage facultatif rend le code beaucoup plus propre, surtout s'il y a beaucoup d'attributs dans la chaîne.
Conclusion
Vous pouvez essayer d'exécuter des exemples à partir d'un article dans la console: certains d'entre eux sont déjà implémentés dans les dernières versions des navigateurs, d'autres sont susceptibles d'être implémentés très bientôt. D'une manière ou d'une autre, il est déjà possible de commencer à se rapporter aux possibilités de l'article dans le cadre de la langue 2020.