Ciri JavaScript Moden: Apa yang Baharu dalam ES3

JavaScript sentiasa berkembang dan setiap tahun membawakan set ciri baharu yang direka untuk memudahkan kehidupan pembangun. ES2023, kemas kini terkini, padat dengan alatan baharu yang meningkatkan cara kami menulis, membaca dan mengekalkan kod. Mari selami beberapa ciri menonjol yang anda mahu mula gunakan dalam projek anda.

1. Array findLast dan findLastIndex

Pernahkah anda perlu mencari item dalam tatasusunan bermula dari akhir? ES2023 memperkenalkan findLast dan findLastIndex, yang melakukan perkara itu.

• findLast: Kaedah ini mencari elemen terakhir dalam tatasusunan yang memenuhi syarat yang ditentukan.

  const numbers = [1, 2, 3, 4, 5];
  const lastEven = numbers.findLast(num => num % 2 === 0); // 4

  // Find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findLast(user => user.age === 18);

• findLastIndex: Kaedah ini mengembalikan indeks elemen terakhir itu.

  const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); // 3

Kaedah ini bagus untuk situasi di mana anda perlu membalikkan logik carian anda, menjadikan kod anda lebih jelas dan berkemungkinan lebih cekap.

2. Hashbangs (#!) dalam Fail JavaScript

Jika anda menulis alatan baris perintah dalam JavaScript, anda akan menghargai sokongan baharu untuk hashbangs. Dengan menambah #! di bahagian atas fail anda, anda boleh menentukan penterjemah secara langsung, menjadikan skrip anda boleh laku tanpa memerlukan arahan luaran.

#!/usr/bin/env node

console.log("Hello, world!");

Ini adalah ciri kecil tetapi berguna, terutamanya bagi mereka yang membina alatan CLI dalam Node.js.

3. Simbol sebagai Kekunci Peta Lemah

Sebelum ini, hanya objek boleh digunakan sebagai kunci dalam WeakMap, tetapi ES2023 mengubahnya dengan membenarkan simbol juga.

const wm = new WeakMap();
const sym = Symbol('key');
wm.set(sym, 'value');

console.log(wm.get(sym)); // 'value'

// Storing hidden game data that players can't easily access, such as secret unlock codes:
const secretCode = Symbol('vc-cheat-code');
const gameData = new WeakMap();
gameData.set(secretCode, 'PANZER-ASPIRINE-BIGBANG-PRECIOUSPROTECTION'); 

Peningkatan ini menjadikan WeakMap lebih serba boleh, terutamanya apabila anda memerlukan kekunci unik dan bebas perlanggaran yang disediakan oleh simbol.

4. Pengumpulan Tatasusunan mengikut Kaedah

Mengumpulkan elemen tatasusunan telah menjadi lebih mudah dengan kaedah kumpulan baharu.

• kumpulan: Kaedah ini menyusun tatasusunan anda menjadi objek, dengan kunci ditentukan oleh fungsi yang anda sediakan dan nilai sebagai tatasusunan elemen yang sepadan dengan setiap kunci.

  const animals = [
    { type: 'mammal', name: 'dog' },
    { type: 'bird', name: 'sparrow' },
    { type: 'mammal', name: 'cat' },
  ];

  const grouped = animals.group(({ type }) => type);
  console.log(grouped);
  // {
  //   mammal: [{ type: 'mammal', name: 'dog' }, { type: 'mammal', name: 'cat' }],
  //   bird: [{ type: 'bird', name: 'sparrow' }]
  // }

Ciri ini sesuai untuk senario di mana anda perlu mengkategorikan data dengan cepat dan cekap.

5. Array.prototype.toSorted dan Array.prototype.toReversed()

Isih tatasusunan menjadi lebih bersih dengan toSorted. Tidak seperti isihan, yang mengubah tatasusunan asal, toSorted mengembalikan tatasusunan baru yang diisih dan toReversed mengembalikan tatasusunan terbalik baharu, meninggalkan tatasusunan asal tidak disentuh.

const arr = [3, 1, 4, 1, 5];
const sortedArr = arr.toSorted();
console.log(sortedArr); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]

