Fitur JavaScript modern yang mungkin tidak Anda sadari

Terlepas dari kenyataan bahwa dalam tujuh tahun terakhir saya menulis dalam JavaScript hampir setiap hari kerja, saya harus mengakui bahwa saya kurang memperhatikan berita tentang inovasi dari ES. Fitur utama seperti async / wait dan proxy adalah satu hal, tetapi setiap tahun ada aliran perubahan bertahap kecil yang tidak jatuh ke bidang visi saya, karena selalu ada sesuatu yang lebih penting untuk dipelajari.

Dalam artikel ini, saya telah mengumpulkan kemampuan JS modern, yang tidak banyak dibicarakan ketika muncul. Beberapa dari mereka hanya meningkatkan kegunaan, dan beberapa sangat praktis dan dapat menyelamatkan Anda menulis banyak kode.

ES2015

Huruf biner dan oktal

JavaScript tidak sering harus menggunakan manipulasi biner. Tetapi kadang-kadang tugas muncul yang tidak bisa diselesaikan. Misalnya, ketika Anda menulis kode kinerja tinggi untuk perangkat yang lemah, Anda mendorong bit ke penyimpanan lokal, melakukan manipulasi piksel RGB di browser, atau bekerja dengan format data biner yang padat.

Semua ini mungkin membutuhkan banyak pekerjaan untuk menyembunyikan / menggabungkan angka-angka biner; Bagi saya selalu tampak bahwa mereka sia-sia tersembunyi di tempat desimal. Untuk kasus seperti itu, format literal biner telah ditambahkan ke ES6: 0b .

 const binaryZero = 0b0; const binaryOne = 0b1; const binary255 = 0b11111111; const binaryLong = 0b111101011101101; 

Ini sangat menyederhanakan bekerja dengan bendera biner:

 // Pizza toppings const olives = 0b0001; const ham = 0b0010; const pineapple = 0b0100; const artechoke = 0b1000; const pizza_ham_pineapple = pineapple | ham; const pizza_four_seasons = olives | ham | artechoke; 

Hal yang sama dengan angka oktal. Di dunia JS, ini adalah peluang khusus, tetapi mereka sering digunakan untuk jaringan dan beberapa format file. Anda dapat menulis angka oktal menggunakan sintaks 0o .

Number.isNaN ()

Jangan bingung dengan window.isNaN() , ini adalah metode baru dengan perilaku yang jauh lebih intuitif.

isNaN klasik memiliki beberapa trik menarik:

 isNaN(NaN) === true isNaN(null) === false isNaN(undefined) === true isNaN({}) === true isNaN('0/0') === true isNaN('hello') === true 

Apa yang ini berikan pada kita? Pertama-tama, tidak satu pun dari parameter ini yang sebenarnya adalah NaN . Seperti biasa, masalahnya adalah dengan semua properti JavaScript "favorit": ketik casting. Argumen untuk window.isNaN dilemparkan ke angka menggunakan fungsi Number .

Metode Number.isNaN() statis baru menyelesaikan masalah ini. Dia sekali dan untuk semua mengembalikan kesetaraan argumen yang diberikan kepadanya dan NaN . Ini sangat jelas:

 Number.isNaN(NaN) === true Number.isNaN(null) === false Number.isNaN(undefined) === false Number.isNaN({}) === false Number.isNaN('0/0') === false Number.isNaN('hello') === false 

Tanda tangan: Number.isNaN : (value: any) => boolean

ES2016

Operator eksponensial

Ini terjadi dari waktu ke waktu, jadi ada baiknya untuk memiliki sintaksis literal untuk eksponensial:

 2**2 === 4 3**2 === 9 3**3 === 27 

Aneh, tapi saya yakin ini sudah ada di JavaScript. Mungkin bingung dengan Python.

Array.prototype.includes ()

Sulit untuk dilewatkan, tetapi jika Anda menulis array.indexOf(x) !== -1 dalam tiga tahun terakhir, maka bersukacitalah pada metode includes baru:

 [1, 2, 3].includes(2) === true [1, 2, 3].includes(true) === false 

includes menggunakan algoritma Same Value Zero , yang hampir identik dengan pemeriksaan kesetaraan yang ketat ( === ), kecuali bahwa ia dapat menangani nilai-nilai NaN . Algoritma ini juga membandingkan objek dengan tautan dan bukan konten:

 const object1 = {}; const object2 = {}; const array = [object1, 78, NaN]; array.includes(object1) === true array.includes(object2) === false array.includes(NaN) === true 

