L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Principales fonctionnalités JavaScript ajoutées dans ECMAScript 2020 (ES2020)
JavaScript est l'un des langages de programmation les plus populaires, et des fonctionnalités sont désormais ajoutées au langage chaque année. Cet article couvre les nouvelles fonctionnalités ajoutées dans ECMAScript 2020, également connu sous le nom ES11.
Avant l'introduction d'ECMAScript 2015, également connu sous le nom ES6, le développement du langage JavaScript avait un rythme très lent. Heureusement, depuis lors, de nouvelles fonctionnalités sont ajoutées chaque année. Sachez que toutes les fonctionnalités ne sont pas encore prises en charge dans tous les navigateurs modernes, mais grâce à des transpilers comme Babel nous pouvons les utiliser dès aujourd'hui. Cet article couvrira certains des derniers ajouts à JavaScript – ECMAScript 2020 (ES11).
Chaînage facultatif
Je suis sûr que la plupart des développeurs connaissent une erreur de ce type:
TypeError: Impossible de lire la propriété 'x' of undefined
Cette erreur signifie essentiellement que nous avons essayé d'accéder à une propriété sur quelque chose qui n'est pas un objet.
Accès à une propriété d'objet
const flower = {
couleurs: {
rouge: vrai
}
}
console.log (flower.colors.red) // cela fonctionnera
console.log (flower.species.lily) // TypeError: Impossible de lire la propriété 'lily' d'undefined
Le moteur JavaScript générera toujours une erreur dans un scénario comme celui-ci. Cependant, il y a des cas dans lesquels il n'est pas important que la valeur ne soit pas encore là, car nous pourrions savoir qu'elle le sera. Heureusement, voici la fonction de chaînage en option à la rescousse!
Nous pouvons utiliser l'opérateur de chaînage facultatif, qui se compose d'un point d'interrogation et d'un point: ?. pour indiquer qu'une erreur ne doit pas être levée. Au lieu de cela, s'il n'y a pas de valeur, non défini sera renvoyé.
console.log (flower.species? .Lily) // non défini
Le chaînage facultatif peut également être utilisé lors de l'accès à des valeurs de tableau ou à l'appel d'une fonction.
Accès à un tableau
let flowers = ['lily', 'daisy', 'rose']
console.log (fleurs [1]) // marguerite
fleurs = null
console.log (flowers [1]) // TypeError: Impossible de lire la propriété '1' de null
console.log (fleurs?. [1]) // non défini
Appel d'une fonction
laissez plantFlowers = () => {
retour 'orchidées'
}
console.log (plantFlowers ()) // orchidées
plantFlowers = null
console.log (plantFlowers ()) // TypeError: plantFlowers n'est pas une fonction
console.log (plantFlowers?. ()) // non défini
Nullish Coalescing
Jusqu'à récemment, chaque fois qu'il était nécessaire de fournir une valeur de repli, l'opérateur logique || devait être utilisé. Cela fonctionne dans la plupart des cas, mais il ne peut pas être appliqué dans certains scénarios. Par exemple, si la valeur initiale est un booléen ou un nombre. Jetons un coup d'œil à un exemple ci-dessous, où nous voulons attribuer un nombre à une variable, ou par défaut à 7 si la valeur initiale n'est pas un nombre:
let number = 1
laissez myNumber = nombre || 7
La variable myNumber est égale à 1, car la valeur de gauche ( nombre ) est une valeur véridique car 1 est un nombre positif. Cependant, que faire si la variable number n'est pas 1, mais 0?
let number = 0
laissez myNumber = nombre || 7
0 est une valeur de fausse et même s'il s'agit d'un nombre, la variable myNumber aura la valeur de droite qui lui est affectée. Par conséquent, myNumber est maintenant égal à 7. Cependant, ce n'est pas vraiment ce que nous voulons. Heureusement, au lieu d'écrire du code et des vérifications supplémentaires pour confirmer si la variable number est bien un nombre, nous pouvons utiliser l'opérateur de coalescence nul. Il se compose de deux points d'interrogation: ?? .
let number = 0
laissez myNumber = nombre ?? 7
La valeur de droite ne sera affectée que si la valeur de gauche est égale à null ou undefined . Par conséquent, dans l'exemple ci-dessus, la variable myNumber est égale à 0.
Champs privés
De nombreux langages de programmation qui ont des classes permettent de définir des propriétés de classe comme publiques, protégées, ou privé. Les propriétés publiques sont accessibles depuis l'extérieur d'une classe et par ses sous-classes, tandis que les classes protégées ne sont accessibles que par les sous-classes. Cependant, les propriétés privées ne sont accessibles que depuis l'intérieur d'une classe. JavaScript prend en charge la syntaxe des classes depuis ES6 mais ce n'est que maintenant que des champs privés ont été introduits. Pour définir une propriété privée, elle doit être précédée du symbole de hachage: # .
class Flower {
#leaf_color = "green";
constructeur (nom) {
this.name = nom;
}
get_color () {
renvoie ceci. # leaf_color;
}
}
const orchidée = nouvelle fleur ("orchidée");
console.log (orchid.get_color ()); // vert
console.log (orchid. # leaf_color) // Le nom privé #leaf_color n'est pas défini
Si nous essayons d'accéder à une propriété privée de l'extérieur, une erreur sera générée.
Champs statiques
Pour utiliser une méthode de classe, une classe doit d'abord être instanciée, comme illustré ci-dessous.
class Fleur {
add_leaves () {
console.log ("Ajout de feuilles");
}
}
const rose = new Flower ();
rose.add_leaves ();
Flower.add_leaves () // TypeError: Flower.add_leaves n'est pas une fonction
Essayer d'accéder à une méthode sans instancier la classe Flower entraînerait une erreur. Grâce aux champs statiques une méthode de classe peut désormais être déclarée avec le mot-clé statique et appelée depuis l'extérieur d'une classe.
class Flower {
constructeur (type) {
this.type = type;
}
create_flower statique (type) {
retourner une nouvelle fleur (type);
}
}
const rose = Flower.create_flower ("rose"); // Fonctionne bien
Top Level Await
Jusqu'à présent, pour attendre la promesse de terminer, une fonction dans laquelle attendre est utilisée devrait être définie avec l'async mot-clé.
const func = async () => {
réponse const = attendre la récupération (url)
}
Malheureusement, s'il fallait attendre quelque chose à l'échelle mondiale, cela ne serait pas possible et nécessitait généralement une expression de fonction immédiatement invoquée (IIFE) .
(async () => {
réponse const = attendre la récupération (url)
}) ()
Grâce à Top Level Await il n'est plus nécessaire d'encapsuler le code dans une fonction asynchrone, et ce code fonctionnera.
const response = wait fetch (url)
Cette fonctionnalité pourrait être utile pour résoudre les dépendances de module ou utiliser une source de secours si la source initiale échouait.
laissez Vue
essayez {
Vue = attendre l'importation ('url_1_to_vue')
} capture {
Vue = attendre l'importation ('url_2_to_vue)
}
Promise.allSettled
Pour attendre la fin de plusieurs promesses, Promise.all ([promise_1, promise_2]) peut être utilisé. Le problème est que si l'un d'eux échoue, une erreur sera générée. Néanmoins, il y a des cas où il est acceptable que l'une des promesses échoue, et le reste devrait encore être résolu. Pour y parvenir, ES11 a introduit Promise.allSettled .
promise_1 = Promise.resolve ('bonjour')
primise_2 = nouvelle promesse ((résoudre, rejeter) => setTimeout (rejeter, 200, 'problème'))
Promise.allSettled ([promise_1, promise_2])
.then (([promise_1_result, promise_2_result]) => {
console.log (promise_1_result) // {statut: 'rempli', valeur: 'bonjour'}
console.log (promise_2_result) // {statut: 'rejeté', raison: 'problème'}
})
Une promesse résolue renverra un objet avec les propriétés de statut et tandis que celles rejetées auront le statut et la raison . [19659059] Importation dynamique
Vous avez peut-être utilisé des importations dynamiques lors de l'utilisation de webpack pour le regroupement de modules. Enfin, le support natif de cette fonctionnalité est ici.
// Fichier Alert.js
exporter par défaut {
spectacle() {
// Votre alerte
}
}
// Un autre fichier
import ('/ components / Alert.js')
.then (Alert => {
Alert.show ()
})
Compte tenu du fait que de nombreuses applications utilisent des regroupeurs de modules comme webpack pour transpiler et optimiser le code, cette fonctionnalité n'est pas très importante pour le moment.
MatchAll
MatchAll est utile pour appliquer la même expression régulière à une chaîne si vous avez besoin de trouver toutes les correspondances et d'obtenir leurs positions. La méthode match ne renvoie que les éléments qui ont été mis en correspondance.
const regex = / b (apple) + b /;
fruits const = "poire, pomme, banane, pomme, orange, pomme";
for (const match of fruits.match (regex)) {
console.log (match);
}
// Production
//
// 'Pomme'
// 'Pomme'
matchAll en revanche, renvoie un peu plus d'informations, y compris l'index de la chaîne trouvée.
for (const match of fruits.matchAll (regex)) {
console.log (match);
}
// Production
//
// [
// 'apple',
// 'apple',
// index: 6,
// input: 'pear, apple, banana, apple, orange, apple',
// groups: undefined
// ],
// [
// 'apple',
// 'apple',
// index: 21,
// input: 'pear, apple, banana, apple, orange, apple',
// groups: undefined
// ],
// [
// 'apple',
// 'apple',
// index: 36,
// input: 'pear, apple, banana, apple, orange, apple',
// groups: undefined
// ]
globalThis
JavaScript peut s'exécuter dans différents environnements comme les navigateurs ou Node.js. Un objet global dans les navigateurs est disponible sous la variable de la fenêtre mais dans Node, il s'agit d'un objet appelé global . Pour faciliter l'utilisation d'un objet global, quel que soit le code d'environnement exécuté, globalThis a été introduit.
// Dans un navigateur
window == globalThis // true
// Dans node.js
global == globalThis // true
BigInt
Le nombre maximal pouvant être représenté de manière fiable dans JavaScript est 2 ^ 53 – 1. BigInt permettra la création de nombres encore plus grands que cela.
const theBiggerNumber = 9007199254740991n
const evenBiggerNumber = BigInt (9007199254740991)
Conclusion
J'espère que vous avez trouvé cet article utile et que vous êtes aussi excité que moi par les nouvelles fonctionnalités qui arrivent sur JavaScript. Si vous souhaitez en savoir plus sur les différentes fonctionnalités, vous pouvez consulter le référentiel GitHub officiel du comité ES ici .
Source link