JavaScriptで配列をコピー(複製)する方法を解説!

JavaScriptで配列をコピー(複製)する方法を解説します。またJavaScriptで配列をコピー(複製)する時に必要な知識である、参照渡しと値渡しの違いについても解説します。

コンテンツ [表示]

  1. 1JavaScriptで配列をコピー(複製)したい
  2. 1.1参照渡しとは
  3. 1.2値渡しとは
  4. 2JavaScriptで配列をコピー(複製)する方法
  5. 2.1配列を参照渡しでコピーする方法
  6. 2.2配列を値渡しでコピーする方法
  7. 3まとめ

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();の部分です。

他に関しては配列を参照渡しでコピーする方法での解説と同じになります。

まとめ

いかがでしたでしょうか?

配列をコピーする際、参照渡しだと不便が生じてしまうことがあります。
そんな時に値渡しでコピーする方法を覚えておくと非常に便利です。

ここで紹介した方法を覚えて、ぜひ使ってみてください。

GeekHive採用サイト

関連記事