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

Posted 2023-02-19

【中文标题】javascript 对象被推入数组作为参考

【英文标题】：javascript objects are pushed into array as reference

【发布时间】：2016-05-18 21:02:32

【问题描述】：

编辑：我忘了添加，这是针对节点 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 中有这样的概念吗？

【问题讨论】：

您必须克隆对象。有多种方法可以做到这一点。见What is the most efficient way to clone an object?

javascript pass object as reference的可能重复

@LucasRodriguez，建议的副本并没有告诉 OP 如何克隆对象而不是引用它。

请注意，通过 JSON.parse(JSON.stringify()) 复制对象在一般使用中存在一些严重问题。这不是为了那个。 JSON 是一种传输数据的方式，而不是序列化对象。

【参考方案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);

【参考方案2】：

试着去做

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

而不是

tarray.push(a);

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

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

【讨论】：

对不起，我没有提到问题，但它在 Node JS（服务器端）上，所以 jQuery 在服务器端工作。

那么你应该使用我建议的 ES6 的第二个变体 tarray.push(Object.assign(, a));