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) // trueJika 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 newStartlet 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 fooPemusnahan tatasusunan
let { loc: { start }} = node; console.log(start.line); // 1 console.log(start.column); // 4Pemusnahan 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) // 4Dalam 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 bersaranglet colors = [ 'red', 'green', 'blue' ] let [ firstColor, secondColor ] = colors console.log(firstColor) // 'red' console.log(secondColor) // 'green'Nilai lalaiAnda 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, 1Salinan 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 dikembalikanlet 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!

UseState membolehkan keadaan ditambah dalam komponen fungsi kerana ia menghilangkan halangan antara komponen kelas dan komponen fungsi, menjadikannya sama kuat. Langkah -langkah untuk menggunakan UseState termasuk: 1) mengimport cangkuk UseState, 2) memulakan keadaan, 3) menggunakan keadaan dan mengemas kini fungsi tersebut.

Fokus pandangan React menguruskan keadaan aplikasi yang kompleks dengan memperkenalkan alat dan corak tambahan. 1) React sendiri tidak mengendalikan pengurusan negeri, dan memberi tumpuan kepada pemetaan negara kepada pandangan. 2) Aplikasi kompleks perlu menggunakan Redux, Mobx, atau ContextAPI untuk merumuskan keadaan, menjadikan pengurusan lebih berstruktur dan boleh diramal.

IntegratingReactwithotherlibrariesandframeworkscanenhanceapplicationcapabilitiesbyleveragingdifferenttools'strengths.BenefitsincludestreamlinedstatemanagementwithReduxandrobustbackendintegrationwithDjango,butchallengesinvolveincreasedcomplexity,perfo

Tomakereactapplicationsmoreactable, ikutiTheSesteps: 1) usesemantichtmlelementsinjsxforbettervigationandseo.2) pelaksanaanfocusmanagementforkoBeybeyboards, terutamaInmodals

SEO untuk aplikasi React boleh diselesaikan dengan kaedah berikut: 1. Melaksanakan rendering sisi pelayan (SSR), seperti menggunakan Next.js; 2. Gunakan rendering dinamik, seperti halaman pra-rendering melalui prerender.io atau dalang; 3. Mengoptimumkan prestasi aplikasi dan gunakan rumah api untuk audit prestasi.

ReactnativeischosenformobiledevelopmentbecauseitallowsdeveloperstowritecodeonceanddeployitonmultiplePlatforms, reducingdevelopmentTimeandcosts.itoffersnear-nativeperformance, andleverageSexistingWebdevelskills

Kemas kini yang betul dari UseState () Negeri dalam React memerlukan pemahaman butir -butir pengurusan negeri. 1) Gunakan kemas kini berfungsi untuk mengendalikan kemas kini tak segerak. 2) Buat objek atau array negeri baru untuk mengelakkan secara langsung mengubah keadaan. 3) Gunakan objek negara tunggal untuk menguruskan borang kompleks. 4) Gunakan teknologi anti-goncang untuk mengoptimumkan prestasi. Kaedah ini boleh membantu pemaju mengelakkan masalah biasa dan menulis aplikasi reaksi yang lebih mantap.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
