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);