Unverzichtbare JavaScript-ES-Funktionen für die moderne Entwicklung

JavaScript entwickelt sich weiter und mit der Einführung von ES13 (ECMAScript 2022) gibt es mehrere neue Funktionen, die Entwickler kennen sollten, um effizienteren und moderneren Code zu schreiben. In diesem Artikel gehen wir auf die zehn wirkungsvollsten Funktionen in ES13 ein, die Ihren Entwicklungsworkflow verbessern können.

1. Top-Level erwartet

Vor ES13:

Zuvor konnten Sie „await“ nur innerhalb asynchroner Funktionen verwenden. Das bedeutete, dass Sie, wenn Sie „await“ verwenden mussten, Ihren Code in eine asynchrone Funktion einbinden mussten, auch wenn der Rest Ihres Moduls dies nicht erforderte.

Beispiel:

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

ES13-Funktion:

Mit ES13 können Sie „await“ jetzt auf der obersten Ebene Ihres Moduls verwenden, sodass keine zusätzliche asynchrone Wrapper-Funktion erforderlich ist.

// With top-level await (ES13)
const data = await fetch('/api/data');
console.log(await data.json());

2. Methoden und Zugriffsmethoden für private Instanzen

Vor ES13:

Vor ES13 hatten JavaScript-Klassen keine echten privaten Felder oder Methoden. Entwickler verwendeten oft Namenskonventionen wie Unterstriche oder Verschlüsse, um den Datenschutz zu simulieren, aber diese Methoden waren nicht wirklich privat.

Beispiel:

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

ES13 führt echte private Instanzmethoden und Accessoren mit dem #-Präfix ein und stellt so sicher, dass außerhalb der Klasse nicht auf sie zugegriffen werden kann.

// 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. Statische Klassenfelder und Methoden

Vor ES13:

Vor ES13 wurden statische Felder und Methoden normalerweise außerhalb des Klassenkörpers definiert, was zu weniger zusammenhängendem Code führte.

Beispiel:

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

ES13 ermöglicht es Ihnen, statische Felder und Methoden direkt im Klassenkörper zu definieren und so die Lesbarkeit und Organisation zu verbessern.

// 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. Logische Zuweisungsoperatoren

Vor ES13:

Logische Operatoren (&&, ||, ??) und Zuweisungen wurden oft manuell in ausführlichen Anweisungen kombiniert, was zu komplexerem Code führte.

Beispiel:

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

ES13 führt logische Zuweisungsoperatoren ein, die logische Operationen mit Zuweisungen in einer prägnanten Syntax kombinieren.

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

Vor ES13:

Schwache Referenzen und Finalizer wurden in JavaScript nicht nativ unterstützt, was die Verwaltung von Ressourcen in bestimmten Fällen erschwerte, insbesondere bei umfangreichen Anwendungen, die teure Objekte verarbeiten.

Beispiel:

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

ES13-Funktion:

ES13 führt WeakRef und FinalizationRegistry ein und bietet native Unterstützung für schwache Referenzen und Bereinigungsaufgaben nach der 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. Ergonomische Markenprüfungen für Privatbereiche

Vor ES13:

Die Überprüfung, ob ein Objekt über ein privates Feld verfügt, war nicht einfach, da private Felder nicht nativ unterstützt wurden. Entwickler mussten sich auf Umgehungsmethoden verlassen, wie z. B. die Suche nach öffentlichen Eigenschaften oder die Verwendung von Instanzprüfungen.

Beispiel:

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

ES13-Funktion:

Mit ES13 können Sie jetzt mithilfe der #-Syntax direkt prüfen, ob ein Objekt ein privates Feld hat, was es einfacher und zuverlässiger macht.

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

Vor ES13:

Der Zugriff auf Elemente aus Arrays erforderte die Klammernotation mit einem Index, und bei negativen Indizes musste die Position manuell berechnet werden.

Beispiel:

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

ES13-Funktion:

Mit der at()-Methode können Sie intuitiver auf Array-Elemente zugreifen, indem Sie sowohl positive als auch negative Indizes verwenden.

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

Vor ES13:

Um zu überprüfen, ob ein Objekt eine eigene Eigenschaft hatte (nicht geerbt), verwendeten Entwickler normalerweise Object.prototype.hasOwnProperty.call() oder obj.hasOwnProperty().

Beispiel:

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

ES13-Funktion:

Die neue Methode Object.hasOwn() vereinfacht diese Prüfung und bietet eine präzisere und lesbarere Syntax.

// Checking own properties with `Object.hasOwn()` (ES13)
const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // true

9. Object.fromEntries()

Vor ES13:

Die Umwandlung von Schlüssel-Wert-Paaren (z. B. aus einer Karte oder Arrays) in ein Objekt erforderte Schleifen und manuelle Konstruktion.

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.

Das obige ist der detaillierte Inhalt vonUnverzichtbare JavaScript-ES-Funktionen für die moderne Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!