let data = [/* important data that shouldn't be modified */];
let reversedData = data.toReversed(); // Safely reverse

Kaedah ini sangat sesuai apabila anda perlu mengekalkan tatasusunan asal semasa bekerja dengan versi yang diisih.

6. Array.prototype.with

Kaedah with menyediakan cara mudah untuk mencipta tatasusunan baharu dengan menggantikan elemen pada indeks tertentu.

const numbers = [10, 20, 30, 40];
const newNumbers = numbers.with(2, 25); // [10, 20, 25, 40]

Kaedah ini sesuai apabila anda ingin mengemas kini tatasusunan secara tidak berubah, menjadikannya lebih mudah untuk mengurus keadaan dalam corak pengaturcaraan berfungsi.

7. Promise.withResolvers

Mengurus janji tidak pernah semudah ini, terima kasih kepada Promise.withResolvers. Kaedah baharu ini membolehkan anda membuat janji bersama-sama dengan fungsi penyelesaian dan penolakannya sekali gus.

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve("done"), 1000);

promise.then(console.log); // "done"

Ini adalah cara yang kemas dan ringkas untuk mengendalikan operasi tak segerak, terutamanya apabila anda perlu mengawal hasil janji dari luar pembinanya.

Sokongan Pelayar untuk ES2023

ES2023, versi terkini JavaScript, agak baharu memandangkan ia baru sahaja selesai pada tahun 2023. Ini bermakna tidak semua penyemak imbas web boleh menggunakan ciri baharunya lagi, tetapi mereka mula:

• Firefox, Chrome dan Edge menyokong beberapa ciri Array.prototype.findLast() dan Array.prototype.findLastIndex()
• Safari belum menyokong mana-mana ciri ini lagi.

• Node.js

  • Node.js versi 19.0 dan ke atas boleh menggunakan:
    • Array.prototype.findLast()
    • Array.prototype.findLastIndex() Ia dijangka menambah lebih banyak ciri ES2023 dalam kemas kini masa hadapan.

Transpiler:
Untuk menggunakan ciri ES2023 baharu sekarang, pembangun boleh menukar kod ES2023 kepada versi yang lebih lama yang difahami oleh lebih ramai penyemak imbas, menggunakan alat yang dipanggil transpiler, seperti Babel. Dengan cara ini, anda boleh mula menggunakan bahan baharu walaupun penyemak imbas belum bersedia untuknya.

Pada masa ini, sokongan untuk ES2023 masih berkembang. Pelayar besar seperti Firefox dan Chrome mula menyertakan beberapa cirinya. Untuk butiran tentang perkara yang disokong di mana, anda boleh menyemak Bolehkah Saya Gunakan. Menggunakan transpiler membantu menjadikan ciri baharu ini boleh digunakan pada hari ini, sementara kami menunggu penyemak imbas untuk mengejar pada tahun-tahun akan datang.

Kesimpulan

ES2023 membawakan pelbagai ciri baharu yang menjadikan JavaScript lebih berkuasa dan lebih mudah untuk digunakan. Daripada kaedah tatasusunan yang dipertingkatkan kepada pengendalian janji yang lebih baik, kemas kini ini adalah mengenai menjadikan kod anda lebih bersih dan lebih cekap. Apabila JavaScript terus berkembang dan berkembang, mengikuti perkembangan terkini dengan perubahan ini memastikan anda sentiasa mendapat manfaat sepenuhnya daripada bahasa tersebut.

Rujukan:

1. Cadangan TC39
2. Draf ECMA-262
3. MDN

Atas ialah kandungan terperinci Ciri JavaScript Moden: Apa yang Baharu dalam ES3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!