javascript对象被推入数组作为参考

Question

编辑：我忘了添加，这是针对NODE JS服务器端，一些答案有Jquery克隆（jquery克隆在服务器端工作，我试过它抛出错误为 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中的深层/浅层复制是什么？他们的任何概念都是这样的吗？

Answer 1

尝试做

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

而不是

tarray.push(a);

它会将对象的副本放到数组中，而不是引用

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

Answer 2

您必须克隆该对象。

以下是5种方法：

你可以通过很多方式做到这一点。浏览器开始支持Object.assign。如果您担心浏览器支持，可以使用a babel polyfill：

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

然后做你想做的事。

如果您使用的是实用程序库，则还可以使用_.assign from lodash。

您也可以使用ES7对象扩展运算符：

var clonedObject = { ...a };

如果你想去所有本地和老年学校，你可以使用Array.prototype.reduce：

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

或者你可以what this answer says：

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

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