Ciri-ciri ESFeature JavaScript untuk Pembangunan Moden yang Mesti Tahu

JavaScript terus berkembang, dan dengan pengenalan ES13 (ECMAScript 2022), terdapat beberapa ciri baharu yang perlu diketahui oleh pembangun untuk menulis kod yang lebih cekap dan moden. Dalam artikel ini, kami akan menyelami sepuluh ciri paling berkesan dalam ES13 yang boleh meningkatkan aliran kerja pembangunan anda.

1. Tahap Teratas menanti

Sebelum ES13:

Sebelum ini, anda hanya boleh menggunakan await dalam fungsi async. Ini bermakna jika anda perlu menggunakan await, anda perlu membungkus kod anda dalam fungsi async, walaupun selebihnya modul anda tidak memerlukannya.

Contoh:

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

Ciri ES13:

Dengan ES13, anda kini boleh menggunakan await di peringkat teratas modul anda, menghapuskan keperluan untuk fungsi pembungkus async tambahan.

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

2. Kaedah Contoh Peribadi dan Aksesori

Sebelum ES13:

Sebelum ES13, kelas JavaScript tidak mempunyai medan atau kaedah peribadi yang benar. Pembangun sering menggunakan konvensyen penamaan seperti garis bawah atau penutupan untuk mensimulasikan privasi, tetapi kaedah ini tidak benar-benar peribadi.

Contoh:

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

Ciri ES13:

ES13 memperkenalkan kaedah contoh peribadi sebenar dan pengakses menggunakan awalan #, memastikan ia tidak boleh diakses di luar kelas.

// 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. Medan dan Kaedah Kelas Statik

Sebelum ES13:

Sebelum ES13, medan dan kaedah statik biasanya ditakrifkan di luar badan kelas, yang membawa kepada kod yang kurang padat.

Contoh:

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

Ciri ES13:

ES13 membolehkan anda menentukan medan dan kaedah statik secara langsung dalam badan kelas, meningkatkan kebolehbacaan dan organisasi.

// 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. Operator Tugasan Logik

Sebelum ES13:

Operator logik (&&, ||, ??) dan tugasan selalunya digabungkan secara manual dalam pernyataan bertele-tele, yang membawa kepada kod yang lebih kompleks.

Contoh:

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

Ciri ES13:

ES13 memperkenalkan pengendali tugasan logik, yang menggabungkan operasi logik dengan tugasan dalam sintaks yang ringkas.

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

Sebelum ES13:

Rujukan dan pemuktamad yang lemah tidak disokong secara asli dalam JavaScript, menjadikannya sukar untuk mengurus sumber dalam kes tertentu, terutamanya dengan aplikasi berskala besar yang mengendalikan objek mahal.

Contoh:

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

Ciri ES13:

ES13 memperkenalkan WeakRef dan FinalizationRegistry, menyediakan sokongan asli untuk rujukan yang lemah dan tugas pembersihan selepas kutipan sampah.

// 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. Semakan Jenama Ergonomik untuk Medan Persendirian

Sebelum ES13:

Menyemak sama ada objek mempunyai medan peribadi bukanlah mudah, kerana medan peribadi tidak disokong secara asli. Pembangun terpaksa bergantung pada kaedah penyelesaian, seperti menyemak hartanah awam atau menggunakan semakan instanceof.

Contoh:

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

Ciri ES13:

Dengan ES13, anda kini boleh menyemak terus sama ada objek mempunyai medan peribadi menggunakan # sintaks, menjadikannya lebih mudah dan lebih dipercayai.

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

Sebelum ES13:

Mengakses elemen daripada tatasusunan yang terlibat menggunakan notasi kurungan dengan indeks dan untuk indeks negatif, anda perlu mengira kedudukan secara manual.

Contoh:

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

Ciri ES13:

Kaedah at() membolehkan anda mengakses elemen tatasusunan menggunakan kedua-dua indeks positif dan negatif secara lebih intuitif.

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

Sebelum ES13:

Untuk menyemak sama ada objek mempunyai harta sendiri (tidak diwarisi), pembangun biasanya menggunakan Object.prototype.hasOwnProperty.call() atau obj.hasOwnProperty().

Contoh:

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

Ciri ES13:

Kaedah Object.hasOwn() baharu memudahkan semakan ini, memberikan sintaks yang lebih ringkas dan boleh dibaca.

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

9. Object.fromEntries()

Sebelum ES13:

Mengubah pasangan nilai kunci (cth., daripada Peta atau tatasusunan) kepada objek yang memerlukan gelung dan pembinaan manual.

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.

Atas ialah kandungan terperinci Ciri-ciri ESFeature JavaScript untuk Pembangunan Moden yang Mesti Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!