如何不通过引用将 JavaScript 对象复制到新变量?

IT技术 javascript object javascript-objects
2021-01-13 12:52:25

在这里写了一个快速的 jsfiddle ,我将一个小的 JSON 对象传递给一个新变量并修改原始变量(不是新变量)中的数据,但新变量的数据也会更新。这一定意味着 JSON 对象是通过引用传递的,对吗?

这是我的快速代码:

var json_original = {one:'one', two:'two'}

var json_new = json_original;

console.log(json_original); //one, two
console.log(json_new); //one, two

json_original.one = 'two';
json_original.two = 'one';

console.log(json_original); //two, one
console.log(json_new); //two, one

有没有办法制作 JSON 对象的深层副本,以便修改原始变量不会修改新变量?

2个回答

我发现如果您不使用 jQuery 并且只对克隆简单对象感兴趣(请参阅评论),则以下内容有效

JSON.parse(JSON.stringify(json_original));

文档

这就是为什么我的回答说的是简单的对象,但我想这可能更清楚。
2021-03-15 12:52:25
请注意,这不适用于具有循环引用的对象。
2021-03-22 12:52:25
不适用于函数,仅适用于对象内的属性(变量)。
2021-03-27 12:52:25
有了这个,日期将被字符串化并且即使在解析后也会保持字符串。
2021-04-06 12:52:25
JSON.stringify({key: undefined}) //=> "{}"
2021-04-10 12:52:25

您唯一的选择是以某种方式克隆对象。

请参阅有关如何实现此目标的stackoverflow 问题

对于简单的 JSON 对象,最简单的方法是:

var newObject = JSON.parse(JSON.stringify(oldObject));

如果您使用 jQuery,则可以使用:

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

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

2017 年更新:我应该提到,因为这是一个流行的答案,现在有更好的方法来使用较新版本的 javascript 来实现这一点:

在 ES6 或 TypeScript (2.1+) 中:

var shallowCopy = { ...oldObject };

var shallowCopyWithExtraProp = { ...oldObject, extraProp: "abc" };

请注意,如果extraProp也是 oldObject 上的属性,则不会使用其值,因为extraProp : "abc"稍后在表达式中指定,这实际上覆盖了它。当然,oldObject 不会被修改。

由于“在 ES6 或 TypeScript (2.1+):”部分,我更喜欢这个答案。JQuery 深/浅复制的例子也很好。
2021-03-18 12:52:25
我想这应该是答案。
2021-03-18 12:52:25