JavaScriptで配列をコピーする

ここでは、JavaScript における配列のコピーについて説明します。JavaScriptの配列はオブジェクト型であり、単に代入を行うだけでは配列の要素はコピーされません

今回は concat メソッド及び slice メソッドを用いた配列のコピーについて説明します。

参照のコピーとオブジェクトのコピー

JavaScript における配列はオブジェクトのため、ある配列変数を別の変数に代入しても参照をコピーするだけで要素はコピーされません。次の例を見てみましょう。

ここで、array2 にarray1 を代入していますが、これは配列オブジェクトへの参照をコピーしてるだけで、オブジェクトそのものがコピーされる訳ではありません。このため、array1 と array2 は同じ配列を参照していることになります。

そこで、配列自体をコピーするためには、配列オブジェクトがもつ concat メソッド及び slice メソッドを使います。

concat メソッドを使った配列のコピー

次の例は、concat メソッドを使って配列をコピーする例です。

concat メソッドは引数に配列を指定した場合、配列同士を連結します。ここでは、空の配列にarray1が参照する配列を連結した配列を新しく生成し、array2 に代入しています。要素をコピーしているため、array2を書き換えてもarray1には変更は反映されません。

slice メソッドを使った配列のコピー

slice メソッドを使って配列をコピーする例を見てみましょう。

slice メソッドは、sice(start, end) のように使い、引数に指定したインデックス(startからend)範囲内の要素を持つ新しい配列を生成します。結果として、array1が参照する配列の全要素が array2 にコピーされます。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて