JavaScriptで配列をコピー(複製)する方法を解説!
JavaScriptで配列をコピー(複製)する方法を解説します。またJavaScriptで配列をコピー(複製)する時に必要な知識である、参照渡しと値渡しの違いについても解説します。
JavaScriptで配列をコピー(複製)したい
JavaScriptで配列をコピー(複製)して、新たに元の配列と似た配列を作成したいということがあります。
ここではそのJavaScriptで配列をコピー(複製)する方法を紹介します。
ただ前提知識としてコピーする際に生じる「参照渡し」と「値渡し」について知っておく必要があるので、前もって解説します。
参照渡しとは
参照渡しとは、代入が行われる際に、値をそのまま渡すのではなく、参照先を渡すような仕様のことを指します。
たとえば、a = bという代入文の場合、aにbの値を代入するのではなく、aにbの参照先を渡すことで、aを指定した時に参照先をたどってbを取得します。
ですので、コピーして新たな変数に格納したものの値を変更すると、コピーされた元の変数の値も変わってしまいます。
オブジェクト型が参照渡しに当たります。ですので今回紹介する配列もこの参照渡しに当たります。
値渡しとは
値渡しはその値そのものの情報を別の変数に渡しています。
ですので参照渡しとは違って、コピーして新たな変数に格納したものの値を変更しても、コピーされた元の変数の値も変わりません。
プリミティブ型が値渡しに当たります。
プリミティブ型とは
- 数値型
- 文字列型
- ブーリアン型
- null型
- undefined型
JavaScriptで配列をコピー(複製)する方法
ではJavaScriptで配列をコピー(複製)する方法について解説します。
配列のコピーは参照渡しなのですが、値渡しでもコピーすることができるので、それぞれの方法について解説します。
配列を参照渡しでコピーする方法
ではサンプルコードを用いて参照渡しでコピーされていることを確認してみましょう。
このように参照渡しとなっているため、コピーして新たな変数に格納したものの値を変更すると、コピーされた元の変数の値も変わっていることが分かります。
ではサンプルコードの解説を行います。まず適当な配列を変数に格納します。
そして新たな変数に作った配列を格納します。ここではconst arr2 = arr1;
の部分です。
これで配列を参照渡しでコピーすることができました。
次にコピーした方の配列の値を変更してみます。
arr2[0] = "パイナップル";
の部分です。
最後にコピーされた方の配列の値を確認してみると、元の配列の値と比べて変わっていることが分かります。
配列を値渡しでコピーする方法
配列を値渡しでコピーするには、JavaScriptのconcat()
メソッドもしくはslice()
メソッドを用います。
では二つのメソッドを用いて、サンプルコードを作成したので、実際の挙動を確認してみましょう。
このように値渡しとなっているため、コピーして新たな変数に格納したものの値を変更しても、コピーされた元の変数の値も変っていません。
ではサンプルコードの解説を行います。
参照渡しの時と違う点は、コピーする際にconcat()
メソッド、もしくはslice()
メソッドを用いているかどうかという点のみとなります。
ここではconst arr2 = arr1.concat();
、const arr4 = arr3.slice();
の部分です。
他に関しては配列を参照渡しでコピーする方法での解説と同じになります。
まとめ
いかがでしたでしょうか?
配列をコピーする際、参照渡しだと不便が生じてしまうことがあります。
そんな時に値渡しでコピーする方法を覚えておくと非常に便利です。
ここで紹介した方法を覚えて、ぜひ使ってみてください。