Penghancuran objek adalah fitur JavaScript yang berguna untuk mengekstrak properti dari objek dan mengikatnya ke variabel
Apa yang lebih baik, penghancuran objek dapat mengekstrak beberapa properti dalam satu pernyataan, dapat mengakses properti dari objek bersarang, dan dapat menetapkan nilai default jika properti tidak ada
Posting ini akan membantu Anda memahami cara menggunakan penghancuran objek dalam JavaScript
Daftar isi
1. Kebutuhan akan penghancuran objek
Bayangkan Anda ingin mengekstrak beberapa properti dari suatu objek. Di lingkungan pra-ES2015, Anda harus menulis kode berikut
javascript
var hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
var name = hero.name;
var realName = hero.realName;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Coba demonya
Nilai properti
_0 ditugaskan ke variabeljavascript
const { identifier } = expression;
1. Cara yang samajavascript
const { identifier } = expression;
_2 nilai diberikan kejavascript
const { identifier } = expression;
3javascript
const { identifier } = expression;
Dengan menulis
_4, Anda harus menyebutkanjavascript
const { identifier } = expression;
1 pengikatan 2 kali, dan hal yang sama untukjavascript
const { identifier } = expression;
3. Cara seperti itu untuk mengakses properti dan menugaskannya ke variabel memerlukan kode boilerplatejavascript
const { identifier } = expression;
Di situlah sintaks penghancur objek berguna. Anda dapat membaca properti dan menetapkan nilainya ke variabel tanpa menduplikasi nama properti. Lebih dari itu, Anda dapat membaca banyak properti dari objek yang sama hanya dalam satu pernyataan
Mari perbaiki skrip di atas dan terapkan penghancuran objek untuk mengakses properti
1 danjavascript
const { identifier } = expression;
3javascript
const { identifier } = expression;
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Coba demonya
_9 adalah tugas penghancuran objek. Pernyataan ini mendefinisikan variabeljavascript
const { identifier } = expression;
_1 danjavascript
const { identifier } = expression;
3, kemudian menetapkan nilai propertijavascript
const { identifier } = expression;
0 danjavascript
const { identifier } = expression;
2 sesuai dengannyajavascript
const { identifier } = expression;
Membandingkan 2 pendekatan untuk mengakses properti objek
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
terlihat bahwa penghancuran objek lebih mudah karena baik nama properti maupun variabel objek tidak diduplikasi
2. Mengekstrak properti
Sintaks penghancuran objek cukup sederhana
_javascript
const { identifier } = expression;
Di mana
_4 adalah nama properti yang akan diakses danjavascript
const identifier = expression.identifier;
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabeljavascript
const identifier = expression.identifier;
4 berisi nilai propertijavascript
const identifier = expression.identifier;
Berikut kode yang setara menggunakan a
javascript
const identifier = expression.identifier;
Mari kita coba penghancuran objek dalam praktik
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log[name]; // => 'Batman'
Coba demonya
Pernyataan
_7 mendefinisikan variabeljavascript
const identifier = expression.identifier;
1 dan menginisialisasinya dengan nilai propertijavascript
const { identifier } = expression;
0javascript
const { identifier } = expression;
3. Mengekstraksi beberapa properti
Untuk merusak struktur objek menjadi beberapa properti, sebutkan sebanyak mungkin properti yang Anda suka dengan menambahkan koma
0 di antaranyajavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log[name]; // => 'Batman'
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
Di mana
_1,. ,javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log[name]; // => 'Batman'
_2 adalah nama properti yang akan diakses, danjavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log[name]; // => 'Batman'
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabeljavascript
const identifier = expression.identifier;
1,. ,javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log[name]; // => 'Batman'
_2 berisi nilai properti yang sesuaijavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log[name]; // => 'Batman'
Ini kode yang setara
javascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
Mari kita lihat kembali contoh dari bagian pertama, di mana 2 properti diekstraksi
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Coba demonya
_9 membuat 2 variabeljavascript
const { identifier } = expression;
1 danjavascript
const { identifier } = expression;
3 ditugaskan dengan nilai properti yang sesuaijavascript
const { identifier } = expression;
0 danjavascript
const { identifier } = expression;
2javascript
const { identifier } = expression;
4. Nilai dasar
Jika objek yang dirusak tidak memiliki properti yang ditentukan dalam penugasan penghancuran, maka variabel tersebut ditugaskan dengan
1. Mari kita lihat bagaimana hal itu terjadijavascript
const { identifier1, identifier2, ..., identifierN } = expression;
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log[enemies]; // => undefined
Coba demonya
Setelah mendestruktur variabel
2 adalahjavascript
const { identifier1, identifier2, ..., identifierN } = expression;
1 karena propertijavascript
const { identifier1, identifier2, ..., identifierN } = expression;
2 tidak ada di objekjavascript
const { identifier1, identifier2, ..., identifierN } = expression;
5javascript
const { identifier1, identifier2, ..., identifierN } = expression;
Untungnya, Anda dapat menetapkan nilai default jika properti tidak ada di objek yang dirusak
_0javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Di mana
_4 adalah nama properti yang akan diakses danjavascript
const identifier = expression.identifier;
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabeljavascript
const identifier = expression.identifier;
_4 berisi nilai properti atau ditetapkan denganjavascript
const identifier = expression.identifier;
9 jikajavascript
const { identifier1, identifier2, ..., identifierN } = expression;
4 properti tidak adajavascript
const identifier = expression.identifier;
Ini kode yang setara
_1javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Mari ubah contoh kode sebelumnya, dan gunakan fitur nilai default
_2javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Coba demonya
Sekarang, bukannya
_1, variabeljavascript
const { identifier1, identifier2, ..., identifierN } = expression;
2 default kejavascript
const { identifier1, identifier2, ..., identifierN } = expression;
3javascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
5. Alias
Untuk membuat variabel dengan nama yang berbeda dari properti, Anda dapat menggunakan fitur aliasing dari penghancuran objek
_3javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
_4 adalah nama properti yang akan diakses,javascript
const identifier = expression.identifier;
5 adalah nama variabel, danjavascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabeljavascript
const identifier = expression.identifier;
5 berisi nilai propertijavascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
Kode yang setara
_4javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Berikut adalah contoh fitur alias penghancuran objek
_5javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Coba demonya
Melihat
8, destrukturisasi mendefinisikan variabel barujavascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
9 [variabel alias] dan memberikan nilaijavascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
2javascript
const { identifier } = expression;
6. Mengekstraksi properti dari objek bersarang
Pada contoh sebelumnya, objeknya polos. properti memiliki tipe data primitif [mis. g. string]
Tapi objek bisa bersarang di objek lain. Dengan kata lain, beberapa properti dapat berisi objek
Dalam kasus seperti itu, Anda masih dapat menggunakan penghancuran objek dan mengakses properti dari dalam. Inilah sintaks dasarnya
_6javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
_1 adalah nama properti yang menampung objek bersarang.javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
_4 adalah nama properti untuk diakses dari objek bersarang.javascript
const identifier = expression.identifier;
_5 harus mengevaluasi objek yang dirusakjavascript
const identifier = expression.identifier;
Setelah penghancuran, variabel
_4 berisi nilai properti dari objek bersarangjavascript
const identifier = expression.identifier;
Sintaks di atas setara dengan
_7javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Tingkat sarang untuk mengekstrak properti tidak terbatas. Jika Anda ingin mengekstrak properti dari dalam, tambahkan saja kurung kurawal bersarang
_8javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Misalnya, objek
_5 berisi objek bersarangjavascript
const { identifier1, identifier2, ..., identifierN } = expression;
6javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
_9javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Coba demonya
Penghancuran objek
_7 mengakses propertijavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
8 dari objek bersarang dan membuat variabeljavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
8 yang memiliki nilai propertijavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
7. Mengekstrak properti nama dinamis
Anda dapat mengekstraksi ke properti variabel dengan nama dinamis [nama properti diketahui saat runtime]
_0javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_0 ekspresi harus mengevaluasi ke nama properti [biasanya string], danjavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log[enemies]; // => undefined
4 harus menunjukkan nama variabel yang dibuat setelah destrukturisasi.javascript
const identifier = expression.identifier;
_5 harus mengevaluasi objek yang ingin Anda hancurkanjavascript
const identifier = expression.identifier;
Kode yang setara tanpa penghancuran objek
_1javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
Mari kita lihat contoh di mana
3 menyimpan nama propertijavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log[enemies]; // => undefined
_2javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
Coba demonya
_4 adalah penghancuran objek yang memberikan variabeljavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log[enemies]; // => undefined
1 nilaijavascript
const { identifier } = expression;
6, di manajavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log[enemies]; // => undefined
3 adalah variabel yang memegang nama propertijavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log[enemies]; // => undefined
8. Istirahatkan objek setelah penghancuran
Sintaks sisanya berguna untuk mengumpulkan properti yang tersisa setelah destrukturisasi
_3javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
Di mana
_4 adalah nama properti yang akan diakses danjavascript
const identifier = expression.identifier;
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabeljavascript
const identifier = expression.identifier;
4 berisi nilai properti.javascript
const identifier = expression.identifier;
_01 variabel adalah objek biasa dengan properti yang tersisajavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Sebagai contoh, mari ekstrak properti
_1, tetapi kumpulkan properti lainnya menjadi variabeljavascript
const { identifier } = expression;
01javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
_4javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
Coba demonya
Penghancuran
_04 mengekstrak propertijavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
1. Juga, sisa properti [javascript
const { identifier } = expression;
_3 danjavascript
const { identifier } = expression;
07] dikumpulkan kejavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
01javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
9. Kasus penggunaan umum
9. 1 Ikat properti ke variabel
Seperti yang terlihat pada banyak contoh sebelumnya, penghancuran objek mengikat nilai properti ke variabel
Penghancuran objek dapat menetapkan nilai ke variabel yang dideklarasikan menggunakan
09,javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
10, danjavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
11. Atau bahkan menugaskan ke variabel yang sudah adajavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
Misalnya, inilah cara merusak struktur menggunakan pernyataan
10javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
_5javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
Coba demonya
Cara merusak struktur menggunakan pernyataan
_11javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
_6javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
Coba demonya
Dan bagaimana cara merusak ke variabel yang sudah dideklarasikan
_7javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
Coba demonya
Saya merasa puas untuk menggabungkan siklus
_14 dengan penghancuran objek untuk mengekstrak properti segerajavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
_8javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
Coba demonya
9. 2 Penghancuran parameter fungsi
Penghancuran objek dapat ditempatkan di mana saja di mana penugasan terjadi
Misalnya, Anda dapat menghancurkan objek tepat di dalam parameter suatu fungsi
_9javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
Coba demonya
_15 merusak parameter fungsi dan membuat variabeljavascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log[name]; // => 'Batman',
console.log[realName]; // => 'Bruce Wayne'
1 memegang nilai propertijavascript
const { identifier } = expression;
1javascript
const { identifier } = expression;
10. Ringkasan
Penghancuran objek adalah fitur yang ampuh untuk mengekstrak properti dari suatu objek dan mengikat nilai-nilai ini ke variabel
Saya suka penghancuran objek karena sintaks yang ringkas dan kemampuan untuk mengekstrak banyak variabel dalam satu pernyataan
Ada pertanyaan tentang penghancuran objek?
Suka postingannya?
Sarankan Perbaikan
Posting berkualitas ke kotak masuk Anda
Saya secara teratur menerbitkan posting yang berisi
- Konsep penting JavaScript dijelaskan dengan kata-kata sederhana
- Ikhtisar fitur JavaScript baru
- Cara menggunakan TypeScript dan mengetik
- Desain perangkat lunak dan praktik pengkodean yang baik
Berlangganan buletin saya untuk mengirimkannya langsung ke kotak masuk Anda
LanggananBergabunglah dengan 6946 pelanggan lainnya
Tentang Dmitri Pavlutin
Penulis dan pelatih teknologi. Rutinitas harian saya terdiri dari [namun tidak terbatas] minum kopi, coding, menulis, coaching, mengatasi kebosanan 😉