Panduan untuk Tugasan dan Mutasi Variabel dalam JavaScript

Mutasi adalah sesuatu yang anda dengar tentang cukup kerap di dunia JavaScript, tetapi apa sebenarnya mereka, dan adakah mereka jahat seperti yang mereka buat?

Dalam artikel ini, kita akan menutup konsep tugasan dan mutasi yang berubah -ubah dan melihat mengapa - bersama -sama - mereka boleh menjadi kesakitan yang nyata bagi pemaju. Kami akan melihat cara menguruskannya untuk mengelakkan masalah, cara menggunakan seberapa sedikit yang mungkin, dan bagaimana untuk memastikan kod anda dapat diramalkan.

Jika anda ingin meneroka topik ini dengan lebih terperinci, atau bangun untuk mempercepatkan dengan JavaScript moden, lihat bab pertama buku baru saya belajar kod dengan JavaScript secara percuma. > mari kita mulakan dengan kembali ke asas -asas jenis nilai ...

Takeaways Key

Nilai JavaScript dikategorikan kepada primitif (tidak berubah) dan objek (mutable), memberi kesan kepada bagaimana tugasan dan mutasi berubah.

menggunakan `const` tidak menghalang mutasi ke objek; Ia hanya menghalang penugasan semula pembolehubah kepada nilai atau objek yang berbeza.
kata kunci `let` membolehkan penugasan semula, menjadikannya sesuai untuk pembolehubah yang perlu mengubah nilai di seluruh kod.
Pengendali penyebaran (`...`) adalah penting untuk mewujudkan salinan objek cetek, dengan itu mengelakkan isu-isu yang berkaitan dengan mutasi dalam objek yang disalin demi rujukan.
mutasi tidak sememangnya buruk tetapi harus diuruskan dengan teliti untuk mengekalkan ramalan kod dan meminimumkan pepijat, terutama dalam aplikasi web yang dinamik.
• Jenis data

Setiap nilai dalam JavaScript adalah sama ada nilai primitif atau objek. Terdapat tujuh jenis data primitif yang berbeza:

nombor, seperti 3, 0, -4, 0.625

rentetan, seperti 'hello', "dunia", `hi`, ''
booleans, benar dan palsu
null
• Undefined
• Simbol - Tanda unik yang dijamin tidak pernah bertembung dengan simbol lain
• bigint - untuk berurusan dengan nilai integer besar
Apa -apa yang bukan nilai primitif adalah objek, termasuk tatasusunan, tarikh, ungkapan biasa dan, tentu saja, objek literal. Fungsi adalah jenis objek khas. Mereka pasti objek, kerana mereka mempunyai sifat dan kaedah, tetapi mereka juga dapat dipanggil.
Tugasan Variabel

Tugasan Variabel adalah salah satu perkara pertama yang anda pelajari dalam pengekodan. Sebagai contoh, ini adalah bagaimana kita akan menetapkan nombor 3 kepada beruang pembolehubah:

Metafora biasa untuk pembolehubah adalah salah satu kotak dengan label yang mempunyai nilai yang diletakkan di dalamnya. Contoh di atas akan digambarkan sebagai kotak yang mengandungi label "beruang" dengan nilai 3 yang diletakkan di dalamnya.

<span>const bears = 3;
</span>

cara pemikiran alternatif tentang apa yang berlaku adalah sebagai rujukan, yang memetakan label beruang kepada nilai 3:

Jika saya memberikan nombor 3 kepada pemboleh ubah lain, ia merujuk nilai yang sama seperti beruang:

<span>const bears = 3;
</span>

pembolehubah beruang dan musketeers kedua -duanya merujuk nilai primitif yang sama 3. Kita boleh mengesahkan ini menggunakan pengendali kesaksamaan yang ketat, ===:

Pengendali kesamaan mengembalikan benar jika kedua -dua pembolehubah merujuk nilai yang sama.

<span>let musketeers = 3;
</span>

beberapa gotchas ketika bekerja dengan objek

Contoh sebelumnya menunjukkan nilai primitif yang diberikan kepada pembolehubah. Proses yang sama digunakan semasa memberikan objek:

Tugasan ini bermaksud bahawa Ghostbusters Variable merujuk objek:

bears <span>=== musketeers
</span><span><< true
</span>

