Apakah maksud dekonstruksi dalam es6?

Dalam es6, pemusnahan merujuk kepada tindakan mengekstrak nilai daripada tatasusunan dan objek mengikut corak tertentu dan memberikan nilai kepada pembolehubah yang biasa termasuk struktur objek, pemusnahan tatasusunan dan pemusnahan campuran, iaitu sejenis pemusnahan data Proses memecahkan struktur kepada bahagian yang lebih kecil untuk memudahkan pengekstrakan maklumat.

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

Apakah maksud pemusnahan dalam es6?

pemusnahan: Ensiklopedia Baidu bermaksud penguraian struktur ES6 membolehkan mengekstrak nilai daripada tatasusunan dan objek dan memberikan nilai kepada pembolehubah mengikut corak tertentu adalah Ia dipanggil 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.

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 tidak wujud dalam objek, maka pembolehubah tempatan 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 untuk atribut yang tiada 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.

let { type, name, value = true } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // true

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 ()

let arr = {
  six: '男',
  age: 19
}
let {six:newSix, age:newAge} = arr
console.log(six, age) // six is not defined
console.log(newSix, newAge) // 男 19

({type, name} = node);//{} digunakan sebagai kod dalam blok js, menggunakan tanda sama sahaja akan melaporkan ralat

Pemusnahan objek bersarang

Memusnahkan dalam objek bersarang objek, kami akan terus menggunakan pendakap kerinting dalam tahap pertama pemusnahan untuk pergi lebih dalam dapat melihat bahawa kami menaip khas Walaupun susunan atribut dalam {} berantakan, hasilnya masih dikeluarkan dengan betul, jadi anda boleh meneka bahawa kaedah sepadan khusus harus berdasarkan nama, tanpa mengira susunannya.

Teruskan menyahbina lapisan kedua

Di sini kita juga boleh menetapkan permulaan kepada pembolehubah setempat tersuai baharu, dengan andaian kita menetapkannya kepada newStart

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
}

The ringkasan adalah seperti berikut:

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.

let { loc, type, name } = node // {} Identifier foo

Pemusnahan tatasusunan

let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 4

Pemusnahan tatasusunan menggunakan literal tatasusunan, dan semua operasi pemusnahan diselesaikan dalam tatasusunan, dan pemusnahan tatasusunan tidak perlu digunakan seperti sintaks literal objek. menamakan sifat objek.

let { loc: { start: newStart }} = node
console.log(newStart.line) // 1
console.log(newStart.column) // 4

Dalam sintaks pemusnah tatasusunan, kami memilih nilai mengikut kedudukannya dalam tatasusunan dan boleh menyimpannya dalam mana-mana pembolehubah Elemen yang tidak diisytiharkan secara eksplisit akan diabaikan secara langsung.

Pertukaran pembolehubah pemusnahan tatasusunan

Dalam ES5 tradisional, pertukaran nilai biasanya memerlukan pengenalan pembolehubah sementara ketiga sebagai transit, tetapi jika anda menggunakan sintaks penugasan pemusnahan tatasusunan, tidak perlu menambah pembolehubah tambahan.

Pemusnahan data bersarang

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, secondColor ] = colors
console.log(firstColor) // 'red'
console.log(secondColor) // 'green'

Nilai lalai

Anda juga boleh menambah nilai lalai untuk mana-mana kedudukan dalam tatasusunan dalam ungkapan tugasan memusnahkan tatasusunan atribut pada kedudukan yang ditentukan tidak wujud atau nilainya tidak ditentukan, nilai lalai digunakan

let [ , , thirdColor ] = colors
console.log(thirdColor) // 'blue'

Elemen tak tentu

... ialah operator spread tujuannya semasa mengendalikan tatasusunan Boleh digunakan untuk mengembangkan tatasusunan menjadi rentetan. Dalam pemusnahan tatasusunan, elemen selebihnya dalam tatasusunan boleh diberikan kepada pembolehubah tertentu menggunakan... sintaks.

// ES5中互换值：
 let a = 1, b = 2, tmp;
 tmp = a
 a = b
 b = tmp
 console.log(a, b) // 2, 1
 // ES6中互换值
 let a = 1, b = 2;
 [ a, b ] = [b, a]
 console.log(a, b) // 2, 1

Salinan tatasusunan

 let colors = [ 'red', [ 'green', 'lightgreen'], 'blue' ]
 let [ firstColor, [ secondColor, thirdColor ], fourthColor ] = colors
 console.log(firstColor) // red
console.log(secondColor) // green
console.log(thirdColor) // lightgreen
console.log(fourthColor) // blue

Dalam ES5, pembangun sering menggunakan kaedah concat() untuk mengklon tatasusunan

Niat reka bentuk asal kaedah concat() ialah Sambungkan dua tatasusunan. Jika tiada parameter diluluskan semasa memanggil, salinan fungsi semasa akan dikembalikan

let colors = [ 'red' ]
let [ firstColor, secondColor = 'green' ] = colors
console.log(firstColor) // red
console.log(secondColor) // green

Dalam ES6, matlamat yang sama boleh dicapai melalui sintaks elemen tak tentu

Dalam menjadi Dalam tatasusunan yang dimusnahkan, elemen tidak tentu mestilah entri terakhir Menambah koma kemudian akan menyebabkan atur cara membuang ralat sintaks.

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, ...restColors ] = colors
console.log(firstColosr) // 'red'
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"

Penyahbinaan Campuran

var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

Dalam kod di atas, objek err mengandungi ralat dan ralat ialah tatasusunan dan mengandungi objek baharu. , ekstrak mesej dalam objek. Kita boleh pisahkan berangan di atas dan dekonstruksinya langkah demi langkah:

let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

Mari kita lihat yang lebih rumit, selagi anda boleh mencari susunannya, ini masih sangat mudah untuk difahami .

Penggunaan sebenar - pemusnahan parameter biasanya digunakan apabila merangkum parameter fungsi, seperti yang ditunjukkan di bawah:

let err = {
    errors: [
        {
            msg: 'this is a message'
        },
        {
            title: 'this is a title'
        }
    ]
}

[Cadangan berkaitan:

video javascript Tutorial

,

let { errors } = err
let [ firstArr ] = errors
let { msg } = firstArr
console.log(msg) // 'this is a message'
也可以这样解构
let [ , { title }] = err.errors
console.log(title) // 'this is a title'
let [{ msg }] = err.errors
console.log(msg) // 'this is a message'

bahagian hadapan web

]

let node = {
    type: "Identifier",
    loc: {
      start: {
      line: 1,
      column: 1
       }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
  } = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

Atas ialah kandungan terperinci Apakah maksud dekonstruksi dalam es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!