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
javascript
const { identifier } = expression;
_0 ditugaskan ke variabel
javascript
const { identifier } = expression;
1. Cara yang sama
javascript
const { identifier } = expression;
_2 nilai diberikan ke
javascript
const { identifier } = expression;
3
Dengan menulis
javascript
const { identifier } = expression;
_4, Anda harus menyebutkan
javascript
const { identifier } = expression;
1 pengikatan 2 kali, dan hal yang sama untuk
javascript
const { identifier } = expression;
3. Cara seperti itu untuk mengakses properti dan menugaskannya ke variabel memerlukan kode boilerplate
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
javascript
const { identifier } = expression;
1 dan
javascript
const { identifier } = expression;
3
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
Coba demonya
javascript
const { identifier } = expression;
_9 adalah tugas penghancuran objek. Pernyataan ini mendefinisikan variabel
javascript
const { identifier } = expression;
_1 dan
javascript
const { identifier } = expression;
3, kemudian menetapkan nilai properti
javascript
const { identifier } = expression;
0 dan
javascript
const { identifier } = expression;
2 sesuai dengannya
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
javascript
const identifier = expression.identifier;
_4 adalah nama properti yang akan diakses dan
javascript
const identifier = expression.identifier;
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabel
javascript
const identifier = expression.identifier;
4 berisi nilai properti
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
javascript
const identifier = expression.identifier;
_7 mendefinisikan variabel
javascript
const { identifier } = expression;
1 dan menginisialisasinya dengan nilai properti
javascript
const { identifier } = expression;
0
3. Mengekstraksi beberapa properti
Untuk merusak struktur objek menjadi beberapa properti, sebutkan sebanyak mungkin properti yang Anda suka dengan menambahkan koma
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log(name); // => 'Batman'
0 di antaranya
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
Di mana
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log(name); // => 'Batman'
_1,. ,
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log(name); // => 'Batman'
_2 adalah nama properti yang akan diakses, dan
javascript
const identifier = expression.identifier;
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabel
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log(name); // => 'Batman'
1,. ,
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name } = hero;
console.log(name); // => 'Batman'
_2 berisi nilai properti yang sesuai
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
javascript
const { identifier } = expression;
_9 membuat 2 variabel
javascript
const { identifier } = expression;
1 dan
javascript
const { identifier } = expression;
3 ditugaskan dengan nilai properti yang sesuai
javascript
const { identifier } = expression;
0 dan
javascript
const { identifier } = expression;
2
4. Nilai dasar
Jika objek yang dirusak tidak memiliki properti yang ditentukan dalam penugasan penghancuran, maka variabel tersebut ditugaskan dengan
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
1. Mari kita lihat bagaimana hal itu terjadi
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log(enemies); // => undefined
Coba demonya
Setelah mendestruktur variabel
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
2 adalah
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
1 karena properti
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
2 tidak ada di objek
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
5
Untungnya, Anda dapat menetapkan nilai default jika properti tidak ada di objek yang dirusak
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_0
Di mana
javascript
const identifier = expression.identifier;
_4 adalah nama properti yang akan diakses dan
javascript
const identifier = expression.identifier;
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabel
javascript
const identifier = expression.identifier;
_4 berisi nilai properti atau ditetapkan dengan
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
9 jika
javascript
const identifier = expression.identifier;
4 properti tidak ada
Ini kode yang setara
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_1
Mari ubah contoh kode sebelumnya, dan gunakan fitur nilai default
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_2
Coba demonya
Sekarang, bukannya
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
_1, variabel
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
2 default ke
javascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
3
5. Alias
Untuk membuat variabel dengan nama yang berbeda dari properti, Anda dapat menggunakan fitur aliasing dari penghancuran objek
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_3
javascript
const identifier = expression.identifier;
_4 adalah nama properti yang akan diakses,
javascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
5 adalah nama variabel, dan
javascript
const identifier = expression.identifier;
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabel
javascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
5 berisi nilai properti
Kode yang setara
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_4
Berikut adalah contoh fitur alias penghancuran objek
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_5
Coba demonya
Melihat
javascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
8, destrukturisasi mendefinisikan variabel baru
javascript
const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;
9 (variabel alias) dan memberikan nilai
javascript
const { identifier } = expression;
2
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
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_6
javascript
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 identifier = expression.identifier;
_4 adalah nama properti untuk diakses dari objek bersarang.
javascript
const identifier = expression.identifier;
_5 harus mengevaluasi objek yang dirusak
Setelah penghancuran, variabel
javascript
const identifier = expression.identifier;
_4 berisi nilai properti dari objek bersarang
Sintaks di atas setara dengan
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_7
Tingkat sarang untuk mengekstrak properti tidak terbatas. Jika Anda ingin mengekstrak properti dari dalam, tambahkan saja kurung kurawal bersarang
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_8
Misalnya, objek
javascript
const { identifier1, identifier2, ..., identifierN } = expression;
_5 berisi objek bersarang
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
6
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_9
Coba demonya
Penghancuran objek
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_7 mengakses properti
javascript
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 variabel
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
8 yang memiliki nilai properti
7. Mengekstrak properti nama dinamis
Anda dapat mengekstraksi ke properti variabel dengan nama dinamis (nama properti diketahui saat runtime)
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_0
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log(enemies); // => undefined
_0 ekspresi harus mengevaluasi ke nama properti (biasanya string), dan
javascript
const identifier = expression.identifier;
4 harus menunjukkan nama variabel yang dibuat setelah destrukturisasi.
javascript
const identifier = expression.identifier;
_5 harus mengevaluasi objek yang ingin Anda hancurkan
Kode yang setara tanpa penghancuran objek
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_1
Mari kita lihat contoh di mana
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log(enemies); // => undefined
3 menyimpan nama properti
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_2
Coba demonya
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log(enemies); // => undefined
_4 adalah penghancuran objek yang memberikan variabel
javascript
const { identifier } = expression;
1 nilai
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log(enemies); // => undefined
6, di mana
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
console.log(enemies); // => undefined
3 adalah variabel yang memegang nama properti
8. Istirahatkan objek setelah penghancuran
Sintaks sisanya berguna untuk mengumpulkan properti yang tersisa setelah destrukturisasi
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_3
Di mana
javascript
const identifier = expression.identifier;
_4 adalah nama properti yang akan diakses dan
javascript
const identifier = expression.identifier;
5 harus dievaluasi ke objek. Setelah destrukturisasi, variabel
javascript
const identifier = expression.identifier;
4 berisi nilai properti.
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_01 variabel adalah objek biasa dengan properti yang tersisa
Sebagai contoh, mari ekstrak properti
javascript
const { identifier } = expression;
_1, tetapi kumpulkan properti lainnya menjadi variabel
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
01
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_4
Coba demonya
Penghancuran
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_04 mengekstrak properti
javascript
const { identifier } = expression;
1. Juga, sisa properti (
javascript
const { identifier } = expression;
_3 dan
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
07) dikumpulkan ke
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
01
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
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
09,
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
10, dan
javascript
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 ada
Misalnya, inilah cara merusak struktur menggunakan pernyataan
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
10
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_5
Coba demonya
Cara merusak struktur menggunakan pernyataan
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_11
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_6
Coba demonya
Dan bagaimana cara merusak ke variabel yang sudah dideklarasikan
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_7
Coba demonya
Saya merasa puas untuk menggabungkan siklus
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_14 dengan penghancuran objek untuk mengekstrak properti segera
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_8
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
javascript
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;
_9
Coba demonya
javascript
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // => 'Batman',
console.log(realName); // => 'Bruce Wayne'
_15 merusak parameter fungsi dan membuat variabel
javascript
const { identifier } = expression;
1 memegang nilai properti
javascript
const { identifier } = expression;
1
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
Langganan
Bergabunglah 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 😉