Perbezaan besar apabila memberikan objek kepada pembolehubah, bagaimanapun, adalah bahawa jika anda menetapkan objek lain yang literal kepada pembolehubah lain, ia akan merujuk objek yang sama sekali berbeza - walaupun kedua -dua objek literal kelihatan sama! Sebagai contoh, tugasan di bawah kelihatan seperti pembolehubah TMNT (Teenage Mutant Ninja Turtles) merujuk objek yang sama seperti Ghostbusters Variable:

Walaupun pembolehubah Ghostbusters dan TMNT kelihatan seperti mereka merujuk objek yang sama, mereka sebenarnya merujuk objek yang sama sekali berbeza, seperti yang dapat kita lihat jika kita menyemak dengan pengendali kesamaan yang ketat:

<span>const ghostbusters = { number: 4 };
</span>

<span>let tmnt = { number: 4 };
</span>

Pembolehubah Variable

Apabila kata kunci Const diperkenalkan di ES6, ramai orang tersilap percaya bahawa pemalar telah diperkenalkan kepada JavaScript, tetapi ini tidak berlaku. Nama kata kunci ini sedikit mengelirukan.

Mana -mana pembolehubah yang diisytiharkan dengan const tidak boleh ditugaskan semula ke nilai lain. Ini berlaku untuk nilai dan objek primitif. Sebagai contoh, beruang pembolehubah diisytiharkan menggunakan const di bahagian sebelumnya, jadi ia tidak boleh mempunyai nilai lain yang diberikan kepadanya. Jika kita cuba menetapkan nombor 2 kepada beruang pembolehubah, kita mendapat ralat:

Rujukan kepada nombor 3 ditetapkan dan pemboleh ubah beruang tidak dapat ditugaskan semula nilai lain.

sama berlaku untuk objek. Jika kita cuba memberikan objek yang berbeza kepada Ghostbusters yang berubah -ubah, kita mendapat ralat yang sama:

ghostbusters <span>=== tmnt
</span><span><< false
</span>

penugasan semula variabel menggunakan LET

Apabila kata kunci LET digunakan untuk mengisytiharkan pembolehubah, ia boleh ditugaskan semula untuk merujuk nilai yang berbeza di kemudian hari dalam kod kami. Sebagai contoh, kami mengisytiharkan musketeer yang berubah -ubah menggunakan LET, jadi kami boleh mengubah nilai yang rujukan Musketeers. Jika D'Artagnan menyertai Musketeers, bilangan mereka akan meningkat kepada 4:

bears <span>= 2;
</span><span><< TypeError: Attempted to assign to readonly property.
</span>

Ini boleh dilakukan kerana LET digunakan untuk mengisytiharkan pembolehubah. Kita boleh mengubah nilai yang rujukan musketeers seberapa banyak yang kita suka.

pembolehubah TMNT juga diisytiharkan menggunakan LET, jadi ia juga boleh ditugaskan semula untuk merujuk objek lain (atau jenis yang berbeza sepenuhnya jika kita suka):

<span>const bears = 3;
</span>

Perhatikan bahawa pembolehubah TMNT kini merujuk kepada objek objek yang sama sekali berbeza ; Kami tidak hanya menukar harta nombor kepada 5.

Ringkasnya, jika anda mengisytiharkan pembolehubah menggunakan Const, nilainya tidak boleh ditugaskan semula dan akan sentiasa merujuk nilai primitif atau objek yang sama yang ditugaskan pada asalnya. Sekiranya anda mengisytiharkan pembolehubah menggunakan LET, nilainya boleh ditugaskan semula sebanyak yang diperlukan kemudian dalam program.

menggunakan const sekerap mungkin secara amnya dianggap amalan yang baik, kerana ia bermakna bahawa nilai pembolehubah tetap malar dan kod itu lebih konsisten dan boleh diramal, menjadikannya kurang terdedah kepada kesilapan dan pepijat.

tugasan pembolehubah dengan rujukan

Dalam JavaScript asli, anda hanya boleh memberikan nilai kepada pembolehubah. Anda tidak boleh memberikan pembolehubah untuk merujuk pembolehubah lain, walaupun kelihatan seperti anda boleh. Sebagai contoh, bilangan stooges adalah sama dengan bilangan musketeers, jadi kita boleh menetapkan stooges berubah -ubah untuk merujuk nilai yang sama dengan musketeer yang berubah -ubah menggunakan yang berikut:

