Pengenalan Kembali Untuk Tugas Penghancuran

Jika Anda menulis JavaScript, Anda mungkin akrab dengan ES2015 dan semua standar bahasa baru yang diperkenalkan. Salah satu standar yang telah melihat popularitas luar biasa adalah tugas yang merusak struktur. Kemampuan untuk "menyelam ke dalam" array atau objek dan merujuk sesuatu di dalamnya secara lebih langsung. Biasanya berjalan seperti ini.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

Namun, destructuring assignment adalah sintaks yang sangat kuat sehingga banyak pengembang, bahkan mereka yang telah menggunakannya sejak pertama kali dirilis, melupakan beberapa hal yang dapat dilakukannya. Dalam posting ini, kita akan membahas lima contoh dunia nyata untuk destrukturisasi objek dan array, terkadang keduanya! Dan hanya untuk bersenang-senang, saya akan menyertakan contoh miring yang saya temukan beberapa hari yang lalu.

1. Penghancuran Bersarang

Mampu mengakses kunci tingkat atas di dalam sebuah objek, atau elemen pertama dari sebuah array sangat kuat, tetapi juga agak membatasi. Ini hanya menghilangkan satu tingkat kerumitan dan kita masih berakhir dengan serangkaian titik atau referensi [0] untuk mengakses apa yang sebenarnya kita cari.

Ternyata, perusakan dapat bekerja di luar tingkat atas. Dan mungkin ada alasan yang sah untuk melakukannya. Ambil contoh respons objek ini dari permintaan HTTP. Kami ingin melampaui objek data dan hanya mengakses pengguna. Selama kita tahu kunci yang kita cari, itu tidak masalah.

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

Hal yang sama dapat dilakukan dengan array bersarang. Dalam hal ini, Anda tidak perlu mengetahui kuncinya karena tidak ada. Yang perlu Anda ketahui adalah posisi yang Anda cari. Anda harus memberikan variabel referensi (atau placeholder koma) untuk setiap elemen hingga elemen yang Anda cari (kita akan membahasnya nanti). Variabel dapat diberi nama apa saja karena tidak mencoba untuk mencocokkan nilai di dalam array.

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

Ingatlah bahwa fitur-fitur ini harus digunakan dengan bijaksana, seperti halnya alat apa pun. Kenali kasus penggunaan Anda dan audiens basis kode Anda. Pertimbangkan keterbacaan dan kemudahan perubahan di jalan. Misalnya, jika Anda hanya ingin mengakses subarray, mungkin peta lebih cocok.

2. Penghancuran Objek Dan Array

Objek dan array adalah struktur data yang umum. Begitu umum, pada kenyataannya, yang satu sering muncul di dalam yang lain. Di luar destrukturisasi bersarang, kita dapat mengakses properti bersarang meskipun mereka berada dalam tipe struktur data yang berbeda dari yang eksternal yang kita akses.

Ambil contoh array di dalam objek ini.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

Kasus penggunaan yang berlawanan juga valid. Sebuah array dari objek.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

Ternyata, kami memiliki sedikit masalah dalam contoh ini. Kami hanya dapat mengakses nama pengguna pertama; jika tidak, kami akan mencoba menggunakan 'nama' untuk merujuk dua string berbeda, yang tidak valid. Skenario perusakan kita selanjutnya harus menyelesaikan ini.

3. Alias

Seperti yang kita lihat pada contoh di atas (ketika kita memiliki kunci berulang di dalam objek berbeda yang ingin kita tarik), kita tidak dapat melakukannya dengan cara "biasa". Nama variabel tidak dapat diulang dalam lingkup yang sama (itulah cara paling sederhana untuk menjelaskannya, jelas lebih rumit dari itu).

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

Aliasing hanya berlaku untuk objek. Itu karena array dapat menggunakan nama variabel apa pun yang dipilih pengembang, daripada harus mencocokkan kunci objek yang ada.

4. Nilai Default

