Depuis la sortie de la norme ECMAScript 2015 (également appelée ES6), JavaScript a sérieusement changé et amélioré. C'est une très bonne nouvelle pour tous les développeurs JS. De plus, une nouvelle version d'ECMAScript est désormais publiée chaque année. Peut-être n'avez-vous pas prêté beaucoup d'attention à ce qui figurait dans la dernière version de la norme, qui a été publiée en juin 2019. L'auteur de l'article, dont nous publions la traduction aujourd'hui, veut dire en quelques mots les innovations de JavaScript et ce à quoi on peut s'attendre dans la prochaine version du standard ECMAScript.
Les opportunités dont les propositions sont dans la troisième phase d'approbation (étape 3) seront mentionnées ici. Cela signifie qu'ils sont susceptibles d'apparaître dans la prochaine version de la norme ECMAScript, mais cela ne peut pas être confirmé avec une certitude absolue.
Voici un référentiel où vous pouvez trouver des informations sur les propositions qui sont à différents stades d'approbation.
Caractéristiques ECMAScript 2019 (ES10)
La norme ES10 possède de
nombreuses nouvelles fonctionnalités. Nous n'en considérerons ici que quelques-uns. À savoir, quelques nouvelles méthodes de tableau.
▍ Méthode Array.prototype.flat
Cette méthode vous permet de créer des tableaux, qui incluent d'autres tableaux, plus "plats", en les "compressant" à un niveau de profondeur donné.
const array = [1, 2, [3, 4]]; array.flat();
Il s'agit d'une fonctionnalité très utile, en particulier dans les cas où vous devez travailler avec des tableaux imbriqués. Si la profondeur d'imbrication des tableaux dans la structure de données dépasse 1, un seul appel à la méthode
flat ne peut pas rendre le tableau complètement «plat». Cette méthode accepte une
depth paramètre facultative, qui vous permet de spécifier combien de niveaux d'imbrication la dimension du tableau traité doit être réduite.
Plus la baie est profonde, plus il faudra de ressources informatiques pour la traiter. Veuillez noter qu'IE et Edge ne prennent pas en charge cette fonctionnalité.
▍ Méthode Array.prototype.flatMap
Cette méthode traite d'abord les éléments du tableau à l'aide de la fonction qui lui est transmise, puis convertit le tableau en une structure plate.
const arr = ["it's Sunny in", "", "California"]; arr.flatMap(x => x.split(" "));
La différence entre
flatMap et
flatMap est que vous pouvez passer votre propre fonction à la méthode
flatMap qui convertit les éléments du tableau d'origine. En plus de cela,
flatMap , contrairement à
flat , «ne soulève» les éléments des tableaux que d'un niveau. Cette méthode renvoie un nouveau tableau. Cela peut être utile dans les cas où, avant de rendre un certain tableau «plat», vous devez en quelque sorte traiter ses éléments.
Nouvelles fonctionnalités JS à l'étape 3 de l'approbation
Au troisième stade de la coordination, il existe de nombreuses nouvelles propositions intéressantes pour étendre et améliorer la langue. Examinons certains d'entre eux.
▍ Séparateurs de chiffres
Cela vous est arrivé: écrivez un nombre long dans une variable et doutez de son orthographe correcte? La phrase en question nous permet de séparer les bits de nombres avec des traits de soulignement. Cela facilite le travail avec les nombres.
1_000_000_000
Chaque développeur, après avoir accepté cette fonctionnalité, décidera lui-même d'utiliser ou non des séparateurs de décharge. Mais une chose est sûre: cette fonctionnalité peut réduire les inconvénients liés au calcul des chiffres des grands nombres.
▍Utilisation de l'attente au niveau supérieur du code
L'utilisation du mot-clé
await au niveau supérieur du code permet aux modules d'agir comme de grandes fonctions asynchrones. En raison de cette fonctionnalité, les modules ECMAScript peuvent s'attendre à ce que certaines ressources apparaissent. Cela conduit au fait que les autres modules qui les importent attendront que le corps des modules importés soit prêt à fonctionner.
La raison de cette fonctionnalité est que lorsqu'un module est importé qui a une fonction déclarée avec le
async , la sortie de cette fonction ne sera pas
undefined .
L'exemple suivant montre deux fichiers. Il peut être
undefined en
output si la fonction est appelée avant que les tâches représentées par les promesses ne soient terminées.
Tout s'arrêtera dans le
awaiting.js jusqu'à ce que les
awaiting.js soient résolues en attendant.js.
▍Opérateur ?? et vérifier les valeurs uniquement sur null et indéfini
Peut-être, parmi toutes les offres de l'étape 3, c'est la plus utile. Nous devons souvent écrire quelque chose comme ceci:
const obj = { name: 'James' }; const name = obj.name || 'Jane';
Si
obj.name est représenté par une valeur fausse, la chaîne
Jane entre dans
name . Par conséquent, le
name ne sera pas quelque chose comme
undefined . Mais le problème est qu'une chaîne vide dans ce cas sera perçue comme une fausse valeur. Si cela est pris en compte, ce code doit être réécrit comme suit:
const name = (obj.name && obj.name !== '') || 'Jane';
Il n’est pas pratique d’écrire comme ça tout le temps. Opérateur
?? (deux points d'interrogation) permet de vérifier uniquement
null valeurs
null et
undefined :
const response = { settings: { nullValue: null, height: 400, animationDuration: 0, headerText: '', showSplashScreen: false } }; const undefinedValue = response.settings.undefinedValue ?? 'some other default';
▍Opérateur?. et chaînes optionnelles
Cette suggestion est proche de celle qui vient d'être examinée, combinant
null contrôles
null et
undefined . Il est connu que les utilisateurs de TypeScript
sont intéressés par cette fonctionnalité.
Prenons un exemple:
const city = country && country.city;
Pour accéder à la propriété de la
city d'un objet de
country , vous devez vérifier l'existence de l'objet de
country et l'existence de la propriété de la
city .
En utilisant l'opérateur
?. (point d'interrogation et point) ce code peut être converti comme ceci:
const city = country?.city;
Cette fonctionnalité semble utile dans de telles situations:
import { fetch } from '../yourFetch.js'; (async () => { const res = await fetch();
▍ Méthode Promise.any
La méthode
Promise.any accepte un objet
Promise.any contenant des objets de promesse et retourne une promesse qui est résolue avec succès lorsqu'au moins un des objets de promesse qui lui sont passés est résolu avec succès. Si tous les objets promis sont rejetés, il renvoie un tableau contenant des informations sur les raisons de leur rejet.
Voici à quoi
Promise.any avec la construction async / attendent:
try { const first = await Promise.any(promises);
Voici la même chose implémentée à l'aide de promesses:
Promise.any(promises).then( (first) => {
JavaScript a déjà des
Promise.all ,
.allSettled ,
.race , mais une méthode similaire.
any , n'était pas. En conséquence, nous avons une nouvelle opportunité qui complète les opportunités existantes et peut s'avérer utile dans certaines situations. Bien que cette
proposition en soit déjà à la troisième étape d'approbation, elle pourrait ne pas être incluse dans la prochaine édition de la norme ECMAScript car elle nécessite des tests supplémentaires.
Résumé
Il existe de nombreuses suggestions intéressantes pour développer JavaScript qui en sont à la troisième étape de l'approbation. Il sera intéressant de les voir dans les normes ES11 et ES12. Bien sûr, il est peu probable que quiconque les utilise tous, mais certains d'entre eux trouveront certainement une large application et contribueront à la croissance de la qualité du code JS.
Chers lecteurs! Utilisez-vous déjà des fonctionnalités JavaScript qui sont presque prêtes à être incluses dans la prochaine version de la norme?
