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

Question

编辑：我忘了添加，这是针对节点 JS 服务器端的，一些答案有 Jquery 克隆（jquery 克隆是否在服务器端工作，我试过它抛出错误 ReferenceError: jQuery is not定义）。所以，我要求每个人，请添加可以在 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

你必须克隆对象。

这里有 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);

Answer 2

试着去做

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

而不是

tarray.push(a);

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

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