配列をコピーする方法

JavaScriptは、配列をコピーする時に気を付ける点があります。

本ページでは、配列をコピーする3つの方法を説明します。

参照渡し

配列は、以下でコピーできます。この方法は、参照渡しと呼ばれます。

【参照渡しの方法】
let x = ["りんご","いちご","みかん"];
let y = x;

これで、y[1]の"いちご"などの値を取り出せます。

しかし、y[1] = "ぶどう"と代入すると、x[1]の値まで"ぶどう"になってしまいます。これは、変数yに代入されたのは、要素の値ではなく配列を参照するための情報だからです。

変数xは、配列を参照するための情報が代入されていて、y = xでその情報がコピーされる。値自体がコピーされるのではないことが説明されています。

xもyも同じ配列を参照しています。このため、yで要素の値を変えると、xの値も変わるという訳です。

シャローコピー

参照渡しでは、同じ配列を参照してしまうため、新しく配列を作って値をコピーすることもできます。

【シャローコピーの方法】
let x = ["りんご","いちご","みかん"];
let y = x.slice();

これは、シャローコピー(shallow copy:浅いコピー)と呼ばれる方法です。

sliceは、コピーして新しい配列を作るメソッドです。slice(1, 2)と指定すると、1番目の要素から2番目の要素までをコピーします。省略すると、すべての要素をコピーします。

これで、y[1] = "ぶどう"などと変更しても、x[1]の値は変わりません。

しかし、これは多次元配列では使えません。多次元配列の場合は、深い階層が参照渡しになってしまいます。

ディープコピー

ディープコピー(deep copy)は、深いコピーです。以下のように使います。

【ディープコピーの方法】
let x = [
 ["りんご","いちご","みかん"],
 ["サバ","イワシ","ハマチ"]
];
let y = JSON.parse(JSON.stringify(x));

JSON.stringifyは、配列を元に以下の文字列を作ります。

[["りんご","いちご","みかん"],["サバ","イワシ","ハマチ"]]

これは、JSON(JavaScript Object Notation)と呼ばれるデータ形式です。JSONは、JavaScriptでしか扱えないデータをテキスト形式に変換することで、他のプログラム言語でも使えるようにします。

JSON.parseは、JSONを元に配列を作成します。つまり、コピーではなくJSONを元に新規作成しているため、元のxが参照している配列とは別物になります。

これで、y[1][2] = "タイ"などと変更しても、x[1][2]の値は"ハマチ"のままです。

前のページ配列の使い方