Rumah  >  Artikel  >  hujung hadapan web  >  Apakah penyahbinaan es6

Apakah penyahbinaan es6

WBOY
WBOYasal
2022-03-30 15:44:252292semak imbas

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.

Apakah penyahbinaan es6

Persekitaran pengendalian tutorial ini: sistem Windows 10, ECMAScript versi 6.0, komputer Dell G3.

Apakah pemusnahan dalam es6

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 foo
Teruskan 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) // 4
Semua 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn