JavaScriptで配列をコピー後に値変更した際、元の配列の値も変更される点を解消する方法
JavaScriptで配列をコピー後に値変更した際、元の配列の値も変更されてしまう。「const array1 = array2」のようにコピーすると配列の中身が入るわけではなく、インスタンスを参照するアドレスが入るため書き換わってしまう模様。スプレッド構文というもので対応できるようなので以下に実装方法をメモ。
ソースコード
NGケース
const test_array1 = [100, 200]; const test_array2 = test_array1; test_array2[0] = 300; console.log(test_array1); //Array [ 300, 200 ] console.log(test_array2); //Array [ 300, 200 ]
感覚的にはtest_array2のみ書き換わりそうだけどtest_array1も書き換わるというNGケース。
OKケース
const test_array1 = [100, 200]; const test_array2 = [...test_array1]; test_array2[0] = 300; console.log(test_array1); //Array [ 100, 200 ] console.log(test_array2); //Array [ 300, 200 ]
test_array2のみ正常に書き換わった点が確認できる。
スプレッド構文
リファレンス
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax
使いどころ
今回のような配列のコピー以外では以下参考サイトが分かりやすい。
https://zenn.dev/robon/articles/4dd535ecb71d27
https://qiita.com/Nossa/items/e6f503cbb95c8e6967f8
所感
スプレッド構文について使いどころがイマイチ分からず、またあまり見慣れない構文のため敬遠していたが、今回のようなピンポイントな使いどころが分かったのは勉強になった。
関連記事
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...
-
-
Leafletで「Leaflet.markercluster」プラグインを導入してマーカークラスタ機能を追加する方法
LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...
-
-
jQueryのloadメソッドでファイル(ページ)を呼び出す
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...
-
-
HTMLのカスタムデータ属性をjQueryで取得する際はキャッシュに注意する
ASPを使用したサイトでHTMLのカスタムデータ属性を取得し色々処理したかったん ...
-
-
leaflet.jsとOSMでマーカーの画像をそれぞれ指定する
leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...