Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah penyahbinaan es6
Dalam es6, pemusnahan ialah proses mengekstrak nilai daripada tatasusunan dan objek mengikut corak tertentu dan memberikan nilai kepada pembolehubah; ia adalah proses memecahkan keputusan data dan membahagikannya kepada bahagian yang lebih kecil , yang boleh Untuk mencapai tujuan memudahkan pengekstrakan maklumat yang lebih biasa ialah pemusnahan objek, pemusnahan tatasusunan dan pemusnahan bercampur.
Persekitaran pengendalian tutorial ini: sistem Windows 10, ECMAScript versi 6.0, komputer Dell G3.
pemusnahan: Ensiklopedia Baidu bermaksud penguraian struktur ES6 membolehkan anda mengekstrak nilai daripada tatasusunan dan objek dan menetapkan nilai kepada pembolehubah mengikut corak tertentu dipanggil Untuk memusnahkan.
Yang lebih biasa dalam pembangunan termasuk pemusnahan objek, pemusnahan tatasusunan dan pemusnahan campuran. Ini adalah proses memecahkan struktur data kepada bahagian yang lebih kecil untuk memudahkan pengekstrakan maklumat.
Pisahkan objek atau tatasusunan sedia ada satu demi satu untuk mengekstrak data yang anda perlukan. Ia adalah satu proses memecahkan struktur data dan membahagikannya kepada bahagian yang lebih kecil
ES6 menggunakan corak baharu untuk memadankan nilai yang anda ingin keluarkan tugasan Pemusnahan menggunakan corak ini. Corak akan memetakan struktur data yang anda sedang dekonstruk, dan hanya data yang sepadan dengan corak akan diekstrak.
Contoh pemusnahan objek
Kaedah tradisional untuk mendapatkan nilai dalam objek
let node = { type: 'Identifier', name: 'foo' } console.log(node.type) // Identifier console.log(node.foo) // foo
Gunakan pemusnahan
let node = { type: 'Identifier', name: 'foo' } let { type, name } = node console.log(type) // Identifier console.log(name) // foo
Jika nama pembolehubah tempatan yang ditentukan berada dalam objek tidak wujud, maka pembolehubah tempatan ini akan diberikan nilai yang tidak ditentukan
let { type, name, value } = node console.log(type) // Identifier console.log(name) // foo console.log(value) // undefined
Apabila atribut yang ditentukan tidak wujud, anda boleh menentukan sebarang nilai lalai
let { type, name, value = true } = node console.log(type) // Identifier console.log(name) // foo console.log(value) // true
untuk atribut yang tidak wujud Tentukan nama pembolehubah baharu untuk memusnahkan tugasan
let arr = { six: '男', age: 19 } let {six:newSix, age:newAge} = arr console.log(six, age) // six is not defined console.log(newSix, newAge) // 男 19
Adakah anda fikir ia pelik daripada tugasan objek tradisional mempunyai empat atribut di sebelah kiri dan nilai di sebelah kanan? Tetapi dalam kaedah pemusnahan, sebelah kanan ialah atribut dan sebelah kiri ialah nilai, jadi nama pembolehubah baharu berada di sebelah kanan.
Jika anda menggunakan let, var, atau const untuk memusnahkan objek, nilai objek yang dimusnahkan mestilah tidak wujud.
Apabila tugasan var, let, dan const tidak digunakan, pernyataan pemusnah perlu dibalut dengan ()
({type,name} = node);//{}在js中作为代码块,单独使用加等号会报错会报错
Pemusnahan objek bersarang
Apabila menyahbina objek dalam objek bersarang, kami akan terus menggunakan pendakap kerinting dalam tahap pertama memusnahkan untuk menggerudi ke peringkat seterusnya untuk mencari; ialah nod objek bersarang, kami mula-mula menyahbina lapisan pertama
let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } }
Kami dapat melihat bahawa kami sengaja mengganggu susunan atribut dalam {}, dan hasilnya masih dikeluarkan dengan betul, jadi kami boleh meneka. bahawa kaedah sepadan khusus harus berdasarkan nama Selaras dengan itu, perintah itu tidak ada kaitan dengannya.
let { loc, type, name } = node // {} Identifier fooTeruskan menyahbina lapisan kedua
Di sini kita juga boleh menetapkan permulaan kepada pembolehubah setempat tersuai baharu, dengan andaian kita menetapkannya kepada newStart
let { loc: { start }} = node; console.log(start.line); // 1 console.log(start.column); // 4
The ringkasan adalah seperti berikut:
let { loc: { start: newStart }} = node console.log(newStart.line) // 1 console.log(newStart.column) // 4Semua pengecam sebelum titik bertindih mewakili kedudukan dapatkan semula dalam objek, dan sebelah kanan ialah nama pembolehubah yang akan diberikan jika terdapat kurungan kerinting selepas titik bertindih, ini bermakna pembolehubah akhir untuk diberikan Nilai bersarang lebih dalam dalam objek. [Cadangan berkaitan:
tutorial video javascript
,bahagian hadapan web]
Atas ialah kandungan terperinci Apakah penyahbinaan es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!