Cara Menggunakan Penyusunan Array dan Objek dalam JavaScript

Tugasan merosakkan adalah ciri menarik yang disertakan bersama ES6. Destructuring adalah ungkapan JavaScript yang memungkinkan untuk membongkar nilai dari tatasusunan, atau sifat dari objek, ke dalam pemboleh ubah yang berbeza. Maksudnya, kita dapat mengekstrak data dari tatasusunan dan objek dan memberikannya kepada pemboleh ubah.

Mengapa ini perlu?

Bayangkan kita mahu mengekstrak data dari pelbagai. Sebelum ini, bagaimana ini dapat dilakukan?

let introduction = ["Hello", "I" , "am", "Sarah"]; let greeting = introduction[0]; let name = introduction[3]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Kita dapat melihat bahawa ketika kita ingin mengekstrak data dari array, kita harus melakukan perkara yang sama berulang kali.

Tugasan penstrukturan ES6 menjadikannya lebih mudah untuk mengekstrak data ini. Bagaimana ini? Pertama, kita akan membincangkan tugasan pemusnahan dengan tatasusunan. Kemudian kita akan beralih ke objek yang merosakkan.

Mari kita mulakan.

Pemusnahan Array Asas

Sekiranya kita ingin mengekstrak data dari tatasusunan, cukup mudah menggunakan tugasan yang merosakkan.

Mari rujuk contoh pertama kami untuk tatasusunan. Daripada melalui proses berulang itu, kami akan melakukan ini:

let introduction = ["Hello", "I" , "am", "Sarah"]; let [greeting, pronoun] = introduction; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Kita juga boleh melakukan ini dengan hasil yang sama.

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I"

Menyatakan Pemboleh ubah sebelum Tugasan

Pemboleh ubah boleh dinyatakan sebelum diberikan seperti ini:

 let greeting, pronoun; [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Perhatikan bahawa pemboleh ubah ditetapkan dari kiri ke kanan. Jadi pemboleh ubah pertama mendapat item pertama dalam array, pemboleh ubah kedua mendapat pemboleh ubah kedua dalam array, dan seterusnya.

Melangkau Item dalam Array

Bagaimana jika kita mahu mendapatkan item pertama dan terakhir pada susunan kita dan bukannya item pertama dan kedua, dan kita hanya mahu menetapkan dua pemboleh ubah? Ini juga boleh dilakukan. Lihat contoh di bawah:

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Apa yang baru berlaku?

Lihat susunan di sebelah kiri tugasan pemboleh ubah. Perhatikan bahawa bukannya hanya mempunyai satu koma, kita mempunyai tiga. Pemisah koma digunakan untuk melangkau nilai dalam array. Oleh itu, jika anda mahu melangkau item dalam array, gunakan koma.

Mari buat yang lain. Mari melangkau item pertama dan ketiga dalam senarai. Bagaimana kita melakukan ini?

let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(pronoun);//"I" console.log(name);//"Sarah" 

Jadi pemisah koma melakukan keajaiban. Oleh itu, jika kita mahu melangkau semua item, kita lakukan ini:

let [,,,,] = ["Hello", "I" , "am", "Sarah"]; 

Menetapkan susunan yang selebihnya

Bagaimana jika kita mahu menetapkan beberapa larik kepada pemboleh ubah dan selebihnya item dalam array kepada pemboleh ubah tertentu? Sekiranya demikian, kami akan melakukan ini:

let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(intro);//["I", "am", "Sarah"] 

Dengan menggunakan corak ini, anda boleh membongkar dan menetapkan bahagian array yang tersisa kepada pemboleh ubah.

Menghancurkan Tugasan dengan Fungsi

Kami juga dapat mengekstrak data dari array yang dikembalikan dari fungsi. Katakan kita mempunyai fungsi yang mengembalikan array seperti contoh di bawah:

function getArray() { return ["Hello", "I" , "am", "Sarah"]; } let [greeting,pronoun] = getArray(); console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Kami mendapat hasil yang sama.

Menggunakan Nilai Lalai

Nilai lalai dapat diberikan kepada pembolehubah sekiranya nilai yang diekstrak dari array adalah undefined:

let [greeting = "hi",name = "Sarah"] = ["hello"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Jadi namejatuh kembali ke "Sarah" kerana tidak ditentukan dalam larik.

Menukar Nilai menggunakan Tugasan Merosakkan

Satu perkara lagi. Kita boleh menggunakan tugasan pemusnahan untuk menukar nilai pemboleh ubah:

let a = 3; let b = 6; [a,b] = [b,a]; console.log(a);//6 console.log(b);//3 

Seterusnya, mari kita beralih ke Objek Pemusnahan.

Pemusnahan Objek

Pertama, mari kita lihat mengapa ada keperluan pemusnahan objek.

Katakanlah kita ingin mengekstrak data dari objek dan memberikan kepada pemboleh ubah baru. Sebelum ES6, bagaimana ini dapat dilakukan?

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name = person.name; let country = person.country; let job = person.job; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Lihat betapa membosankan untuk mengekstrak semua data. Kita mesti berulang kali melakukan perkara yang sama. Pemusnahan ES6 benar-benar menjimatkan hari. Mari melompat ke dalamnya.

Pemusnahan Objek Asas

Mari ulangi contoh di atas dengan ES6. Daripada memberikan nilai satu demi satu, kita dapat menggunakan objek di sebelah kiri untuk mengekstrak data:

 let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, country, job} = person; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Anda akan mendapat hasil yang sama. Juga berlaku untuk menetapkan variabel ke objek yang belum dinyatakan:

let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Pemboleh ubah dinyatakan sebelum ditugaskan

Pemboleh ubah dalam objek dapat dinyatakan sebelum diberikan dengan pemusnahan. Mari cuba:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name, country, job; {name, country, job} = person; console.log(name);// Error : "Unexpected tokenSarah", country: "Nigeria", job: "Developer"}; let name, country, job; ({name, country, job} = person); console.log(name);//"Sarah" console.log(job);//"Developer" 

Penting juga untuk diperhatikan bahawa ketika menggunakan sintaks ini, yang ()harus didahului dengan titik koma. Jika tidak, ia mungkin digunakan untuk menjalankan fungsi dari baris sebelumnya.

Perhatikan bahawa pemboleh ubah dalam objek di sebelah kiri harus mempunyai nama yang sama dengan kunci harta benda dalam objek person. Sekiranya namanya berbeza, kami akan mendapat undefined:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, friends, job} = person; console.log(name);//"Sarah" console.log(friends);//undefined 

