Ciri JavaScript Baharu Setiap Pembangun Perlu Tahu

JavaScript sentiasa berkembang, dan dengan setiap versi baharu, ia memperkenalkan ciri yang menjadikan kehidupan kita sebagai pembangun lebih mudah. Beberapa ciri ini adalah penukar permainan, memperbaik cara kami menulis dan mengurus kod kami. Jika anda seorang pengekod harian, adalah penting untuk kekal dikemas kini dengan ciri baharu ini. Dalam siaran ini, saya akan membimbing anda melalui beberapa ciri JavaScript terkini yang sangat berguna dan harus ada dalam kit alat anda.

1. Rantaian Pilihan (?.)

Salah satu ciri paling berguna yang ditambahkan dalam versi JavaScript terkini ialah rantaian pilihan. Ini membolehkan kami mengakses sifat bersarang dalam dalam objek dengan selamat tanpa perlu risau sama ada sifat perantaraan adalah batal atau tidak ditentukan.

Contoh:

Bayangkan anda mempunyai objek pengguna yang mungkin mempunyai profil atau mungkin tidak:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

Tanpa rantaian pilihan, anda perlu menyemak setiap sifat secara manual, yang boleh membuat kod menjadi tidak kemas. Operator kecil ini membantu kami mengelakkan semakan tersebut, menjadikan kod lebih bersih dan lebih mudah dibaca.

2. Operator Penggabungjalinan Nullish (??)

Pengendali penyatuan nullish (??) ialah satu lagi ciri kemas yang diperkenalkan untuk membantu mengendalikan nilai null atau undefined tanpa menjejaskan nilai palsu lain seperti 0 atau false.

Contoh

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

Tidak seperti OR logik (||), yang menganggap rentetan kosong ("") atau 0 sebagai nilai palsu, ?? hanya akan mengembalikan operan kanan jika kiri adalah batal atau tidak ditentukan.

3. Promise.allSettled()

Jika anda menggunakan janji dalam JavaScript, anda mungkin telah menggunakan Promise.all(). Tetapi adakah anda tahu terdapat versi yang lebih berkuasa yang dipanggil Promise.allSettled()? Kaedah ini menunggu semua janji untuk diselesaikan, tidak kira sama ada ia dipenuhi atau ditolak. Ia amat berguna apabila anda perlu mengetahui keputusan semua janji, walaupun ada yang gagal.

Contoh:

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

Ini ialah cara terbaik untuk mengendalikan berbilang operasi async apabila anda tidak mahu satu kegagalan memecahkan keseluruhan proses.

4. BigInt untuk Nombor Besar

Kita semua menghadapi masalah melebihi had jenis Nombor JavaScript. Nombor JavaScript adalah terhad kepada nilai antara -(2^53 - 1) dan (2^53 - 1). Jika anda perlu bekerja dengan nombor yang lebih besar daripada itu, BigInt ialah rakan anda.

Contoh:

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

Ini akan memberi anda keupayaan untuk bekerja dengan integer yang besar secara sewenang-wenangnya tanpa perlu risau tentang ralat ketepatan.

5. String.prototype.replaceAll()

Jika anda pernah cuba menggantikan semua kejadian subrentetan dalam rentetan, anda mungkin menggunakan ungkapan biasa dengan kaedah replace(). Dengan replaceAll(), ia lebih mudah. Kaedah ini menggantikan semua kejadian subrentetan dan anda tidak perlu risau tentang bendera regex global.

Contoh:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

Ia ringkas, lebih bersih dan menghilangkan keperluan untuk ungkapan biasa.

6. Operator Tugasan Logik (&&=, ||=, ??=)

Pengendali baharu ini menyediakan jalan pintas untuk menggabungkan pengendali logik dengan tugasan. Ia merupakan cara yang bagus untuk menulis kod yang lebih ringkas.

• &&=: Berikan nilai hanya jika nilai sebelah kiri adalah benar.
• ||=: Berikan nilai hanya jika nilai sebelah kiri adalah palsu.
• ??=: Berikan nilai hanya jika nilai sebelah kiri adalah batal atau tidak ditentukan.

Contoh:

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

Pintasan ini membantu anda mengurangkan keterlaluan kod anda.

7. Object.fromEntries()

Jika anda pernah perlu menukar senarai pasangan nilai kunci kepada objek, Object.fromEntries() memudahkannya. Ia amat berguna apabila anda bekerja dengan objek Peta atau tatasusunan tupel.

Contoh:

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

Kaedah ini merupakan alternatif yang lebih bersih dan mudah dibaca untuk membina objek secara manual.

8. Array.prototype.flatMap()

Kaedah ini ialah gabungan map() diikuti dengan flat(). Ia membolehkan anda memetakan dan meratakan hasil dalam satu langkah, yang boleh menjadi sangat berguna apabila bekerja dengan tatasusunan tatasusunan.

Contoh:

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

Ini lebih bersih daripada melaksanakan map() diikuti dengan flat() secara berasingan.

9. Array.prototype.at()

Kaedah baharu ini memudahkan untuk mengakses elemen dari hujung tatasusunan menggunakan indeks negatif. Ia jauh lebih intuitif daripada mengira indeks secara manual untuk item terakhir.

Contoh:

let message = 'Hello World, Welcome to the World!';
let updatedMessage = message.replaceAll('World', 'Universe');
console.log(updatedMessage);  // Hello Universe, Welcome to the Universe!

Ia memudahkan kerja dengan item terakhir dalam tatasusunan.

10. Menunggu Tahap Atas

Dalam JavaScript, kami sentiasa perlu menggunakan await dalam fungsi async. Tetapi dengan menunggu peringkat teratas, anda kini boleh menggunakan await secara langsung di peringkat teratas modul, menjadikan kod tak segerak anda lebih mudah.

Contoh:

let count = 0;
count ||= 10;  // count is now 10, because it was falsy
console.log(count);  // 10
let name = null;
name ??= 'Anonymous';  // name is now 'Anonymous'
console.log(name);  // Anonymous

Ini menjadikan kerja dengan kod async lebih mudah dalam JavaScript moden.

11. Medan Kelas Persendirian

Jika anda pernah mahu menjadikan pembolehubah peribadi dalam kelas JavaScript, medan kelas peribadi kini boleh dilakukan. Anda kini boleh menentukan pembolehubah yang tidak boleh diakses dari luar kelas, menggunakan simbol #.

Contoh:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

12. Isih Stabil (Array.prototype.sort())

Sebelum ini, kaedah sort() JavaScript tidak stabil, bermakna item yang sama mungkin dikocok dengan cara yang tidak dapat diramalkan. Kini, JavaScript memastikan bahawa elemen dengan nilai yang sama mengekalkan susunan asalnya dalam tatasusunan.

Contoh:

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

Ini memastikan jenis tingkah laku yang lebih boleh diramal dan konsisten.

Kesimpulan

JavaScript terus berkembang, dan ciri ini memberikan kemudahan dan kuasa kepada pembangun. Sama ada anda menggunakan kod tak segerak, mengendalikan nombor yang besar atau hanya membersihkan objek dan manipulasi tatasusunan anda, ciri baharu ini boleh membantu anda menulis kod yang lebih bersih dan cekap. Jika anda belum berbuat demikian, mula bereksperimen dengan mereka dalam projek anda dan lihat cara mereka boleh menjadikan aliran kerja anda lebih lancar.

Selamat pengekodan! ?

Sila ikuti saya untuk mendapatkan kandungan yang lebih berharga

Atas ialah kandungan terperinci Ciri JavaScript Baharu Setiap Pembangun Perlu Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!