Fonctionnalités ESF JavaScript incontournables pour le développement moderne

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.

1. Attente de haut niveau

Avant ES13 :

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.

Exemple :

// Without top-level await (Before ES13)
async function fetchData() {
  const data = await fetch('/api/data');
  return data.json();
}
fetchData().then(console.log);

Fonctionnalité ES13 :

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());

2. Méthodes et accesseurs d'instance privée

Avant ES13 :

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.

Exemple :

// 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

Fonctionnalité ES13 :

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

3. Champs et méthodes de classe statique

Avant ES13 :

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.

Exemple :

// 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

Fonctionnalité ES13 :

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

4. Opérateurs d'affectation logique

Avant ES13 :

Les opérateurs logiques (&&, ||, ??) et l'affectation étaient souvent combinés manuellement dans des instructions détaillées, conduisant à un code plus complexe.

Exemple :

// 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

Fonctionnalité ES13 :

ES13 introduit les 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

5. WeakRefs et FinalizationRegistry

Avant ES13 :

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, notamment avec des applications à grande échelle qui gèrent des objets coûteux.

Exemple :

// No native support for weak references (Before ES13)
// Developers often had to rely on complex workarounds or external libraries.

Fonctionnalité ES13 :

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');

6. Contrôles de marque ergonomiques pour les champs privés

Avant ES13 :

Vérifier si un objet avait un champ privé n'était pas simple, car les champs privés n'étaient pas pris en charge nativement. 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'instance.

Exemple :

// 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

Fonctionnalité ES13 :

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

7. Array.prototype.at()

Avant ES13 :

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.

Exemple :

// Accessing array elements (Before ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr[arr.length - 1]); // 5 (last element)

Fonctionnalité ES13 :

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)

8. Object.hasOwn()

Avant ES13 :

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().

Exemple :

// Checking own properties (Before ES13)
const obj = { a: 1 };
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true
console.log(obj.hasOwnProperty('a')); // true

Fonctionnalité ES13 :

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

9. Object.fromEntries()

Avant ES13 :

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.

Example:

// 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 }

ES13 Feature:

Object.fromEntries() simplifies the creation of objects from key-value pairs.

// 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 }

10. Global This in Modules

Before ES13:

The value of this in the top level of a module was undefined, leading to confusion when porting code from scripts to modules.

Example:

// Global `this` (Before ES13)
console.log(this); // undefined in modules, global object in scripts

ES13 Feature:

ES13 clarifies that the value of this at the top level of a module is always undefined, providing consistency between modules and scripts.

// Global `this` in modules (ES13)
console.log(this); // undefined

---

These ES13 features are designed to make your JavaScript code more efficient, readable, and maintainable. By integrating these into your development practices, you can leverage the latest advancements in the language to build modern, performant applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!