Tetapi jika kita mahu menggunakan nama pemboleh ubah baru, kita boleh.

Menggunakan Nama Pembolehubah baru

Sekiranya kita ingin menetapkan nilai objek ke pemboleh ubah baru dan bukannya menggunakan nama harta tanah, kita dapat melakukan ini:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name: foo, job: bar} = person; console.log(foo);//"Sarah" console.log(bar);//"Developer" 

Jadi nilai-nilai yang diekstrak diteruskan ke pemboleh ubah baru foodan bar.

Menggunakan Nilai Lalai

Nilai lalai juga dapat digunakan dalam pemusnahan objek, jika pemboleh ubah berada undefineddalam objek yang ingin diambil data dari:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name = "myName", friend = "Annie"} = person; console.log(name);//"Sarah" console.log(friend);//"Annie" 

Oleh itu, jika nilai tidak ditentukan, pemboleh ubah menyimpan nilai yang diekstrak dari objek seperti dalam kasus name. Jika tidak, ia menggunakan nilai lalai seperti dulu friend.

Kita juga dapat menetapkan nilai lalai ketika kita menetapkan nilai ke pemboleh ubah baru:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name:foo = "myName", friend: bar = "Annie"} = person; console.log(foo);//"Sarah" console.log(bar);//"Annie" 

Jadi   namediekstrak dari persondan ditugaskan ke pemboleh ubah yang berbeza. friend, sebaliknya, berada undefineddi person, jadi pemboleh ubah baru bar  diberi nilai lalai.

Nama Harta yang Dikira

Nama harta yang dikira adalah ciri literal objek lain yang juga berfungsi untuk merosakkan. Anda boleh menentukan nama harta tanah melalui ungkapan jika anda memasukkannya dalam tanda kurung persegi:

let prop = "name"; let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(foo);//"Sarah" 

Menggabungkan Array dengan Objek

Susunan juga dapat digunakan dengan objek dalam pemusnahan objek:

let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]}; let {name:foo, friends: bar} = person; console.log(foo);//"Sarah" console.log(bar);//["Annie", "Becky"] 

Bersarang dalam Pemusnahan Objek

Objek juga dapat bersarang ketika menghancurkan:

let person = { name: "Sarah", place: { country: "Nigeria", city: "Lagos" }, friends : ["Annie", "Becky"] }; let {name:foo, place: { country : bar, city : x} } = person; console.log(foo);//"Sarah" console.log(bar);//"Nigeria" 

Rehat dalam Pemusnahan Objek

The rest syntax can also be used to pick up property keys that are not already picked up by the destructuring pattern. Those keys and their values are copied into a new object:

let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]}; let {name, friends, ...others} = person; console.log(name);//"Sarah" console.log(friends);//["Annie", "Becky"] console.log(others);// {country: "Nigeria", job: "Developer"} 

Here, the remaining properties whose keys where not part of the variable names listed were assigned to the variable others. The rest syntax here is ...others. others can be renamed to whatever variable you want.

One last thing – let's see how Object Destructing can be used in functions.

Object Destructuring and Functions

Object Destructuring can be used to assign parameters to functions:

function person({name: x, job: y} = {}) { console.log(x); } person({name: "Michelle"});//"Michelle" person();//undefined person(friend);//Error : friend is not defined 

Notice the {} on the right hand side of the parameters object. It makes it possible for us to call the function without passing any arguments. That is why we got undefined. If we remove it, we'll get an error message.

We can also assign default values to the parameters:

function person({name: x = "Sarah", job: y = "Developer"} = {}) { console.log(x); } person({name});//"Sarah" 

We can do a whole lot of things with Array and Object Destructuring as we have seen in the examples above.

Thank you for reading. :)