JavaScriptで配列をコピーする

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

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

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

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

var array1 = [0,1,2,3];
var array2 = array1; // 参照のコピー(array1とarray2は同じ配列オブジェクトを参照している)
console.log(array2); // 0,1,2,3
array2[0] = 4;       // array2の要素を書き換える
console.log(array1); // 4,1,2,3(同じ配列オブジェクトを参照しているためarray1も変更される)

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

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

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

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

var array1 = [0,1,2,3];
var array2 = [].concat(array1); // 空の配列にarray1を連結した配列を返す
console.log(array2); // 0,1,2,3
array2[0] = 4;       // 変数array2から配列要素を書き換える
console.log(array2); // 4,1,2,3
console.log(array1); // 0,1,2,3(要素をコピーしているためarray1は変更されない)

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

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

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

var array1 = [0,1,2,3];
var array2 = array1.slice(0, array1.length);
console.log(array2); // 0,1,2,3

array2[0] = 4;       // 要素を書き換える
console.log(array2); // 4,1,2,3
console.log(array1); // 0,1,2,3(要素をコピーしているためarray1は変更されない)

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