Ini kelihatan seperti Stooges yang berubah -ubah merujuk kepada musketeer yang berubah -ubah, seperti yang ditunjukkan dalam rajah di bawah:

<span>let musketeers = 3;
</span>

Walau bagaimanapun, ini adalah mustahil dalam JavaScript asli: pembolehubah hanya boleh merujuk nilai sebenar; Ia tidak boleh merujuk pembolehubah lain. Apa yang sebenarnya berlaku apabila anda membuat tugasan seperti ini ialah pembolehubah di sebelah kiri tugasan akan merujuk nilai pembolehubah pada rujukan yang betul, jadi stooges pembolehubah akan merujuk nilai yang sama seperti pembolehubah musketeers, yang merupakan nombor 3 . Sebaik sahaja tugasan ini telah dibuat, pembolehubah Stooges tidak disambungkan kepada pembolehubah Musketeers sama sekali.

Ini bermakna jika D'Artagnan menyertai musketeers dan kami menetapkan nilai musketeers kepada 4, nilai stooges akan kekal sebagai 3. Malah, kerana kami mengisytiharkan pembolehubah Stooges menggunakan Const, kami tidak dapat menetapkan ia kepada sebarang nilai baru; ia akan sentiasa 3.

Ringkasnya: Jika anda mengisytiharkan pembolehubah menggunakan Const dan tetapkannya kepada nilai primitif, walaupun melalui rujukan kepada pembolehubah lain, maka nilainya tidak dapat berubah. Ini baik untuk kod anda, kerana ia bermakna ia akan lebih konsisten dan boleh diramal.

Mutasi

Nilai dikatakan

Mutable

jika ia boleh diubah. Itu sahaja yang ada: A

mutasi

adalah tindakan mengubah sifat nilai.

Semua nilai primitif dalam JavaScript adalah tidak berubah : Anda tidak boleh mengubah sifat mereka - pernah. Sebagai contoh, jika kita menetapkan "kek" rentetan kepada makanan yang berubah -ubah, kita dapat melihat bahawa kita tidak boleh mengubah mana -mana sifatnya:

<span>const bears = 3;
</span>

Jika kita cuba menukar huruf pertama kepada "f", nampaknya ia telah berubah:

<span>let musketeers = 3;
</span>

Tetapi jika kita melihat nilai pembolehubah, kita melihat bahawa tiada apa yang sebenarnya berubah:

bears <span>=== musketeers
</span><span><< true
</span>

Perkara yang sama berlaku jika kita cuba menukar harta panjang:

<span>const ghostbusters = { number: 4 };
</span>

Walaupun nilai pulangan menyiratkan bahawa harta panjang telah diubah, pemeriksaan cepat menunjukkan bahawa ia tidak:

<span>let tmnt = { number: 4 };
</span>

Perhatikan bahawa ini tidak ada kaitan dengan mengisytiharkan pembolehubah menggunakan const dan bukannya. Sekiranya kami menggunakan LET, kami boleh menetapkan makanan untuk merujuk rentetan lain, tetapi kami tidak dapat mengubah mana -mana sifatnya. Tidak mustahil untuk mengubah sifat -sifat jenis data primitif kerana mereka tidak berubah .

mutabiliti dan objek dalam javascript

Sebaliknya, semua objek dalam JavaScript boleh berubah, yang bermaksud bahawa sifat mereka boleh diubah, walaupun mereka diisytiharkan menggunakan const (ingat biarkan dan const hanya mengawal sama ada atau tidak pembolehubah boleh ditugaskan semula dan tidak ada kaitan mutabiliti). Sebagai contoh, kita boleh menukar item pertama array menggunakan kod berikut:

ghostbusters <span>=== tmnt
</span><span><< false
</span>

Perhatikan bahawa perubahan ini masih berlaku, walaupun pada hakikatnya kami mengisytiharkan makanan yang berubah -ubah menggunakan Const. Ini menunjukkan bahawa menggunakan const tidak menghentikan objek daripada bermutasi .

kita juga boleh menukar harta panjang array, walaupun ia telah diisytiharkan menggunakan const:

