Apa itu dekonstruksi?
Dekonstruksi benar -benar berlawanan dengan membangun data. Misalnya, alih -alih membangun objek atau array baru, ia membagi objek yang ada atau array satu per satu untuk mengekstrak data yang Anda butuhkan.
ES6 menggunakan pola baru untuk mencocokkan nilai numerik yang ingin Anda ekstrak, dan penugasan dekonstruksi mengadopsi pola ini. Pola ini akan memetakan struktur data yang Anda dekonstruksi, dan hanya data yang sesuai dengan pola yang akan diekstraksi.
Item data yang didekonstruksi terletak di operator penugasan Di sebelah kanan =, dapat berupa kombinasi array dan objek, memungkinkan untuk bersarang sewenang -wenang. Tidak ada batasan jumlah variabel yang digunakan untuk menetapkan nilai pada data ini.
Penghancuran array
Dekonstruksi Array menggunakan array sebagai item data, dan Anda dapat mengekstrak nilai -nilai dari array ini untuk menetapkan nilai ke satu atau lebih variabel sesuai dengan pola array (digunakan untuk mencocokkan nilai yang Anda butuhkan dari array).
Pola array digunakan untuk mengidentifikasi nilai mana yang ingin Anda ekstrak berdasarkan posisi nilai. Itu harus dapat secara akurat memetakan struktur array sehingga setiap variabel dalam pola array diberi nilai yang sesuai dengan posisi dalam array yang didekonstruksi.
Izinkan saya memberi Anda beberapa contoh untuk membantu kami memahami:
Contoh pola array
Tetapkan semua nilai dalam array ke variabel individu
// atur array const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // mendekonstruksi array ke variabel. Pola array terletak di sebelah kiri operator penugasan `=`, dan array terstruktur berada di sebelah kanan //. Const [Ironman, Cap, Blackwidow] = Avengers; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // Output Ironman: Ironman;
Ekstrak semua nilai kecuali yang pertama
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // kita tidak perlu menggunakan tony const [, cap, blackwidow] = avengers; // ironman = kesalahan: tidak terdefinisi // cap = 'steve rogers' // blackwidow = 'natasha romanoff' // output cap: cap;
Ekstrak semua nilai kecuali yang kedua
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // tutup konstan yang hilang [Ironman ,, Blackwidow] = Avengers; // Ironman = 'Tony Stark' // Cap = ERROR: Undefined // Blackwidow = 'Natasha Romanoff' // Output Blackwidow: Blackwidow;
Ekstrak semua nilai kecuali yang terakhir
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Ironman vs cap const [Ironman, cap] = Avengers; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = Kesalahan: tidak terdefinisi // output Blackwidow: Ironman;
Array bersarang
Pola pencocokan ini juga mendukung array bersarang, selama operator penugasan = pola array di sebelah kiri cocok dengan struktur array di sebelah kanan. Izinkan saya menjelaskan lagi bahwa variabel di sebelah kiri akan diberi nilai yang sesuai dengan posisi dalam array di sebelah kanan. Tidak peduli seberapa dalam Anda bersarang, Anda masih bisa mendekonstruksi mereka.
Mendekonstruksi array bersarang
// Menghancurkan array bersarang const avengers = ['Natasha Romanoff', ['Tony Stark', 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']]; // Avengers dan mitra mereka Const [Blackwidow, [Ironman, Warmachine], [Cap, Falcon]] = Avengers; // Blackwidow = 'Natasha Romanoff' // ironman = 'Tony Stark' // Warmachine = 'James Rhodes' // Cap = 'Steve Rogers' // Falcon = 'Sam Wilson' // Output Warmachine: Warmachine;
Ekstrak nilai dari array yang sangat bersarang
// Ekstrak Pepper Potts Const Avengers dari array ini = ['Natasha Romanoff', [['Tony Stark', 'Pepper Potts'], 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']]; // Destructure Const [, // Lewati 'Natasha Romanoff' [[, // Lewati 'Tony Stark' Her // Pepper Potts Ditugaskan ke Variabel 'Hera']]] = Avengers; // Harap dicatat: Anda juga dapat menulis dengan cara ini // const [, [[, hera]]] = avengers; // output hera: hera; // hera = 'Pepper Potts'
Gunakan operator istirahat untuk menangkap semua item yang tersisa
Jika Anda ingin mendapatkan item array tertentu dan memasukkan item yang tersisa ke dalam array, Anda dapat menggunakan operator istirahat untuk mendekonstruksi seperti ini:
// mendekonstruksi const avengers melalui operator istirahat = ['Natasha Romanoff', 'Tony Stark', 'Steve Rogers']; const [blackwidow, ... theothers] = avengers; TheHORHER; // blackwidow = 'Natasha Romanoff' // theothers = ['tony stark', 'steve rogers'] // output theothers: theothers;
Penghancuran Objek
Dekonstruksi objek bahkan lebih ajaib, terutama ketika Anda perlu mengambil nilai dari objek yang kompleks dan bersarang, yang lebih jelas. Untuk mengulangi, dekonstruksi objek dan dekonstruksi array menggunakan aturan yang sama (yaitu, buat pola objek di sisi kiri operator penugasan, sehingga posisi variabelnya cocok dengan posisi nilai objek di sisi kanan).
Dalam penghancuran objek, Anda perlu menentukan nama atribut yang perlu diekstraksi dan nama variabel yang akan ditetapkan. Seperti Dekonstruksi Array, kita perlu membuat pola objek untuk memetakan objek yang didekonstruksi di sisi kiri operator penugasan.
Meskipun dalam hal ini, yang ingin kami ekstrak adalah nilai properti objek (seperti: kami mengekstrak value dari { prop: value }). Dengan demikian, pola objek kami harus memiliki variabel, dan posisi variabel ini harus konsisten dengan posisi nilai properti yang akan kami ekstrak.
Contoh sederhana
Ekstrak nilai atribut objek sederhana
Kita dapat melakukan ini untuk menetapkan nilai properti ironMan Objek { ironMan: 'Tony Stark' } 'Tony Stark' variabel a :
// mendekonstruksi nilai properti objek dan menetapkannya ke variabel tunggal `a`: const {ironman: a} = {ironman: 'tony stark'}; // output a: a; // a = 'Tony Stark'Ekstrak beberapa nilai atribut
Selama kita memperluas pola yang sama, kita dapat mengekstrak beberapa nilai atribut dari suatu objek, sebagai berikut:
// Siapkan objek kami const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Destructure objek ke variabel individual const {ironman: a, cap: b, blackwidow: c} = avengers; // A = 'Tony Stark' // B = 'Steve Rogers' // C = 'Natasha Romanoff' // Output A: A;Amati bagaimana pola dekonstruksi ini cocok dengan objek yang didekonstruksi dengan tepat.
Penghancuran objek bersarang
Seperti mendekonstruksi array bersarang, kita dapat mendekonstruksi benda bersarang, tidak peduli seberapa dalam mereka.
// Siapkan objek kami const avengers = {blackwidow: 'Natasha Romanoff', IronManCharacters: {COUPLE: {Ironman: 'Tony Stark', Hera: 'Pepper Potts',}, mitra: {warmachine: 'James Brodie'}}, capcharacters: {cap: '{steve: // Menghancurkan objek ke variabel individual const {blackwidow: a, IronManCharacters: {cowok: {ironman: b, hera: c}, mitra: {warmachine: d}}, capcharacters: {cap: e, mitra: {falcon: f}}} = avengers; // A = 'Natasha Romanoff' // B = 'Tony Stark' // C = 'Pepper Potts' // D = 'James Brodie' // E = 'Steve Rogers' // f = 'Sam Wilson' // Output A: A;Beri nama variabel yang ditetapkan
Tentu saja, buruk untuk mengatur nama variabel seperti A, B, C , dan nama variabel harus masuk akal.
Penamaan yang tahan lama
// Siapkan objek kami const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Menghancurkan objek ke variabel individual dengan nama yang bermakna const {Ironman: ironman, cap: cap, blackwidow: blackwidow} = avengers; // Blackwidow = 'Natasha Romanoff' // ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Output Blackwidow: Blackwidow; Pendekatan ini lebih baik daripada nama di atas A, B, dan C , tetapi masih dapat ditingkatkan. { ironMan: ironMan } terlihat agak jelek dan tidak intuitif.
Pintasan bernama secara sintaksis
Jika Anda ingin menetapkan nilai atribut suatu objek ke variabel, dan nama variabel sama dengan nama atribut objek, maka dalam mode penugasan di sisi kiri = , Anda hanya perlu hanya menulis nama atribut, sebagai berikut:
// Siapkan objek kami const avenger = {ironman: 'tony stark'}; // Menghancurkan objek ke variabel individual dengan nama yang bermakna const {ironman // setara dengan 'Ironman: Ironman'} = avenger; // Ironman = 'Tony Stark' // Output Ironman: Ironman;Karena nama atribut objek yang didekonstruksi sama dengan nama variabel yang ditetapkan, kita hanya perlu mendaftar nama sekali.
Tata bahasa ringkas
Mari kita retweet kode sebelumnya sedikit agar mereka terlihat lebih ringkas dan jelas:
// Siapkan objek kami const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Menghancurkan objek ke variabel individual dengan nama yang bermakna const {ironman, cap, blackwidow} = avengers; // output Ironman: Ironman;Ekstrak properti yang sangat bersarang dari suatu objek
Segalanya bahkan lebih menarik ketika kita ingin mengekstrak properti objek yang sangat bersarang:
// Setup our objectconst avengers = { blackWidow: 'Natasha Romanoff', ironManCharacters: { couple: { ironMan: 'Tony Stark', hera: 'Pepper Potts', }, partner: { warMachine: 'James Brodie' } }, capCharacters: { cap: 'Steve Rogers', partner: { falcon: 'Sam Wilson' } }}; // Menghancurkan objek yang sangat bersarang {IronManMaracters: {cowok}} = avengers; // cowok = {// ironman: 'tony stark', // hera: 'lada pot', //} // output pasangan: pasangan;Tunggu, bagaimana Anda membaca kode ini? Bagaimana pasangan variabel didefinisikan?
Dengan membelah dengan cara ini, kita dapat melihat bahwa operator penugasan = di sebelah kiri adalah peta objek yang didekonstruksi:
const avengers = {IronManMaracters: {cowoke: {Ironman: 'Tony Stark', hera: 'Pepper Potts',}}}; const {IronManCharacters: {cowok}} = avengers; // output pasangan: pasangan; Hanya menggunakan const { couple } = avengers; Tidak ada cara untuk mengekstraksi nilai pasangan . Hanya dengan memetakan lokasi dan nama atribut objek yang akan diekstraksi, kompiler JS dapat memperoleh informasi yang sesuai, mencari di sepanjang semua atribut objek, dan secara akurat mengekstrak nilai yang kami inginkan.
Juga harus dicatat di sini bahwa pasangan menggunakan pintasan sintaks untuk menyebutkan variabel, yang sebenarnya seperti ini:
const {IronManCharacters: {cowok: cowok}} = avengers;Beginilah cara pasangan didefinisikan, dan nilainya adalah nilainya pasangan atributnya pasangan di objek Avengers .
Mendekonstruksi atribut objek
Sejauh ini, kami telah mendekonstruksi nilai objek untuk menetapkan nilai ke variabel tunggal, dan pada kenyataannya kami juga dapat menetapkan nilai ke properti objek lain.
const avengers = {blackwidow: 'Natasha Romanoff', IronManMaracters: {COUPLE: {Ironman: 'Tony Stark', Hera: 'Pepper Potts'}}}; const IronManProperties = {family: {}}; ({{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{IronMan. IronManProperties.family// IronManProperties.Family = {// Ironman: 'Tony Stark', // Hera: 'Pepper Potts' //} // output IronManProperties.Family:onManMropersies.family; Di sini kami menetapkan nilai ironManCharacters.couple ironManProperties.family Berikut adalah dua poin yang harus dijelaskan:
1. Penugasan Dekonstruksi harus dimasukkan dalam tanda kurung
Ketika kami mendekonstruksi variabel yang ada (seperti IronManProperties dalam contoh di atas), kita harus melakukan ini alih -alih menyatakan variabel baru.
2. Polanya masih cocok
{ ironManCharacters: { couple... } } cocok dengan IronManCharacters di objek Avengers . Dengan cara ini, Anda dapat mengekstraksi nilai ironManCharacters.couple dari objek Avengers sesuai keinginan. Tapi sekarang, objek baru IronManProperties dan keluarga propertinya ditempatkan di belakang pasangan . Bahkan, properti ironManProperties.family Keluarga objek ini sebenarnya ditetapkan.
Apakah Anda masih bingung ketika Anda mencoba menjelaskan situasi ini dengan jelas? Coba kode di atas di jsfiddle dan semuanya akan jelas.
Jika Anda tidak yakin mengapa Anda melakukan ini, silakan merujuk ke contoh di artikel berikutnya. Contoh -contoh ini akan memberi tahu Anda mengapa pola ini digunakan untuk mendekonstruksi objek JSON yang disebut oleh API, memungkinkan Anda untuk menghargai keajaiban dekonstruksi!
nilai default
Saat mendekonstruksi, Anda juga dapat menentukan nilai default ke variabel:
// Siapkan objek kami const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Destructure Menggunakan Default Const {Ironman, Cap, Blackwidow, thehulk = 'Bruce Banner'} = Avengers; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // Thehulk = 'Bruce Banner' // Output Blackwidow: Blackwidow;Hindari masalah ini selama dekonstruksi
Const, let, var tidak digunakan saat mendekonstruksi penugasan
Poin ini telah disebutkan ketika berbicara tentang mendekonstruksi dan menetapkan sifat objek, tetapi masih perlu untuk mengulanginya di sini untuk memberi semua orang kesan mendalam.
Tidak dapat mendekonstruksi variabel yang dinyatakan
Artinya, Anda hanya dapat mendeklarasikan variabel sambil mendekonstruksi variabel.
// Siapkan objek kami const avengers = {ironman: 'tony stark', cap: 'steve rogers', blackwidow: 'natasha romanoff', thehulk: 'Bruce Banner'}; // Const Destructurturing Valid {Ironman} = Avengers; biarkan {cap} = avengers; var {blackwidow} = avengers; // Menghancurkan tidak valid Let theHulk; {thehulk} = avengers; // error // output thehulk: thehulk;Mengapa variabel yang dinyatakan tidak dapat didekonstruksi? Itu karena jika Anda menggunakan kawat gigi keriting { maka JavaScript akan berpikir Anda mendeklarasikan blok .
Solusinya adalah melampirkan seluruh penugasan yang didekonstruksi dalam sepasang tanda kurung .
Cara mendekonstruksi dan menetapkan variabel yang dinyatakan
// Siapkan objek kami const avengers = {ironman: 'tony stark', cap: 'steve rogers', blackwidow: 'natasha romanoff', thehulk: 'Bruce Banner'}; // Hulk yang valid membiarkan thehulk; ({thehulk} = avengers); // thehulk = 'Bruce Banner' // output thehulk: thehulk;Sekarang kita tidak mulai dengan kawat gigi keriting, jadi JS tidak akan berpikir kita menyatakan blok sehingga kita dapat mencapai hasil dekonstruksi yang diharapkan.
Mengembalikan nilai yang didekonstruksi secara langsung
Ketika variabel yang akan dikembalikan selanjutnya tidak dinyatakan terlebih dahulu, nilai yang didekonstruksi dikembalikan langsung, yang tidak akan mencapai efek yang diharapkan. Misalnya, dalam kode berikut, seluruh objek Ironman yang dikembalikan tidak akan menjadi nilai yang diharapkan dari Tony Stark .
// Catatan: Ini tidak berhasil! fungsi getonysark (avengers) {return {ironman: {realname}} = avengers; // kembalikan objek Avengers, bukan nilai realName} const avengers = {ironman: {realname: 'tony stark'}}; const tonysark = gettonysark (avengers); // tonysark = {// ironman: {// realname: 'tony stark' //} //}; // Output Tonysark: Tonysark;Untuk mengekstrak nilai dari objek yang didekonstruksi, Anda harus terlebih dahulu menetapkannya ke variabel, dan kemudian mengembalikan variabel ini, seperti yang ditunjukkan pada kode berikut:
// Catatan: Ini berhasil! fungsi getonysark (avengers) {const {ironman: {realname}} = avengers; Return RealName; } const avengers = {ironman: {realname: 'tony stark'}}; const tonysark = gettonysark (avengers); // tonysark = 'tony stark' // output tonysark: tonysark;Cara membagi penugasan ini dan kembali menjadi dua baris kode benar -benar menjengkelkan, dan kodenya jelek dan tidak perlu. Sayangnya, JavaScript berfungsi seperti ini - Anda harus menetapkan nilai yang didekonstruksi ke variabel terlebih dahulu, dan kemudian mengembalikannya, dan dua langkah harus dilakukan secara terpisah.
Namun, kami tidak mengatakan bahwa kami hanya melakukannya secara terpisah, dan tidak mengatakan bahwa kami harus memasukkannya ke dalam dua baris kode. Jadi menuliskannya ke dalam satu baris seperti berikut ini juga dapat mencapai hasil yang diharapkan:
function getonysark (avengers) {return ({ironman: {realname}} = avengers) && realname; } const avengers = {ironman: {realname: 'tony stark'}}; const tonysark = gettonysark (avengers); // tonysark = 'tony stark' // output tonysark: tonysark; Karena _short-circuit_ Circuit_Logical Operator JavaScript (&& dan ||) mengembalikan nilai operan kedua berdasarkan nilai operan pertama, metode penulisan ini dapat mencapai efek yang diharapkan. Di sini, operan pertama adalah mendekonstruksi ekspresi penugasan dan menetapkan nilai ke RealName . RealName adalah operan kedua, jadi nilainya akhirnya dikembalikan.
Ini tidak optimal, tetapi dapat dicapai. Sambil mengejar kekurangan kode, Anda harus memperhatikan keterbacaan kode.
Meringkaskan
Artikel ini menjelaskan secara mendalam prinsip-prinsip utama penugasan mendekonstruksi. Dekonstruksi tidak hanya mengurangi jumlah kode Anda, tetapi juga secara fundamental mengubah cara Anda menyandikannya. Semakin banyak Anda menggunakannya, semakin banyak cara Anda dapat membentuk data dan fungsi, yang hampir tidak mungkin di masa lalu. Saya harap artikel ini akan membantu semua orang untuk belajar ES6.