Penghancuran sering kali mengasumsikan bahwa nilai yang dirujuk ada di sana, tetapi bagaimana jika tidak? Tidak pernah menyenangkan untuk membuang kode dengan nilai yang tidak ditentukan. Saat itulah nilai default berguna.

Mari kita lihat bagaimana mereka bekerja untuk objek.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

Jika kunci yang direferensikan sudah memiliki nilai, defaultnya diabaikan. Jika kunci tidak ada di objek, maka default digunakan.

Kita bisa melakukan hal serupa untuk array.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

Seperti contoh objek, jika nilainya ada maka defaultnya diabaikan. Melihat contoh di atas, Anda mungkin memperhatikan bahwa kami merusak lebih banyak elemen daripada yang ada dalam array. Bagaimana dengan merusak lebih sedikit elemen?

5. Mengabaikan Nilai

Salah satu bagian terbaik dari destrukturisasi adalah memungkinkan Anda mengakses nilai yang merupakan bagian dari struktur data yang lebih besar. Ini termasuk mengisolasi nilai-nilai itu dan mengabaikan konten lainnya, jika Anda mau.

Kita sebenarnya telah melihat contohnya sebelumnya, tetapi mari kita pisahkan konsep yang sedang kita bicarakan.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

Dalam contoh ini, kami tidak pernah merusak organization dan itu tidak masalah. Itu masih tersedia untuk referensi di dalam objek user , seperti itu.

 user.organization

Untuk array, sebenarnya ada dua cara untuk "mengabaikan" elemen. Dalam contoh objek, kami secara khusus mereferensikan nilai internal dengan menggunakan nama kunci terkait. Ketika array dirusak, nama variabel ditetapkan berdasarkan posisi. Mari kita mulai dengan mengabaikan elemen di akhir array.

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

Kami merusak elemen pertama dan kedua dalam array dan sisanya tidak relevan. Tapi bagaimana dengan elemen selanjutnya? Jika berdasarkan posisi, bukankah kita harus merusak setiap elemen sampai kita mencapai yang kita inginkan?

Ternyata, kita tidak. Sebagai gantinya, kami menggunakan koma untuk menyiratkan keberadaan elemen-elemen itu, tetapi tanpa variabel referensi mereka diabaikan.

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

Dan kita bisa melakukan keduanya sekaligus. Melewati elemen di mana pun kita inginkan dengan menggunakan placeholder koma. Dan lagi, seperti contoh objek, elemen "diabaikan" masih tersedia untuk referensi dalam array roleCounts .

Contoh miring

Kekuatan dan keserbagunaan destructuring juga berarti Anda dapat melakukan beberapa hal yang benar-benar aneh. Apakah mereka akan berguna atau tidak sulit untuk dikatakan, tetapi perlu diketahui bahwa itu adalah pilihan!

Salah satu contohnya adalah Anda dapat menggunakan destructuring untuk membuat salinan yang dangkal.

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

Hal lain yang dapat digunakan destructuring adalah dereferencing.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

Seperti biasa, keterbacaan adalah yang paling penting dan semua contoh ini harus digunakan secara hukum. Tetapi mengetahui semua opsi Anda membantu Anda memilih yang terbaik.

Kesimpulan

JavaScript penuh dengan objek dan array yang kompleks. Baik itu respons dari permintaan HTTP, atau kumpulan data statis, penting untuk dapat mengakses konten yang disematkan secara efisien. Menggunakan tugas destrukturisasi adalah cara yang bagus untuk melakukan itu. Ini tidak hanya menangani beberapa tingkat bersarang, tetapi memungkinkan akses terfokus dan menyediakan default dalam kasus referensi yang tidak ditentukan.

Bahkan jika Anda telah menggunakan perusakan selama bertahun-tahun, ada begitu banyak detail yang tersembunyi di dalam spesifikasi. Saya harap artikel ini berfungsi sebagai pengingat alat yang diberikan bahasa ini kepada Anda. Lain kali Anda menulis kode, mungkin salah satunya akan berguna!