includes dapat mengambil parameter kedua, fromIndex , yang memungkinkan Anda untuk memberikan nilai shift:

 // positions 0 1 2 3 4 const array = [1, 1, 1, 2, 2]; array.includes(1, 2) === true array.includes(1, 3) === false 

Berguna

Tanda tangan: Array.prototype.includes : (match: any, offset?: Int) => boolean

ES2017

Memori bersama dan operasi atom

Ini adalah beberapa fitur hebat yang sangat berharga jika Anda perlu melakukan banyak pekerjaan dengan pekerja web. Anda dapat langsung berbagi memori dengan berbagai proses dan mengatur kunci untuk menghindari kondisi balapan.

Ini adalah dua fitur hebat dengan API yang cukup rumit, jadi saya tidak akan menjelaskannya di sini. Untuk detailnya, kirim Anda ke artikel ini: https://www.sitepen.com/blog/the-return-of-sharedarraybuffers-and-atomics/ . Belum semua browser mendukung fitur-fitur ini, tetapi saya berharap situasinya akan membaik dalam beberapa tahun mendatang.

ES2018

Tambang emas ekspresi reguler

ES2018 memiliki sejumlah fitur ekspresi reguler baru:

Terlihat cocok (cocok dengan karakter sebelumnya)

Di runtime yang mendukung ini, Anda sekarang dapat menulis ekspresi reguler yang mencari karakter sebelum Anda cocok. Misalnya, untuk menemukan semua angka yang diawali dengan tanda dolar:

 const regex = /(?<=\$)\d+/; const text = 'This cost $400'; text.match(regex) === ['400'] 

Ini semua tentang kelompok tampilan baru di belakang, kelompok tampilan kembar di depan:

 Look ahead: (?=abc) Look behind: (?<=abc) Look ahead negative: (?!abc) Look behind negative: (?<!abc) 

Sayangnya, hari ini Anda tidak dapat menerjemahkan tampilan baru di balik sintaksis untuk browser lama, jadi sangat mungkin Anda hanya dapat menggunakannya di Node untuk sementara waktu.

Grup Tangkap Bernama

Ekspresi reguler sekarang dapat memilih subsamples dan digunakan untuk penguraian sederhana. Sampai baru-baru ini, kami dapat merujuk pada fragmen-fragmen tersebut hanya dengan angka, misalnya:

 const getNameParts = /(\w+)\s+(\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); subMatches[1] === 'Weyland' subMatches[2] === 'Smithers' 

Dan sekarang ada sintaks untuk memberi nama subsamples ini (atau kelompok rekaman): di dalam tanda kurung di awal kita masukkan ?<titl> , jika kita ingin memberi nama pada grup:

 const getNameParts = /(?<first>\w+)\s(?<last>\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); const {first, last} = subMatches.groups first === 'Weyland' last === 'Smithers' 

Sayangnya, ini hanya berfungsi di Chrome dan Node sekarang.

Sekarang titik dapat menandai garis baru

Hanya perlu membubuhkan tanda /s , misalnya, /someRegex./s , /anotherRegex./sg .

ES2019

Array.prototype.flat () dan flatMap ()

Saya sangat senang melihat ini di MDN.

Sederhananya, flat() mengubah array multidimensi menjadi array satu dimensi pada kedalaman maksimum yang diberikan:

 const multiDimensional = [ [1, 2, 3], [4, 5, 6], [7,[8,9]] ]; multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9] 

flatMap adalah map diikuti oleh flat dengan kedalaman 1. Ini berguna jika Anda perlu memetakan fungsi yang mengembalikan array, tetapi Anda tidak perlu hasilnya menjadi struktur data bersarang:

 const texts = ["Hello,", "today I", "will", "use FlatMap"]; // with a plain map const mapped = texts.map(text => text.split(' ')); mapped === ['Hello', ['today', 'I'], 'will', ['use', 'FlatMap']]; // with flatmap const flatMapped = texts.flatMap(text => text.split(' ')); flatMapped === ['Hello', 'today', 'I', 'will', 'use', 'FlatMap']; 

Tangkapan Tanpa Batas

Sekarang Anda dapat menulis ekspresi coba / tangkap tanpa merujuk pada kesalahan melempar:

 try { // something throws } catch { // don't have to do catch(e) } 

Ngomong-ngomong, kait di mana Anda tidak memperhitungkan nilai e kadang-kadang disebut sebagai penanganan pengecualian Pokemon . Karena kamu harus menangkap mereka semua!

Metode pemangkasan nilai string

Sedikit, tapi bagus:

 const padded = ' Hello world '; padded.trimStart() === 'Hello world '; padded.trimEnd() === ' Hello world';