JavaScriptオブジェクトを正しくクローンするにはどうしたらいい？ [Javascript]

2017-10-29

javascript, webdev

質問：

オブジェクトxがあってそれをオブジェクトyとしてコピーしたいんだけど（yへの変更がxを変更しないように）。
built-inJavaScriptオブジェクトからコピーしたオブジェクトは不要なプロパティが余分に追加されてるのは知ってるんだけど。これは問題じゃないんだ。なぜって僕はリテラルとして構築されたオブジェクトの1つをコピーしているからです。

JavaScriptオブジェクトを正しくクローンするにはどうすればいいかな？

回答1:

jQueryを使用すると、extendで浅い(shallo)コピーができる：

var copiedObject = jQuery.extend({}, originalObject)

copyObjectへのその後の変更はoriginalObjectに影響しない。逆もしかり。

それかディープコピーを作成するには：

var copiedObject = jQuery.extend(true, {}, originalObject)

回答2:

オブジェクト内で関数を使用しない場合は、非常に簡単なワンライナーが使える：

var cloneOfA = JSON.parse(JSON.stringify(a));

これは、オブジェクト、配列、文字列、ブーリアンと数字を含むどんな種類のオブジェクトに対しても動作する。

また、ブラウザの構造化クローンアルゴリズムについてのこの記事を参照。これはワーカーに、またはワーカーからメッセージを投稿するときに使われる。ディープクローニングの関数も含んでる。

回答3:

ECMAScript 6には、Object.assignメソッドが使える。これは、列挙可能なすべてのプロパティの値をあるオブジェクトから別のオブジェクトにコピーする。例えば：

var x = {myProp: "value"};
var y = Object.assign({}, x);

ただし、ネストされたオブジェクトは引き続き参照としてコピーされることに注意。

Source: How do I correctly clone a JavaScript object?