Dalam tutorial ini, Anda akan belajar tentang tugas penghancuran JavaScript dengan bantuan contoh.
Perusakan JavaScript
Tugas penghancuran yang diperkenalkan di ES6 membuatnya mudah untuk menetapkan nilai array dan properti objek ke variabel yang berbeda. Misalnya,
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 menjadi masalah dalam perusakan objek.
Misalnya, Anda dapat menulis program di atas sebagai:
let ( age, gender, name ) = person; console.log(name); // Sara
Catatan : Saat merusak objek, Anda harus menggunakan nama yang sama untuk variabel sebagai kunci objek yang sesuai.
Sebagai contoh,
let (name1, age, gender) = person; console.log(name1); // undefined
Jika Anda ingin menetapkan nama variabel yang berbeda untuk kunci objek, Anda dapat 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
Array Destructuring
Anda juga dapat melakukan penghancuran array dengan cara yang sama. 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 Default
Anda dapat menetapkan nilai default untuk variabel saat 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 memiliki satu elemen. Karenanya,
- variabel x akan menjadi 10
- variabel y mengambil nilai default 7
Dalam perusakan objek, Anda dapat meneruskan nilai default dengan cara yang sama. 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
Variabel Swapping
Dalam contoh ini, dua variabel ditukar menggunakan sintaks tugas perusakan.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Lewati Item
Anda dapat melewati item yang tidak diinginkan dalam larik tanpa menetapkannya ke variabel lokal. 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 Tersisa ke Variabel Tunggal
Anda dapat menetapkan elemen yang tersisa dari array ke variabel menggunakan sintaks penyebaran … . 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 ke variabel x. Dan elemen array lainnya ditugaskan ke variabel y.
Anda juga dapat menetapkan sisa properti objek ke variabel tunggal. 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 : Variabel dengan sintaks penyebaran tidak boleh memiliki tanda koma ,. Anda harus menggunakan elemen istirahat ini (variabel dengan sintaks penyebaran) sebagai variabel terakhir.
Sebagai contoh,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Tugas Penghancuran Bersarang
Anda dapat melakukan perusakan 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, variabel y dan z diberi elemen bertingkat twodan three.
Untuk menjalankan tugas destrukturisasi bersarang, Anda harus menyertakan variabel dalam struktur array (dengan melampirkan di dalamnya ()).
Anda juga dapat melakukan perusakan bersarang untuk properti 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 menjalankan tugas destrukturisasi bersarang untuk objek, Anda harus menyertakan variabel dalam struktur objek (dengan melampirkan di dalamnya ()).
Catatan : Fitur tugas Destrukturisasi diperkenalkan di ES6 . Beberapa browser mungkin tidak mendukung penggunaan tugas penghancuran. Kunjungi dukungan Perusakan Javascript untuk mempelajari lebih lanjut.
