突然変異は、JavaScriptの世界でかなり頻繁に聞くものですが、それらは正確に何であり、それらは邪悪なものですか？ この記事では、さまざまな割り当てと突然変異の概念を取り上げ、開発者にとって真の痛みになる理由を確認します。問題を回避するためにそれらを管理する方法、できるだけ少なく使用する方法、およびコードを予測可能に保つ方法について説明します。
このトピックをより詳細に調べたい場合、または最新のJavaScriptでスピードを上げたい場合は、新しい本の最初の章をチェックして、JavaScriptでコードを無料でコードします。 >
価値のあるタイプの基本に戻ることから始めましょう…キーテイクアウト
javascript値は、プリミティブ（不変）およびオブジェクト（可変）に分類され、割り当てと突然変異がどのように振る舞うかに影響を与えます。 「const」を使用しても、オブジェクトへの突然変異を防ぐことはできません。変数の異なる値またはオブジェクトへの再割り当てのみを防ぎます。
`let`キーワードは再割り当てを可能にし、コード全体で値を変更する必要がある変数に適しています。シンボル - 別のシンボルと衝突しないことが保証されているユニークなトークン
番号3を別の変数に割り当てると、クマと同じ値を参照しています。
<span>const bears = 3; </span>
等式演算子は、両方の変数が同じ値を参照している場合にtrueを返します。 オブジェクトを使用するときのいくつかのゴッチャス
<span>let musketeers = 3; </span>
以前の例では、プリミティブ値が変数に割り当てられていることが示されました。オブジェクトを割り当てるときにも同じプロセスが使用されます：
bears <span>=== musketeers </span><span><< true </span>
ただし、変数にオブジェクトを割り当てるときの大きな違いは、別のオブジェクトに別の変数に別のオブジェクトを割り当てると、両方のオブジェクトリテラルがまったく同じように見える場合でも、まったく異なるオブジェクトを参照することです。たとえば、以下の割り当ては、変数TMNT（Teenage Mutant Ninja Turtles）が変数Ghostbustersと同じオブジェクトを参照しているように見えます。
変数がゴーストバスターズとTMNTが同じオブジェクトを参照しているように見えますが、実際には、厳密な平等演算子に確認するかどうかを確認できるように、両方とも完全に異なるオブジェクトを参照しています。
<span>const ghostbusters = { number: 4 };
</span>constキーワードがES6で導入されたとき、多くの人々は、定数がJavaScriptに導入されたと誤って信じていましたが、そうではありませんでした。このキーワードの名前は少し誤解を招きます。
<span>let tmnt = { number: 4 };
</span> constで宣言された変数は、別の値に再割り当てすることはできません。これは、プリミティブ値とオブジェクトにも当てはまります。たとえば、変数ベアは前のセクションでconstを使用して宣言されたため、別の値を割り当てることはできません。数字2を可変ベアーズに割り当てようとすると、エラーが発生します。
let
を使用した変数再割り当てキーワードLETを使用して変数を宣言する場合、コードの後で異なる値を参照するように再割り当てすることができます。たとえば、LETを使用して可変銃士を宣言したため、マスケット銃が参照する値を変更できます。ダルタニャンが銃士に加わった場合、その数は4に増加します：
ghostbusters <span>=== tmnt </span><span><< false </span>
これは、変数を宣言するために使用されたために行うことができます。銃士が好きなように何度も参照する価値を変更することができます。
変数TMNTもLETを使用して宣言されたため、別のオブジェクト（または必要に応じて完全に異なるタイプ）を参照するように再割り当てすることもできます。
<span>const bears = 3; </span>
;番号プロパティを5に変更しただけではありません 要約すると、constを使用して変数を宣言する場合、その値を再割り当てすることはできず、最初に割り当てられたのと同じプリミティブ値またはオブジェクトを常に参照します。 LETを使用して変数を宣言すると、プログラムの後半でその値を何度も再割り当てすることができます。 constをできるだけ頻繁に使用することは、一般的に良い練習と見なされます。変数の値は一定であり、コードがより一貫性があり、予測可能であり、エラーやバグの傾向が低くなることを意味するためです。 参照による変数割り当て
ネイティブJavaScriptでは、変数にのみ値を割り当てることができます。できるように見える場合でも、変数を別の変数を参照するように割り当てることはできません。たとえば、stoogesの数はマスケット銃の数と同じであるため、次のように変数のムスケット銃と同じ値を参照するように変数Stoogesを割り当てることができます。これは、以下の図に示すように、可変のストーグが可変銃士を参照しているように見えます。
<span>let musketeers = 3; </span>
突然変異
値は、変更できる場合は
と言われています。それだけがあります：a
突然変異は、値の特性を変更する行為です。JavaScriptのすべてのプリミティブ値は、
不変です：それらのプロパティを変更することはできません。たとえば、文字列「ケーキ」を可変食品に割り当てると、そのプロパティを変更できないことがわかります。
最初の文字を「f」に変更しようとすると、変更されたように見えます。<span>const bears = 3; </span>
しかし、変数の値を見ると、実際には何も変わっていないことがわかります。
<span>let musketeers = 3; </span>
bears <span>=== musketeers </span><span><< true </span>
これは、letの代わりにconstを使用して変数を宣言することとは関係ないことに注意してください。 LETを使用していれば、食べ物を設定して別の文字列を参照することができますが、そのプロパティを変更することはできません。プリミティブデータ型のプロパティを変更することは不可能です。 JavaScriptの変動とオブジェクト
<span>const ghostbusters = { number: 4 };
</span>constを使用して可変食品を宣言したという事実にもかかわらず、この変更は依然として発生したことに注意してください。これは、const
<span>let tmnt = { number: 4 };
</span>。 配列の長さプロパティを変更することもできます。
オブジェクトリテラルに変数を割り当てると、変数が同じように見える場合でも、まったく異なるオブジェクトを参照することを忘れないでください。
ghostbusters <span>=== tmnt </span><span><< false </span>
しかし、変数vantastic4を別の変数に割り当てると、両方とも
同じオブジェクトを参照します：
bears <span>= 2; </span><span><< TypeError: Attempted to assign to readonly property. </span>
ghostbusters <span>= {number: 5};
</span><span>TypeError: Attempted to assign to readonly property.
</span>これは、両方の変数が同じ
変数の両方で見られるため、これは重要です。 だから、スパイダーマンがファンタスティックフォーに参加した場合、オブジェクトの数値値を更新する可能性があります：
musketeers <span>= 4; </span>
これは私たちに問題を引き起こします。なぜなら、TMNTの数値も変化するからです。
<span>const bears = 3; </span>
これは、JavaScriptの重要な概念を強調しています。オブジェクトが参照によってコピーされ、その後変異した場合、変異はそのオブジェクトを参照する他の変数に影響します。これにより、意図しない副作用や追跡が困難なバグにつながる可能性があります。
救助へのスプレッドオペレーター！
スプレッド演算子は、ES2015の配列と文字列およびES2018のオブジェクトに導入されました。これにより、元のオブジェクトを参照することなく、オブジェクトの浅いコピーを簡単に作成できます。
以下の例は、TMNTオブジェクトのコピーを参照するように変数Fantastic4を設定する方法を示しています。このコピーはTMNTオブジェクトとまったく同じですが、Fantasty4はまったく新しいオブジェクトを参照します。これは、変数の名前をオブジェクト内にコピーすることによって行われます。
ここで実際に行ったのは、変数vantasty4をリテラルに新しいオブジェクトに割り当て、スプレッド演算子を使用して、TMNT変数によって参照されるオブジェクトのすべての列挙可能なプロパティをコピーします。これらのプロパティは値であるため、参照ではなく値によってFantastic4オブジェクトにコピーされます。
<span>let musketeers = 3; </span>
どちらのオブジェクトに加えられた変更も他のオブジェクトに影響しません。たとえば、Fantastic4変数の番号プロパティを5に更新すると、TMNT変数には影響しません。
スプレッドオペレーターには、オブジェクトのコピーを作成し、単一のコードで新しいオブジェクトに変更を加えるために使用できる有用なショートカット表記もあります。 たとえば、
ティーンエイジミュータントニンジャカメをモデル化するオブジェクトを作成したかったとします。最初のタートルオブジェクトを作成し、可変レオナルドを割り当てることができます：bears <span>=== musketeers </span><span><< true </span>
他のカメにはすべて、各カメで異なる武器と色の特性を除いて、同じ特性があります。レオナルドがスプレッドオペレーターを使用して参照しているオブジェクトのコピーを作成し、次のように武器と色の特性を変更することは理にかなっています。
スプレッドオブジェクトへの参照後に変更するプロパティを追加することにより、これを1行で実行できます。これが変数の新しいオブジェクトを作成するコードです。ドナテロとラファエル：
<span>const bears = 3; </span>
この方法でスプレッド演算子を使用すると、オブジェクトの浅いコピーのみが作成されることに注意してください。深いコピーを作成するには、これを再帰的に行うか、ライブラリを使用する必要があります。個人的には、オブジェクトを可能な限り浅く保つようにすることをお勧めします。
突然変異は評判が悪いが、必ずしもそれ自体が悪いわけではない。実際、動的なWebアプリを構築している場合は、ある時点で変更する必要があります。それは文字通り「ダイナミック」という言葉の意味です！これは、コードのどこかにいくつかの突然変異が必要であることを意味します。そうは言っても、突然変異が少ないほど、コードがより予測可能になり、維持が容易になり、バグが発生する可能性が低くなります。
特に有毒な組み合わせは、参照と突然変異によってコピーしています。これは、副作用やバグにつながる可能性があります。コード内の別の変数によって参照されるオブジェクトを変異させると、追跡が難しい可能性のある多くの問題を引き起こす可能性があります。重要なのは、変異の使用を本質的に最小限に抑え、どのオブジェクトが変異しているかを追跡することです。
機能的なプログラミングでは、純粋な機能は副作用を引き起こさないものであり、突然変異は副作用の最大の原因の1つです。ゴールデンルールは、参照によってオブジェクトをコピーすることを避けることです。別のオブジェクトをコピーする場合は、スプレッドオペレーターを使用してから、コピーを作成した直後に突然変異を行います。
次に、JavaScriptの配列変異を調べます。
現代のJavaScriptを使用してスピードを上げたい場合は、私の新しい本をJavaScriptでコードすることを忘れないでください。最初の章を無料で読むことができます。ご質問やコメントがある場合は、Twitterでご連絡ください！ JavaScript変数の割り当てと突然変異に関するよくある質問（FAQ）
javascriptの変数割り当てと変異の違いは何ですか？javascriptでは、変数割り当ては変数に値を割り当てるプロセスを指します。たとえば、x = 5とします。ここでは、値5を変数xに割り当てています。一方、突然変異とは、既存の変数の値を変更するプロセスを指します。たとえば、後でx = 10を記述した場合。値を5から10に変更することにより、変数Xを変異させていますMutationObserver APIは、開発者にDOMの変化に反応する方法を提供します。ドキュメントの変更に反応するための一般的で効率的で堅牢なAPIを提供するように設計されています。閉鎖とは、独自の範囲、外部関数の範囲、およびグローバル範囲にアクセスできる関数です。変数が閉鎖内で割り当てられたり変異したりすると、変数が閉鎖の範囲で宣言されたのか外側のスコープで宣言されたかによって、外部スコープの変数の値に影響を与える可能性があります。 javascriptのvar、let、およびconstの間で？ VARは関数スコープであり、関数の外部で宣言されている場合、グローバルにスコープされます。 letとconstはブロックスコープです。つまり、それらは宣言されているブロック内にのみ存在します。Letとconstの違いは、letが再割り当てを可能にすることです。非同期プログラミングのコンテキストでは、
以上がJavaScriptの可変割り当てと突然変異のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