bears <span>= 2;
</span><span><< TypeError: Attempted to assign to readonly property.
</span>

Menyalin dengan rujukan

ingat bahawa apabila kita menetapkan pembolehubah untuk membantah literals, pembolehubah akan merujuk objek yang sama sekali berbeza, walaupun mereka kelihatan sama:

ghostbusters <span>= {number: 5};
</span><span>TypeError: Attempted to assign to readonly property.
</span>

Tetapi jika kita menetapkan pembolehubah Fantastic4 kepada pembolehubah lain, mereka akan merujuk objek

sama :

musketeers <span>= 4;
</span>

Ini memberikan Variable Fantastic4 untuk merujuk

objek yang sama bahawa rujukan TMNT yang berubah -ubah, bukannya objek yang sama sekali berbeza.

Ini sering dirujuk sebagai penyalinan dengan rujukan, kerana kedua -dua pembolehubah ditugaskan untuk merujuk objek

sama

. Ini penting, kerana sebarang mutasi yang dibuat untuk objek ini akan dilihat dalam

kedua -dua

pembolehubah. Jadi, jika Spider-Man menyertai Fantastic Four, kami mungkin mengemas kini nilai nombor dalam objek:

Ini adalah mutasi, kerana kami telah menukar harta nombor dan bukannya menetapkan Fantastic4 untuk merujuk objek baru.

tmnt <span>= {number: 5};
</span>

Ini menyebabkan kita menjadi masalah, kerana harta bilangan TMNT juga akan berubah, mungkin tanpa kita menyedari:

<span>const bears = 3;
</span>

Ini kerana kedua -dua TMNT dan Fantastic4 merujuk objek yang sama, jadi sebarang mutasi yang dibuat sama ada TMNT atau Fantastic4 akan menjejaskan kedua -dua mereka.

Ini menyoroti konsep penting dalam JavaScript: Apabila objek disalin dengan rujukan dan kemudiannya bermutasi, mutasi akan menjejaskan mana -mana pembolehubah lain yang merujuk objek itu. Ini boleh membawa kepada kesan sampingan yang tidak diingini dan pepijat yang sukar untuk dijejaki.

pengendali penyebaran untuk menyelamat!

Jadi bagaimana anda membuat salinan objek tanpa membuat rujukan kepada objek asal? Jawapannya ialah menggunakan pengendali penyebaran!

Pengendali penyebaran diperkenalkan untuk tatasusunan dan rentetan dalam ES2015 dan untuk objek di ES2018. Ia membolehkan anda dengan mudah membuat salinan cetek objek tanpa membuat rujukan kepada objek asal.

Contoh di bawah menunjukkan bagaimana kami dapat menetapkan Variable Fantastic4 untuk merujuk salinan objek TMNT. Salinan ini akan sama seperti objek TMNT, tetapi Fantastic4 akan merujuk objek yang baru. Ini dilakukan dengan meletakkan nama pembolehubah untuk disalin di dalam objek literal dengan pengendali penyebaran di hadapannya:

<span>let musketeers = 3;
</span>

Apa yang telah kita lakukan di sini adalah menetapkan Variable Fantastic4 kepada objek baru literal dan kemudian menggunakan pengendali penyebaran untuk menyalin semua sifat yang boleh dibaca objek yang dirujuk oleh pembolehubah TMNT. Kerana sifat -sifat ini adalah nilai, mereka disalin ke objek Fantastic4 dengan nilai, dan bukannya dengan rujukan.

Sekarang apa -apa perubahan yang dibuat untuk sama ada objek tidak akan menjejaskan yang lain. Sebagai contoh, jika kita mengemas kini harta bilangan pembolehubah Fantastic4 kepada 5, ia tidak akan menjejaskan pembolehubah TMNT:

bears <span>=== musketeers
</span><span><< true
</span>

Pengendali penyebaran juga mempunyai notasi pintasan yang berguna yang boleh digunakan untuk membuat salinan objek dan kemudian membuat beberapa perubahan pada objek baru dalam satu baris kod.

Sebagai contoh, kita mahu membuat objek untuk memodelkan penyu ninja mutan remaja. Kami boleh membuat objek penyu pertama, dan menetapkan pembolehubah Leonardo kepadanya:

