10 Ciri-ciri JavaScript Baru dalam ES2020 Yang Perlu Anda Ketahui

Berita baik - ciri ES2020 baru kini dimuktamadkan! Ini bermakna kita sekarang mempunyai idea lengkap mengenai perubahan yang berlaku di ES2020, spesifikasi JavaScript yang baru dan lebih baik. Oleh itu, mari kita lihat apakah perubahan tersebut.

# 1: BigInt

BigInt, salah satu ciri yang paling dinanti-nantikan dalam JavaScript, akhirnya ada di sini. Ini sebenarnya membolehkan pembangun mempunyai perwakilan bilangan bulat yang jauh lebih besar dalam kod JS mereka untuk pemprosesan data untuk pengendalian data.

Pada masa ini jumlah maksimum yang dapat anda simpan sebagai bilangan bulat dalam JavaScript adalah pow(2, 53) - 1. Tetapi BigInt sebenarnya membolehkan anda melangkah lebih jauh dari itu.  

Walau bagaimanapun, anda mesti mempunyai nlampiran di hujung nombor, seperti yang anda lihat di atas. Ini nmenunjukkan bahawa ini adalah BigInt dan harus diperlakukan secara berbeza oleh mesin JavaScript (oleh mesin v8 atau mesin apa pun yang digunakannya).

Peningkatan ini tidak serasi dengan belakang kerana sistem nombor tradisional adalah IEEE754 (yang tidak dapat menyokong bilangan ukuran ini).

# 2: Import dinamik

Import dinamik dalam JavaScript memberi anda pilihan untuk mengimport fail JS secara dinamis sebagai modul dalam aplikasi anda secara asli. Ini seperti bagaimana anda melakukannya dengan Webpack dan Babel pada masa ini.

Ciri ini akan membantu anda menghantar kod atas permintaan-permintaan, yang lebih dikenali sebagai pemisahan kod, tanpa overhead pakej web atau pengikat modul lain. Anda juga boleh memuatkan kod secara bersyarat dalam blok if-else jika anda mahu.

Perkara yang baik ialah anda benar-benar mengimport modul, dan oleh itu tidak pernah mencemarkan ruang nama global.

# 3: Gabungan Nullish

Penggabungan Nullish menambah keupayaan untuk benar-benar memeriksa nullishnilai dan bukannya falseynilai. Apa perbezaan antara nullishdan falseynilai, anda mungkin bertanya?

Dalam JavaScript, banyak nilai adalah falsey, seperti rentetan kosong, bilangan 0, undefined, null, false, NaN, dan sebagainya.

Walau bagaimanapun, berkali-kali anda mungkin ingin memeriksa sama ada pemboleh ubah nolish - iaitu jika ia sama ada undefinedatau null, seperti ketika pemboleh ubah mempunyai rentetan kosong, atau bahkan nilai yang salah.

Sekiranya demikian, anda akan menggunakan pengendali penggabungan baru ??

Anda dapat melihat dengan jelas bagaimana operator OR selalu mengembalikan nilai yang benar, sedangkan pengendali nullish mengembalikan nilai yang tidak kosong.

# 4: Rantai Pilihan

Sintaks rantai pilihan membolehkan anda mengakses sifat objek yang sangat bersarang tanpa bimbang sama ada harta itu wujud atau tidak. Sekiranya ia wujud, hebat! Sekiranya tidak, undefinedakan dikembalikan.

Ini bukan sahaja berfungsi pada sifat objek, tetapi juga pada fungsi panggilan dan tatasusunan. Sangat selesa! Inilah contohnya:

# 5: Janji. Semua Ditetapkan

The Promise.allSettledCara menerima pelbagai Janji dan hanya mengambil ketetapan apabila semua daripada mereka diselesaikan - sama ada telah diselesaikan atau ditolak.

Ini tidak tersedia secara asli sebelum ini, walaupun beberapa pelaksanaan yang dekat suka racedan alltersedia. Ini membawa "Jalankan semua janji - saya tidak peduli dengan hasilnya" secara semula jadi ke JavaScript.

# 6: Rentetan # perlawananSemua

matchAlladalah kaedah baru yang ditambahkan pada Stringprototaip yang berkaitan dengan Ekspresi Biasa. Ini mengembalikan iterator yang mengembalikan semua kumpulan yang dipadankan satu demi satu. Mari lihat contoh ringkas:

# 7: globalIni

Sekiranya anda menulis beberapa kod JS merentas platform yang boleh dijalankan di Node, di persekitaran penyemak imbas, dan juga di dalam pekerja web, anda akan sukar mendapatkan objek global.

Ini kerana windowuntuk penyemak imbas, globaluntuk Node, dan selfuntuk pekerja web. Sekiranya terdapat lebih banyak masa berjalan, objek global juga akan berbeza bagi mereka.

Oleh itu, anda mesti mempunyai pelaksanaan anda sendiri untuk mengesan masa berjalan dan kemudian menggunakan global yang betul - iaitu, hingga sekarang.

ES2020 membawa kami globalThisyang selalu merujuk kepada objek global, di mana sahaja anda melaksanakan kod anda:

# 8: Eksport Ruang Nama Modul

Dalam modul JavaScript, sudah mungkin menggunakan sintaks berikut:

import * as utils from './utils.mjs'

Walau bagaimanapun, tidak ada exportsintaksis simetri , sehingga sekarang:

export * as utils from './utils.mjs'

Ini bersamaan dengan yang berikut:

import * as utils from './utils.mjs' export { utils }

# 9: Urutan pesanan yang ditentukan dengan baik

Spesifikasi ECMA tidak menyatakan urutan mana yang for (x in y)  harus dijalankan. Walaupun penyemak imbas melaksanakan pesanan yang konsisten sendiri sebelum ini, ini telah diseragamkan secara rasmi pada ES2020.

# 10: import.meta

The import.metaobjek telah dicipta oleh pelaksanaan ECMAScript, dengan nullprototaip.

Pertimbangkan modul, module.js:

Anda boleh mengakses maklumat meta mengenai modul menggunakan import.metaobjek:

console.log(import.meta); // { url: "file:///home/user/module.js" }

Ia mengembalikan objek dengan urlsifat yang menunjukkan URL asas modul. Ini akan menjadi URL dari mana skrip diperoleh (untuk skrip luaran), atau URL asas dokumen dari dokumen yang mengandung (untuk skrip sebaris).

Kesimpulannya

Saya suka ketekalan dan kepantasan dengan mana komuniti JavaScript telah berkembang dan berkembang. Sungguh luar biasa dan sungguh indah untuk melihat bagaimana JavaScript berasal dari bahasa yang digemari, 10 tahun berlalu, menjadi bahasa terkuat, paling fleksibel dan serba boleh sepanjang masa sekarang.

Adakah anda ingin belajar JavaScript dan bahasa pengaturcaraan lain dengan cara yang sama sekali baru? Pergi ke platform baru untuk pembangun yang sedang saya usahakan untuk mencubanya hari ini!

Apa ciri kegemaran anda ES2020? Beritahu saya mengenainya dengan tweet dan berhubung dengan saya di Twitter dan Instagram!

Ini adalah catatan blog yang disusun dari video saya yang mempunyai topik yang sama. Ini bermaksud dunia bagi saya jika anda dapat menunjukkannya cinta!