Quoi de neuf dans ES2022

Jingteng FE , du réseau Jingteng. Il s'agit d'une équipe de développement axée sur le front-end Web et qui a accumulé de nombreuses années d'expérience dans la résolution de problèmes difficiles dans le domaine du front-end Web. Préconisant une efficacité élevée, une qualité élevée, la croissance, la liberté et le bonheur.

ES2022 deviendra probablement un standard en juin 2022, jetons un coup d'œil aux fonctionnalités qui feront partie de ES2022.

Champs de classe

Champs d'instance publique

Les champs d'instance publics existent dans chaque instance d'une classe. Les champs d'instance publics peuvent être ajoutés à l'aide de Object.defineProperty lors de la construction de la classe de base (avant l'exécution du corps du constructeur) ou après la fin de la fonction super() dans le constructeur de la sous-classe.

const PREFIX = 'prefix';

class ClassWithComputedFieldName {
    [`${PREFIX}Field`] = 'prefixed field';
    instanceField;
}

const instance = new ClassWithComputedFieldName();
console.log(instance.prefixField);
// 预期输出值: "prefixed field"
console.log(instance.instanceField);
// 预期输出值: "undefined"

Champs d'instance privée

Les champs d'instance privés sont déclarés avec des noms # (prononcés "noms de hachage"), qui commencent par #. Autrement dit, # fait partie du nom lui-même et doit également être ajouté lors de la déclaration et de l'accès. Les champs privés sont accessibles dans le constructeur de la déclaration de classe.

Faire référence à un #name depuis l'extérieur de la portée, faire référence en interne à un champ privé sans être déclaré ou tenter de supprimer un champ déclaré avec delete générera tous une erreur de syntaxe.

class ClassWithPrivateField {
  #privateField;

  constructor() {
    this.#privateField = 42;
    delete this.#privateField;   // 语法错误
    this.#undeclaredField = 444; // 语法错误
  }
}

const instance = new ClassWithPrivateField()
instance.#privateField === 42;   // 语法错误

Champs de classe statiques et méthodes statiques privées

Une classe définit des méthodes statiques avec le mot-clé static. Les méthodes statiques ne peuvent pas être appelées sur une instance d'une classe, mais doivent être appelées via la classe elle-même.

class ClassWithStaticMethod {
static #PRIVATE_STATIC_FIELD;
  static staticProperty = 'someValue';
  static staticMethod() {
    return 'static method has been called.';
  }
  static publicStaticMethod() {
    ClassWithStaticMethod.#PRIVATE_STATIC_FIELD = 42;
    return ClassWithStaticMethod.#PRIVATE_STATIC_FIELD;
  }
  static {
    console.log('Class static initialization block called');
  }
}

// 预期输出值: "Class static initialization block called"
console.log(ClassWithStaticMethod.staticProperty);
// 预期输出值: "someValue"
console.log(ClassWithStaticMethod.staticMethod());
// 预期输出值: "static method has been called."
console.log(ClassWithStaticMethod.publicStaticMethod() === 42);
// 预期输出值: true

Méthodes d'instance privée et accesseurs

Les méthodes d'instance privée sont des méthodes disponibles sur une instance de classe et elles sont accessibles de la même manière que les champs d'instance privée.

Les méthodes d'instance privées peuvent être des générateurs, des fonctions de générateur asynchrones ou asynchrones, des getters et des setters privés.

class ClassWithPrivateAccessor {
  #message;

  get #decoratedMessage() {
    return `${this.#message}`;
  }
  set #decoratedMessage(msg) {
    this.#message = msg;
  }

  constructor() {
    this.#decoratedMessage = 'hello world';
    console.log(this.#decoratedMessage);
  }
}

new ClassWithPrivateAccessor();
// 预期输出值: "hello world"

Indices de correspondance RegExp

Index de correspondance des expressions régulières. L'ajout de l'indicateur /d à l'expression régulière produit un objet match qui enregistre le début et la fin de chaque capture de groupe.

Comme vous pouvez le voir sur la figure ci-dessus, l'attribut index est ajouté à l'objet de sortie, qui contient les index de début et de fin du groupe correspondant.

En plus de la valeur d'index, des groupes correspondants peuvent également être obtenus en les nommant, comme illustré dans l'image ci-dessus.

Attente de haut niveau

Module d'attente de niveau supérieur. Vous pouvez utiliser await au niveau supérieur d'un module et vous n'avez plus besoin de taper des fonctions ou des méthodes asynchrones.

Charger dynamiquement des modules

let lodash;
try {
  lodash = await import('https://primary.example.com/lodash');
} catch {
  lodash = await import('https://secondary.example.com/lodash');
}

Utilisez la ressource de chargement la plus rapide

const resource = await Promise.any([
  fetch('http://example.com/first.txt')
    .then(response => response.text()),
  fetch('http://example.com/second.txt')
    .then(response => response.text()),
]);

.à()

Objet accessible.prototype.hasOwnProperty

Autrement dit, Object.hasOwn(obj, propKey), qui peut vérifier en toute sécurité sa propre propriété et prend en charge tous les types d'objets.

const proto = {
  protoProp: 'protoProp',
};

const obj = {
  __proto__: proto,
  objProp: 'objProp',
};

console.log('protoProp' in obj);
// 预期输出值: true
console.log(Object.hasOwn(obj, 'protoProp'));
// 预期输出值: false
console.log(Object.hasOwn(proto, 'protoProp'));
// 预期输出值: true

Cause de l'erreur

Error et ses sous-classes peuvent spécifier la cause de l'erreur. Utile dans les fonctions profondément imbriquées pour enchaîner les erreurs afin de trouver rapidement les erreurs.

function doWork() {
  try {
    doSomeWork();
  } catch (err) {
    throw new Error('Some work failed', { cause: err });
  }
  try {
    doMoreWork();
  } catch (err) {
    throw new Error('More work failed', { cause: err });
  }
}

try {
  doWork();
} catch (err) {
  switch(err.message) {
    case 'Some work failed':
      handleSomeWorkFailure(err.cause);
      break;
    case 'More work failed':
      handleMoreWorkFailure(err.cause);
      break;
  }
}

{{o.name}}

{{m.name}}