Penyu lain semua mempunyai sifat yang sama, kecuali sifat senjata dan warna, yang berbeza untuk setiap penyu. Adalah masuk akal untuk membuat salinan objek yang rujukan Leonardo, menggunakan pengendali penyebaran, dan kemudian menukar sifat senjata dan warna, seperti:

<span>const ghostbusters = { number: 4 };
</span>

kita boleh melakukan ini dalam satu baris dengan menambahkan sifat yang kita mahu ubah selepas rujukan kepada objek penyebaran. Inilah kod untuk membuat objek baru untuk pembolehubah Donatello dan Raphael:

<span>const bears = 3;
</span>

Perhatikan bahawa menggunakan pengendali penyebaran dengan cara ini hanya membuat salinan cetek objek. Untuk membuat salinan yang mendalam, anda perlu melakukan ini secara rekursif, atau menggunakan perpustakaan. Secara peribadi, saya akan menasihatkan bahawa anda cuba mengekalkan objek anda sebagai cetek.

Adakah mutasi buruk?

Dalam artikel ini, kami telah meliputi konsep -konsep tugasan dan mutasi yang berubah -ubah dan melihat mengapa - bersama -sama - mereka boleh menjadi kesakitan yang nyata bagi pemaju.

Mutasi mempunyai reputasi yang buruk, tetapi mereka tidak semestinya buruk dalam diri mereka sendiri. Malah, jika anda membina aplikasi web yang dinamik, ia mesti berubah pada satu ketika. Itulah makna perkataan "dinamik"! Ini bermakna perlu ada beberapa mutasi di suatu tempat di kod anda. Setelah mengatakan bahawa, mutasi yang lebih sedikit ada, lebih banyak yang dapat diramalkan kod anda akan menjadi, menjadikannya lebih mudah untuk mengekalkan dan kurang berkemungkinan untuk mengembangkan sebarang pepijat.

Gabungan toksik terutamanya menyalin dengan rujukan dan mutasi. Ini boleh menyebabkan kesan sampingan dan pepijat yang anda tidak sedar telah berlaku. Jika anda bermutasi objek yang dirujuk oleh pembolehubah lain dalam kod anda, ia boleh menyebabkan banyak masalah yang boleh menjadi sukar untuk dijejaki. Kuncinya adalah untuk mencuba dan meminimumkan penggunaan mutasi anda kepada yang penting dan menjejaki objek yang telah bermutasi.

Dalam pengaturcaraan berfungsi, fungsi tulen adalah salah satu yang tidak menyebabkan sebarang kesan sampingan, dan mutasi adalah salah satu penyebab utama kesan sampingan.

Peraturan emas adalah untuk mengelakkan menyalin sebarang objek dengan rujukan. Jika anda ingin menyalin objek lain, gunakan pengendali penyebaran dan kemudian buat sebarang mutasi dengan segera selepas membuat salinan.

Seterusnya, kami akan melihat mutasi array dalam JavaScript.

Jangan lupa untuk menyemak buku baru saya belajar kod dengan JavaScript jika anda ingin bangun untuk mempercepatkan dengan JavaScript moden. Anda boleh membaca bab pertama secara percuma. Dan sila hubungi di Twitter jika anda mempunyai sebarang pertanyaan atau komen!

Soalan Lazim (Soalan Lazim) Mengenai Tugasan dan Mutasi Variabel JavaScript

Apakah perbezaan antara tugasan dan mutasi yang berubah -ubah dalam JavaScript? Sebagai contoh, biarkan x = 5; Di sini, kami memberikan nilai 5 kepada pembolehubah x. Sebaliknya, mutasi merujuk kepada proses mengubah nilai pembolehubah yang sedia ada. Sebagai contoh, jika kita kemudian menulis x = 10; Kami bermutasi pembolehubah x dengan menukar nilainya dari 5 hingga 10.

Bagaimanakah JavaScript mengendalikan tugasan dan mutasi berubah secara berbeza untuk jenis data primitif dan bukan primitif? dan tatasusunan) berbeza ketika datang ke tugasan dan mutasi yang berubah -ubah. Untuk jenis data primitif, apabila anda memberikan pembolehubah, satu salinan nilai dibuat dan disimpan di lokasi memori baru. Walau bagaimanapun, untuk jenis data yang tidak primitif, apabila anda memberikan pembolehubah, kedua-dua pembolehubah menunjuk ke lokasi memori yang sama. Oleh itu, jika anda bermutasi satu pembolehubah, perubahan itu ditunjukkan dalam semua pembolehubah yang menunjuk ke lokasi memori itu.

