Apa yang Baharu dalam ECMAScript A Menyelam ke dalam ES& A Refresher pada ESFeatures

pengenalan

ECMAScript, standard di sebalik JavaScript, terus berkembang, membawa ciri baharu yang meningkatkan produktiviti pembangun dan memudahkan amalan pengekodan. Pada tahun 2024, ES15 memperkenalkan beberapa tambahan menarik yang dibina berdasarkan warisan ES6 . Artikel ini menyelami kemas kini terbaharu dalam ES15 dan menyediakan penyegaran tentang ciri ES6 utama yang mengubah pembangunan JavaScript.

---

Apa yang Baharu dalam ECMAScript 2024 (ES15)

1. Penghias (Tamat)

   • Apa itu: Penghias ialah sintaks untuk membalut kelas dan ahli kelas untuk memanjangkan tingkah laku mereka.
   • Contoh:

    function log(target, key, descriptor) {
      const original = descriptor.value;
      descriptor.value = function (...args) {
        console.log(`Called ${key} with args: ${args}`);
        return original.apply(this, args);
      };
    }
   
    class Example {
      @log
      doSomething(value) {
        console.log(`Doing something with ${value}`);
      }
    }
   
    const example = new Example();
    example.doSomething('test'); // Logs: Called doSomething with args: test
                                 //       Doing something with test
   

2. Pengumpulan Tatasusunan

   • Apakah itu: Dua kaedah baharu, Array.prototype.group dan Array.prototype.groupToMap, kumpulan elemen tatasusunan mengikut kriteria tertentu.
   • Contoh:

    const items = [
      { type: 'fruit', name: 'apple' },
      { type: 'fruit', name: 'banana' },
      { type: 'vegetable', name: 'carrot' },
    ];
   
    const grouped = items.group(item => item.type);
    console.log(grouped);
    // { fruit: [{ type: 'fruit', name: 'apple' }, { type: 'fruit', name: 'banana' }], 
    //   vegetable: [{ type: 'vegetable', name: 'carrot' }] }
   

3. Perihalan Simbol

   • Apa itu: Simbol kini boleh menyertakan penerangan, menjadikan penyahpepijatan lebih mudah.
   • Contoh:

    const mySymbol = Symbol.for('userToken');
    console.log(mySymbol.description); // "userToken"
   

4. Pengurusan Sumber Eksplisit

   • Apa itu: Memperkenalkan penggunaan dan pelupusan sumber melalui Symbol.lupuskan untuk mengurus sumber dengan berkesan.
   • Contoh:

    class FileHandler {
      constructor(name) {
        this.name = name;
        console.log(`File ${name} opened`);
      }
      [Symbol.dispose]() {
        console.log(`File ${this.name} closed`);
      }
    }
   
    {
      using const file = new FileHandler('example.txt');
      // Perform file operations
    }
    // Logs: File example.txt closed
   

---

Penyegar semula: Ciri Utama daripada ES6 (2015 Seterusnya)

1. Fungsi Anak Panah

   • Sintaks padat untuk fungsi penulisan:

    const add = (a, b) => a + b;
    console.log(add(2, 3)); // 5
   

2. Templat Huruf

   • Membenamkan ungkapan dalam rentetan:

    const name = 'Alice';
    console.log(`Hello, ${name}!`); // Hello, Alice!
   

3. Memusnahkan

   • Ekstrak nilai daripada tatasusunan atau objek:

    const [a, b] = [1, 2];
    const { name, age } = { name: 'Bob', age: 25 };
   

4. Kelas

   • Gula sintaksis ke atas prototaip:

    class Animal {
      constructor(name) {
        this.name = name;
      }
      speak() {
        console.log(`${this.name} makes a noise.`);
      }
    }
   

5. Modul

   • Fungsi import dan eksport:

    export function greet() {
      console.log('Hello!');
    }
    import { greet } from './greet.js';
   

6. Janji

   • Kendalikan operasi tak segerak:

    fetch('https://api.example.com')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(err => console.error(err));
   

7. Async/Tunggu

   • gula sintaksis atas Janji:

    async function fetchData() {
      const response = await fetch('https://api.example.com');
      const data = await response.json();
      console.log(data);
    }
   

8. Parameter Lalai

   • Sediakan nilai lalai untuk parameter fungsi:

    function greet(name = 'Guest') {
      console.log(`Hello, ${name}!`);
    }
   

9. Operator Sebarkan dan Rehat

   • Sebarkan (...) untuk mengembangkan tatasusunan atau objek:

    const arr1 = [1, 2];
    const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
   

• Rehat (...) untuk mengumpul hujah:
  

   function log(target, key, descriptor) {
     const original = descriptor.value;
     descriptor.value = function (...args) {
       console.log(`Called ${key} with args: ${args}`);
       return original.apply(this, args);
     };
   }
  
   class Example {
     @log
     doSomething(value) {
       console.log(`Doing something with ${value}`);
     }
   }
  
   const example = new Example();
   example.doSomething('test'); // Logs: Called doSomething with args: test
                                //       Doing something with test
  

---

Kesimpulan

ECMAScript terus membentuk masa depan JavaScript dengan kemas kini tambahan yang memperhalusi bahasa dan menambah keupayaan baharu yang berkuasa. Sama ada anda memanfaatkan ciri ES15 terbaharu seperti penghias dan pengurusan sumber atau menyemak semula kemas kini transformatif daripada ES6 , kekal terkini memastikan kod JavaScript anda kekal moden dan cekap.

---

Perihalan Meta:

Terokai ciri ECMAScript 2024 terbaharu dan lawati semula kemas kini transformatif ES6 yang terus membentuk pembangunan JavaScript moden.

---

TLDR - Sorotan untuk Skimmers:

• Baharu dalam ES15: penghias, pengumpulan tatasusunan, pengurusan sumber.
• Pembaruan pada ciri ES6: fungsi anak panah, kelas, async/menunggu dan banyak lagi.
• Contoh praktikal tentang cara ciri ini memudahkan pembangunan JavaScript.

---

Apakah ciri ECMAScript kegemaran anda, dan bagaimana ia telah meningkatkan proses pembangunan anda? Kongsi pendapat anda dalam ulasan!

Atas ialah kandungan terperinci Apa yang Baharu dalam ECMAScript A Menyelam ke dalam ES& A Refresher pada ESFeatures. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!