JavaScript continue d'évoluer et avec l'introduction d'ES13 (ECMAScript 2022), il existe plusieurs nouvelles fonctionnalités dont les développeurs doivent être conscients pour écrire du code plus efficace et plus moderne. Dans cet article, nous examinerons dix des fonctionnalités les plus efficaces d'ES13 qui peuvent améliorer votre flux de travail de développement.
Auparavant, vous ne pouviez utiliser wait qu'à l'intérieur des fonctions asynchrones. Cela signifiait que si vous deviez utiliser wait, vous deviez envelopper votre code dans une fonction asynchrone, même si le reste de votre module ne l'exigeait pas.
// Without top-level await (Before ES13) async function fetchData() { const data = await fetch('/api/data'); return data.json(); } fetchData().then(console.log);
Avec ES13, vous pouvez désormais utiliser wait au niveau supérieur de votre module, éliminant ainsi le besoin d'une fonction wrapper asynchrone supplémentaire.
// With top-level await (ES13) const data = await fetch('/api/data'); console.log(await data.json());
Avant ES13, les classes JavaScript n'avaient pas de véritables champs ou méthodes privés. Les développeurs utilisaient souvent des conventions de dénomination comme les traits de soulignement ou les fermetures pour simuler la confidentialité, mais ces méthodes n'étaient pas vraiment privées.
// Simulating private fields (Before ES13) class Person { constructor(name) { this._name = name; // Conventionally "private" } _getName() { return this._name; } greet() { return `Hello, ${this._getName()}!`; } } const john = new Person('John'); console.log(john._getName()); // Accessible, but intended to be private
ES13 introduit de véritables méthodes d'instance privée et des accesseurs utilisant le préfixe #, garantissant qu'ils ne sont pas accessibles en dehors de la classe.
// Private instance methods and fields (ES13) class Person { #name = ''; constructor(name) { this.#name = name; } #getName() { return this.#name; } greet() { return `Hello, ${this.#getName()}!`; } } const john = new Person('John'); console.log(john.greet()); // Hello, John! console.log(john.#getName()); // Error: Private field '#getName' must be declared in an enclosing class
Avant ES13, les champs et méthodes statiques étaient généralement définis en dehors du corps de la classe, ce qui conduisait à un code moins cohérent.
// Static fields outside class body (Before ES13) class MathUtilities {} MathUtilities.PI = 3.14159; MathUtilities.calculateCircumference = function(radius) { return 2 * MathUtilities.PI * radius; }; console.log(MathUtilities.PI); // 3.14159 console.log(MathUtilities.calculateCircumference(5)); // 31.4159
ES13 vous permet de définir des champs et des méthodes statiques directement dans le corps de la classe, améliorant ainsi la lisibilité et l'organisation.
// Static fields and methods inside class body (ES13) class MathUtilities { static PI = 3.14159; static calculateCircumference(radius) { return 2 * MathUtilities.PI * radius; } } console.log(MathUtilities.PI); // 3.14159 console.log(MathUtilities.calculateCircumference(5)); // 31.4159
Les opérateurs logiques (&&, ||, ??) et l'affectation étaient souvent combinés manuellement dans des instructions détaillées, conduisant à un code plus complexe.
// Manually combining logical operators and assignment (Before ES13) let a = 1; let b = 0; a = a && 2; // a = 2 b = b || 3; // b = 3 let c = null; c = c ?? 4; // c = 4 console.log(a, b, c); // 2, 3, 4
ES13 introduit des opérateurs d'affectation logique, qui combinent des opérations logiques avec une affectation dans une syntaxe concise.
// Logical assignment operators (ES13) let a = 1; let b = 0; a &&= 2; // a = a && 2; // a = 2 b ||= 3; // b = b || 3; // b = 3 let c = null; c ??= 4; // c = c ?? 4; // c = 4 console.log(a, b, c); // 2, 3, 4
Les références faibles et les finaliseurs n'étaient pas pris en charge nativement dans JavaScript, ce qui rendait difficile la gestion des ressources dans certains cas, en particulier avec des applications à grande échelle qui gèrent des objets coûteux.
// No native support for weak references (Before ES13) // Developers often had to rely on complex workarounds or external libraries.
ES13 introduit WeakRef et FinalizationRegistry, fournissant une prise en charge native des références faibles et des tâches de nettoyage après le garbage collection.
// WeakRefs and FinalizationRegistry (ES13) let obj = { name: 'John' }; const weakRef = new WeakRef(obj); console.log(weakRef.deref()?.name); // 'John' obj = null; // obj is eligible for garbage collection setTimeout(() => { console.log(weakRef.deref()?.name); // undefined (if garbage collected) }, 1000); const registry = new FinalizationRegistry((heldValue) => { console.log(`Cleanup: ${heldValue}`); }); registry.register(obj, 'Object finalized');
Vérifier si un objet avait un champ privé n'était pas simple, car les champs privés n'étaient pas pris en charge de manière native. Les développeurs ont dû s'appuyer sur des méthodes de contournement, telles que la vérification des propriétés publiques ou l'utilisation de vérifications d'instances.
// Checking for private fields using workarounds (Before ES13) class Car { constructor() { this.engineStarted = false; // Public field } startEngine() { this.engineStarted = true; } static isCar(obj) { return obj instanceof Car; // Not reliable for truly private fields } } const myCar = new Car(); console.log(Car.isCar(myCar)); // true
Avec ES13, vous pouvez désormais vérifier directement si un objet possède un champ privé en utilisant la syntaxe #, ce qui le rend plus simple et plus fiable.
// Ergonomic brand checks for private fields (ES13) class Car { #engineStarted = false; startEngine() { this.#engineStarted = true; } static isCar(obj) { return #engineStarted in obj; } } const myCar = new Car(); console.log(Car.isCar(myCar)); // true
L'accès aux éléments des tableaux impliquait l'utilisation de la notation entre parenthèses avec un index, et pour les indices négatifs, vous deviez calculer manuellement la position.
// Accessing array elements (Before ES13) const arr = [1, 2, 3, 4, 5]; console.log(arr[arr.length - 1]); // 5 (last element)
La méthode at() vous permet d'accéder de manière plus intuitive aux éléments du tableau en utilisant à la fois des indices positifs et négatifs.
// Accessing array elements with `at()` (ES13) const arr = [1, 2, 3, 4, 5]; console.log(arr.at(-1)); // 5 (last element) console.log(arr.at(0)); // 1 (first element)
Pour vérifier si un objet avait sa propre propriété (non héritée), les développeurs utilisaient généralement Object.prototype.hasOwnProperty.call() ou obj.hasOwnProperty().
// Checking own properties (Before ES13) const obj = { a: 1 }; console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true console.log(obj.hasOwnProperty('a')); // true
La nouvelle méthode Object.hasOwn() simplifie cette vérification, en fournissant une syntaxe plus concise et lisible.
// Checking own properties with `Object.hasOwn()` (ES13) const obj = { a: 1 }; console.log(Object.hasOwn(obj, 'a')); // true
La transformation de paires clé-valeur (par exemple, à partir d'une carte ou de tableaux) en un objet nécessitait une boucle et une construction manuelle.
// Creating an object from entries (Before ES13) const entries = [['name', 'John'], ['age', 30]]; const obj = {}; entries.forEach(([key, value]) => { obj[key] = value; }); console.log(obj); // { name: 'John', age: 30 }
Object.fromEntries() simplifie la création d'objets à partir de paires clé-valeur.
// Creating an object with `Object.fromEntries()` (ES13) const entries = [['name', 'John'], ['age', 30]]; const obj = Object.fromEntries(entries); console.log(obj); // { name: 'John', age: 30 }
La valeur de ceci au niveau supérieur d'un module n'était pas définie, ce qui entraînait une confusion lors du portage du code des scripts vers les modules.
// Global `this` (Before ES13) console.log(this); // undefined in modules, global object in scripts
ES13 précise que la valeur de ceci au niveau supérieur d'un module est toujours indéfinie, assurant ainsi la cohérence entre les modules et les scripts.
// Global `this` in modules (ES13) console.log(this); // undefined
Ces fonctionnalités ES13 sont conçues pour rendre votre code JavaScript plus efficace, lisible et maintenable. En les intégrant dans vos pratiques de développement, vous pouvez tirer parti des dernières avancées du langage pour créer des applications modernes et performantes.
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.
Copyright© 2022 湘ICP备2022001581号-3