web-dev-qa-db-ja.com

参照を使わずにJavaScriptオブジェクトを新しい変数にコピーする方法

私はここで簡単なjsfiddle を書いた 、ここで小さなJSONオブジェクトを新しい変数に渡し、元の変数（新しい変数ではない）からのデータを修正するしかし、新しい変数のデータも更新されます。これはJSONオブジェクトが参照渡しされたことを意味するのではないでしょうか。

これが私の簡単なコードです：

var json_original = {one:'one', two:'two'}

var json_new = json_original;

console.log(json_original); //one, two
console.log(json_new); //one, two

json_original.one = 'two';
json_original.two = 'one';

console.log(json_original); //two, one
console.log(json_new); //two, one

元の変数を変更しても新しい変数が変更されないように、JSONオブジェクトのディープコピーを作成する方法はありますか？

javascriptobjectjavascript-objects
158
Prusprus

JQueryを使用せず、単純なオブジェクトのクローン作成にのみ関心がある場合（コメントを参照）、次のように動作することがわかりました。

JSON.parse(JSON.stringify(json_original));

ドキュメント

231
Andy

あなたの唯一の選択肢はどういうわけかオブジェクトを複製することです。

これを達成する方法については、 このスタックオーバーフローの質問 を参照してください。

単純なJSONオブジェクトの場合、最も簡単な方法は次のとおりです。

var newObject = JSON.parse(JSON.stringify(oldObject));

あなたがjQueryを使用している場合は、使用することができます：

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

UPDATE 2017：これは一般的な回答であるため、新しいバージョンのjavascriptを使用してこれを実現するためのより良い方法があることを言及する必要があります。

ES6またはTypeScript（2.1以降）の場合：

var shallowCopy = { ...oldObject };

var shallowCopyWithExtraProp = { ...oldObject, extraProp: "abc" };

extraPropがoldObjectのプロパティでもある場合、その値は使用されません。これは、extraProp : "abc"が式の後半で指定されているため、実質的にオーバーライドされるためです。もちろん、oldObjectは変更されません。

102
Moeri