lulus-demi-nilai dan lulus-demi-rujukan adalah dua cara yang JavaScript boleh lulus pembolehubah ke fungsi. Apabila JavaScript melepasi pembolehubah dengan nilai, ia mewujudkan satu salinan nilai pembolehubah dan melewati salinan yang ke fungsi. Sebarang perubahan yang dibuat kepada pembolehubah di dalam fungsi tidak menjejaskan pemboleh ubah asal. Walau bagaimanapun, apabila JavaScript melepasi pembolehubah dengan rujukan, ia meluluskan rujukan ke lokasi memori pembolehubah. Oleh itu, apa -apa perubahan yang dibuat kepada pembolehubah di dalam fungsi ini juga mempengaruhi pembolehubah asal. Salah satu cara ialah menggunakan kaedah objek.freeze (), yang menghalang sifat baru daripada ditambah ke objek, sifat sedia ada daripada dikeluarkan, dan menghalang perubahan kebolehpercayaan, konfigurasi, atau kebolehtelapan sifat yang ada. Cara lain ialah menggunakan kata kunci const apabila mengisytiharkan pembolehubah. Ini menghalang penugasan semula pembolehubah, tetapi ia tidak menghalang mutasi nilai pembolehubah jika nilai itu adalah objek atau array. 🎜> Dalam JavaScript, salinan cetek objek adalah salinan objek di mana nilai objek asal dan titik salinan ke lokasi memori yang sama untuk jenis data yang tidak primitif. Oleh itu, jika anda bermutasi salinan, objek asal juga bermutasi. Sebaliknya, salinan objek yang mendalam adalah salinan objek di mana nilai objek asal dan salinan tidak menunjuk ke lokasi memori yang sama. Oleh itu, jika anda bermutasi salinan, objek asal tidak bermutasi. Dalam JavaScript adalah menggunakan kaedah json.parse () dan json.stringify (). Kaedah json.stringify () menukarkan objek ke dalam rentetan json, dan kaedah json.parse () menukar rentetan json kembali ke objek. Ini mewujudkan objek baru yang merupakan salinan yang mendalam dari objek asal.

Apakah API MutationObserver dalam JavaScript? Ia direka untuk menyediakan API umum, cekap, dan teguh untuk bertindak balas terhadap perubahan dalam dokumen. Penutupan adalah fungsi yang mempunyai akses kepada skopnya sendiri, skop fungsi luar, dan skop global. Apabila pemboleh ubah diberikan atau bermutasi di dalam penutupan, ia boleh menjejaskan nilai pembolehubah dalam skop luar, bergantung kepada sama ada pemboleh ubah diisytiharkan dalam skop penutupan atau skop luar. Antara var, biarkan, dan const dalam javascript?

Dalam JavaScript, Var, LeT, dan const digunakan untuk mengisytiharkan pembolehubah. var berfungsi scoped, dan jika ia diisytiharkan di luar fungsi, ia secara global scoped. Let dan const blok scoped, bermakna mereka hanya wujud di dalam blok mereka diisytiharkan masuk. Perbezaan antara LET dan const adalah yang membolehkan pembentukan semula, sementara const tidak. Dalam konteks pengaturcaraan asynchronous?

Dalam JavaScript, pengaturcaraan asynchronous membolehkan banyak perkara berlaku pada masa yang sama. Apabila pemboleh ubah diberikan atau bermutasi dalam fungsi tak segerak, ia boleh membawa kepada hasil yang tidak dijangka jika bahagian lain kod bergantung pada nilai pembolehubah. Ini kerana tugasan atau mutasi yang berubah -ubah mungkin belum selesai sebelum bahagian lain kod dijalankan. Untuk mengendalikan ini, JavaScript menyediakan beberapa ciri, seperti janji dan async/menunggu, untuk membantu menguruskan kod asynchronous.

Atas ialah kandungan terperinci Panduan untuk Tugasan dan Mutasi Variabel dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!