JavaScript でオブジェクトや配列をコピーする方法

JavaScript でオブジェクトや配列をコピーする方法

JavaScript でオブジェクトや配列をコピーするには、「=」で代入するのではなく、コピーを作らなくてはならない。

jQuery の場合には extend を用いる事でコピーを作る事ができる。

jQuery の extend の使い方

extend は以下のようにして使う。（元々 extend はオブジェクトの拡張に用いられるが、今回はコピーを作るための使い方を記述しておく。）

$.extend(<深いコピーか浅いコピーか ( true or 省略 )>, <コピー先>, <コピー元>);

今回コピーを作るというのが趣旨なので、最初の引数を true にして、深いコピー（ディープコピー）する。

第二引数のコピー先には、空のオブジェクト（配列の場合には、空の配列）を書けば良い。

オブジェクトのコピー

実際のコードは以下のようになる。オブジェクトがコピーされ、コピー先の値が変更されてもオリジナルが変更されない事が分かる。

オブジェクトのコピー – JavaScript

var object1 = {a: true, b: false};
var object2 = $.extend(true, {}, object1);
// object2 を変更する
object2.c = true;
console.log(object2); // 出力： {a: true, b: false} (中身は変更されない)
console.log(object1); // 出力： {a: true, b: false, c: true}

配列のコピー – JavaScript

var array1 = [1 , 2, 3];
var array2 = $.extend(true, [], array1);
// array2 を変更する
array2.push(4);
console.log(array1); // 出力： [1, 2, 3] (中身は変更されない)
console.log(array2); // 出力： [1, 2, 3, 4]

以上。