Panda Noir

JavaScript の限界を究めるブログです。

JavaScriptで安全にオブジェクト・配列をディープコピーする方法

JavaScriptでは配列を代入するとなぜか参照が渡されてしまいます。だから、下手にいじると大変なことになってしまいます。そこでシャローコピーではなくディープコピーを簡単にする方法を考えました。

2013年12月24日追記:この方法は大体のオブジェクト、配列はコピーできます。しかし、検証した範囲だけでも関数型、Date型、RegExp型の値があるものはうまくコピーできません。ご了承ください。

どんな方法?

JSON形式の文字列にしてそれをパースします。JSONはオブジェクトを完全に文字列にしてくれるので参照がわたされません。唯一の欠点はJSONが使えないブラウザではできない点です。まあこれはjson.jsやjQueryなどのライブラリをよむことで解決しますね。

メリットは?

やはり配列の参照にならない点が大きいですね。2つサンプルを用意してみました。

var a=[0,1,2,3],b=a;
a[1]=3;
document.write(a[1]+","+b[1])
var a=[0,1,2,3],b=JSON.parse(JSON.stringify(a));
a[1]=3;
document.write(a[1]+","+b[1])

上の方のコードは 3,3 と表示されます。下の方のコードは 3,1 と意図したとおりに表示されます。

終わりに

(多分このコードは初見ではコピーしてると分からないので複数人で開発する時は顰蹙かいます)

わりとこれ古典的な方法なのでしょうか?私が調べた時には出て来なかったので書きました。みなさんの参考になったのならうれしいです。