[ Javascript ] 配列をコピーする2つの方法

Tweet

Pocket

Javascript では、以下のように記述すると参照が代入されるだけで、実体は同一アドレスをさします。とりあえず本ページでは、これを参照コピーと呼ぶことにします。

配列の参照コピー

var src = ["A", "B", 1, 2];
var copied = src;

src[0] = 0;
copied[1] = 0;

alert(src); // 0,0,1,2
alert(copied); // 0,0,1,2

次に、参照コピーではなく各要素の器ごとコピーする2種類の方法を記載します。世間ではディープコピーと呼ばれています。

Array.concat を使用する方法

Array.concat は配列に要素を追加した配列を返すものですが、要素を追加しなければ 元々の配列のコピーが返されますので、それを利用しています。

var src = ["A", "B", 1, 2];

// 何も要素を追加しなければ、元の配列のコピーが返される
var copied = src.concat();

src[0] = 0; // 元の配列の値を上書きする

// それぞれが別の実体を持っていることを確認
alert(src); // 0,B,1,2
alert(copied); // A,B,1,2

Array.slice を使用する

Array.slice は配列の一部を切り出しますが、要素全てを切り出すことで結果的に配列のコピーが作成します。 上記サンプルコードの Array.concat 部分を以下のように修正するだけです。

// 元の配列をすべて切り出す
var copied = src.slice(0);

ただし、配列内の要素がオブジェクトや配列であれば参照コピーになると思いますし、多次元配列の場合などでは 使用できないと思いますので、1次元配列かつ要素がすべて数値や文字のスカラ値である場合にのみ使用できる方法と思ったほうがいいでしょう。

Tweet

Pocket