Dalam tutorial ini, anda akan belajar mengenai tugasan pemusnahan JavaScript dengan bantuan contoh.
Pemusnahan JavaScript
Tugasan destructuring yang diperkenalkan dalam ES6 memudahkan untuk menetapkan nilai array dan sifat objek kepada pemboleh ubah yang berbeza. Contohnya,
Sebelum ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Dari ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Catatan : Urutan nama tidak penting dalam pemusnahan objek.
Sebagai contoh, anda boleh menulis program di atas sebagai:
let ( age, gender, name ) = person; console.log(name); // Sara
Catatan : Semasa menghancurkan objek, anda harus menggunakan nama yang sama untuk pemboleh ubah sebagai kunci objek yang sesuai.
Sebagai contoh,
let (name1, age, gender) = person; console.log(name1); // undefined
Sekiranya anda ingin memberikan nama pemboleh ubah yang berbeza untuk kunci objek, anda boleh menggunakan:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Penyusunan Array
Anda juga boleh melakukan pemusnahan array dengan cara yang serupa. Sebagai contoh,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Tetapkan Nilai Lalai
Anda boleh menetapkan nilai lalai untuk pemboleh ubah semasa menggunakan destructuring. Sebagai contoh,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
Dalam program di atas, arrValue hanya mempunyai satu elemen. Oleh itu,
- pemboleh ubah x akan menjadi 10
- pemboleh ubah y mengambil nilai lalai 7
Dalam pemusnahan objek, anda boleh menyampaikan nilai lalai dengan cara yang serupa. Sebagai contoh,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Menukar Pemboleh ubah
Dalam contoh ini, dua pemboleh ubah ditukar menggunakan sintaks tugasan yang merosakkan.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Langkau Item
Anda boleh melangkau item yang tidak diingini dalam array tanpa memberikannya ke pemboleh ubah tempatan. Sebagai contoh,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
Dalam program di atas, elemen kedua dihilangkan dengan menggunakan pemisah koma ,.
Tetapkan Elemen yang Tinggal pada Pembolehubah Tunggal
Anda boleh menetapkan elemen array yang tersisa kepada pemboleh ubah menggunakan sintaks spread … . Sebagai contoh,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Di sini, onediberikan kepada pemboleh ubah x. Selebihnya elemen array ditugaskan kepada pemboleh ubah y.
Anda juga boleh menetapkan sisa sifat objek ke satu pemboleh ubah. Sebagai contoh,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Catatan : Pemboleh ubah dengan sintaks spread tidak boleh mempunyai koma akhir ,. Anda harus menggunakan elemen rehat ini (pemboleh ubah dengan sintaks spread) sebagai pemboleh ubah terakhir.
Sebagai contoh,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Tugasan Pemusnahan Bersarang
Anda boleh melakukan pemusnahan bersarang untuk elemen array. Sebagai contoh,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Di sini, pemboleh ubah y dan z diberikan elemen bersarang twodan three.
Untuk melaksanakan tugas pemusnahan bersarang, anda harus memasukkan pemboleh ubah dalam struktur array (dengan melampirkan di dalam ()).
Anda juga boleh melakukan pemusnahan bersarang untuk sifat objek. Sebagai contoh,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Untuk melaksanakan tugas pemusnahan bersarang untuk objek, anda harus memasukkan pemboleh ubah dalam struktur objek (dengan melampirkan di dalam ()).
Catatan : Ciri penugasan menghancurkan diperkenalkan pada ES6 . Beberapa penyemak imbas mungkin tidak menyokong penggunaan tugas pemusnahan. Lawati sokongan Javascript Destructuring untuk mengetahui lebih lanjut.
