3 contoh praktis menggunakan perusakan dalam JavaScript

Menulis Pembersih Kode Menggunakan Pola Destrukturisasi

Anda mungkin sudah terbiasa dengan restrukturisasi dalam JavaScript. Itu datang kepada kami pada tahun 2015 dalam spesifikasi ES6 , tetapi jika Anda perlu menyegarkan kembali pengetahuan Anda, maka di situs web Mozilla Anda dapat membaca artikel terperinci yang besar tentang cara kerjanya .

Tetapi mengetahui cara kerjanya sama sekali tidak sama dengan mengetahui bagaimana menggunakannya. Berikut adalah tiga pola untuk membantu Anda membuat kode Anda lebih bersih, lebih dapat diandalkan, dan lebih mudah dibaca!

1. Dinamai argumen fungsi

Argumen yang dinamai adalah cara alternatif untuk menangani parameter fungsi ke argumen posisional. Alih-alih menentukan argumen dalam urutan yang jelas, berikan saja namanya. Dalam Python, misalnya, terlihat seperti ini:

def sum(a=1,b=2,c=3): return a+b+c sum(b=5,a=10) 

Lihat? Urutan tidak penting jika Anda secara eksplisit menentukan nama parameter. Keuntungan dari argumen posisi adalah:

1. Anda dapat menghilangkan satu atau lebih parameter saat memanggil suatu fungsi
2. Urutan dalam menyampaikan argumen sekarang tidak penting
3. Kode menjadi lebih mudah dibaca

Meskipun argumen yang bernama asli tidak didukung dalam JavaScript, kami dapat menggunakan pola perusakan untuk mencapai ketiga keuntungan di atas. Ini akan menjadi contoh terakhir dalam JavaScript:

 function sum({a = 1, b = 2, c = 3}) { return a + b + c } sum({b: 10, a: 5}) // 5 + 10 + 3 = 18 

Semua tujuan telah tercapai: Anda dapat menghilangkan c , urutannya sekarang tidak penting, dan argumen diikuti oleh nama mereka sendiri. Semua ini dimungkinkan justru karena perusakan.

2. Penguraian respons server bersih

Seringkali, dalam respons server, kami hanya tertarik pada blok data atau bahkan hanya satu nilai spesifik dari blok ini. Jika ini adalah kasus Anda, gunakan destrukturisasi untuk mengabaikan segala hal lain yang biasanya dikirimkan server. Contoh:

 function mockServerCall () { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ 'status': 200, 'content-type': 'application/json', 'data' : { dataOfInterest: 42 } }) }, 250) }) } mockServerCall() .then(({data: { dataOfInterest = 100 }}) => { console.log(dataOfInterest) // 42 (    100) }) 

Pola ini memungkinkan Anda untuk mengeluarkan data yang menarik bagi kami saat argumen diuraikan. Dan Anda mendapatkan kesempatan untuk menyesuaikan nilai default sebagai bonus. Yang dengan lancar membawa kita ke pola selanjutnya ...

Menetapkan nilai default selama penugasan

Jika variabel tidak ada di namespace, kita sering perlu mengaturnya ke nilai default.

Sebelum perusakan datang, Anda dapat melakukan sesuatu seperti ini:

 //      var nightMode = userSettings.nightMode || false 

Tetapi pendekatan ini akan membutuhkan satu baris kode untuk setiap tugas. Destrukturisasi akan memungkinkan Anda melakukan semuanya dalam satu gerakan:

 const userSettings = {nightMode: true, fontSize: 'large'} const { nightMode = false, language = 'en', fontSize = 'normal' } = userSettings console.log(nightMode) // true console.log(language) // 'en' console.log(fontSize) // 'large' 

Pola ini dapat digunakan untuk mengatur status React! Components.

Saya harap pola ini berguna! Untuk membaca lebih lanjut tentang penghancuran, ikuti tautan di bawah ini (informasi dalam bahasa Inggris - kira-kira Diterjemahkan).

ES6 Dalam Kedalaman: Destrukturisasi

Pelajari dasar-dasar penghancuran alat peraga di Bereaksi