ここでは、JavaScript における配列のコピーについて説明します。JavaScriptの配列はオブジェクト型であり、単に代入を行うだけでは配列の要素はコピーされません。
今回は concat メソッド及び slice メソッドを用いた配列のコピーについて説明します。
参照のコピーとオブジェクトのコピー
JavaScript における配列はオブジェクトのため、ある配列変数を別の変数に代入しても参照をコピーするだけで要素はコピーされません。次の例を見てみましょう。
|
1 2 3 4 5 |
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 メソッドを使って配列をコピーする例です。
|
1 2 3 4 5 6 |
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 メソッドを使って配列をコピーする例を見てみましょう。
|
1 2 3 4 5 6 7 |
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 にコピーされます。
