javascript對象被推入數組作為參考

Question

編輯：我忘了添加，這是針對NODE JS服務器端的，一些答案具有Jquery克隆（jquery克隆在服務器端是否起作用，我嘗試將它作為Error拋出，因為ReferenceError：jQuery未定義 ）。 所以，我要求每一個，請添加可以在Node JS上運行的解決方案

首先檢查這些程序及其輸出：

var a  = {};
a.name = "Jessie";
a.age = 22;

var tarray = [];
tarray.push(a);

console.dir('------------------before-------------------------------------');
console.dir(tarray);

a.name = "Monica";
a.age = 18;

console.dir('------------------After-------------------------------------');
console.dir(tarray);

輸出：

'------------------before-------------------------------------'
[ { name: 'Jessie', age: 22 } ]
'------------------After-------------------------------------'
[ { name: 'Monica', age: 18 } ]

相同的程序以不同的方式

var a  = [{"name" : "Jessie", "Age" : 22}];

var tarray = [];
tarray.push(a[0]);

console.dir('------------------before-------------------------------------');
console.dir(a);
console.dir(tarray);

a[0].name = "Monica";
a[0].Age = 18;

console.dir('------------------After-------------------------------------');
console.dir(a);
console.dir(tarray);

產量

'------------------before-------------------------------------'
[ { name: 'Jessie', Age: 22 } ]
[ { name: 'Jessie', Age: 22 } ]
'------------------After-------------------------------------'
[ { name: 'Monica', Age: 18 } ]
[ { name: 'Monica', Age: 18 } ]

從這些程序中，我可以看出，JS對象被推入數組作為參考。 因此，如果對象更改，則推入數組的對象中的值也會更改。

如何在javascript中更改此行為。 我的意思是，如果對象值更改，則推入數組的對象不必更改。

是的，感謝所有人，使用Object.assign和JSON.parse進行克隆可以解決此問題：

var a  = {};
a.name = "Jessie";
a.age = 22;

var clone = Object.assign({}, a);
var tarray = [];
tarray.push(clone);

console.dir('------------------before-------------------------------------');
console.dir(tarray);


a.name = "Monica";
a.age = 18;

var clone = Object.assign({}, a);
tarray.push(clone);

console.dir('------------------After-------------------------------------');
console.dir(tarray);

a.name = "Rose";
a.age = 16;

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


tarray.push(j);
console.dir('------------------After JSON Parse Cloning-------------------------------------');
console.dir(tarray);

輸出：

'------------------before-------------------------------------'
[ { name: 'Jessie', age: 22 } ]
'------------------After-------------------------------------'
[ { name: 'Jessie', age: 22 }, { name: 'Monica', age: 18 } ]
'------------------After JSON Parse Cloning-------------------------------------'
[ { name: 'Jessie', age: 22 },
  { name: 'Monica', age: 18 },
  { name: 'Rose', age: 16 } ]

但是JavaScript中的深層/淺層復制是什么？ 他們在JS中有類似的概念嗎？

Answer 1

試着做

tarray.push(jQuery.extend({}, a));

代替

tarray.push(a);

它將對象的副本放入數組，而不是引用

或者，您可以使用tarray.push(Object.assign({}, a)); 從ES6

Answer 2

您必須克隆對象。

這是5種方法：

您可以通過多種方式執行此操作。 瀏覽器開始支持Object.assign 。 如果您擔心瀏覽器支持，可以使用babel polyfill ：

var clonedObject = Object.assign({}, a);

然后做你想做的。

如果您進入實用程序庫，還可以使用lodash中的_.assign 。

您還可以使用ES7對象傳播運算符：

var clonedObject = { ...a };

如果您想去所有本地和老式學校，可以使用Array.prototype.reduce ：

var clonedObject = Object.keys(a).reduce(function(result, prop) {
  result[prop] = a[prop];
  return result;
}, {});

或者您可以按照以下答案進行操作 ：

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

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