JavaScript 是一种对象语言。几乎所有内容都是 JavaScript 中的对象。布尔值、数字、字符串、日期、数学、Regex、数组、函数和对象本身都是对象。它们是由各种属性和方法组成的键值对的集合。它们直接存储在内存中,并且只能通过引用进行复制。变量不存储对象,而只是在内存中对该对象的引用。因此,当我们尝试复制对象变量时,最终会创建对同一对象的额外引用。此方法称为浅拷贝。这是不理想的,因为我们不希望更改原始对象来影响其克隆。这就需要一种方法来深度克隆对象。本教程讲授如何在 JavaScript 中深度克隆对象。
浅拷贝与深拷贝
浅拷贝是对象的按位拷贝。创建的新对象成功复制了诸如数字、布尔值和字符串等基元,但未复制对对象的任何引用。只有引用地址会导致指向同一对象的指针。对原始对象所做的任何更改都会反映在浅拷贝中。
另一方面,深拷贝不仅将地址/引用复制到原始对象,还复制整个对象。创建的新对象与复制的对象没有任何依赖关系。JavaScript 为我们提供了各种内置方法来复制对象,但是浅拷贝是大多数方法中的默认行为。
JavaScript 中的浅拷贝方法
在JavaScript中使用Spread语法来浅拷贝对象
我们可以通过创建一个新对象来克隆对象,然后使用 Spread
语法将对象内部的内容枚举为对象本身。这似乎是正确的方法,但它会创建数据的浅拷贝。
const obj={
a: 1,
b: {
c: 2
}
}
const clone = {...obj}; // creates a shallow copy
obj.b.c =5;
console.log(clone.b.c); // outputs 5
在上面的代码中,我们使用 spread
语法创建对象的浅拷贝。然后,我们在原始对象中修改了引用对象的属性之一,并表明在克隆的对象中该属性已被修改
在JavaScript 中使用object.assign()浅拷贝对象
在JavaScript 中使用object.assign()浅拷贝对象
object.assign()
方法将对象的浅拷贝分配给新的对象变量。它有两个参数:target
和 source
。target
通常是一对空括号,用于表示要在其中复制的空对象。它是一个可选参数,但是传递它可以确保我们最终不会更改原始对象。第二个参数是要复制的对象。
const obj={
a: 1,
b: {
c: 2
}
}
const clone = Object.assign({},obj); // creates a shallow copy
obj.b.c =5;
console.log(clone.b.c); // outputs 5
在上面的代码中,我们使用 Object.assign()
创建对象的浅拷贝。然后,我们在原始对象中修改了引用对象的属性之一,并表明在克隆的对象中该属性已被修改。
JavaScript 中的深拷贝方法
在JavaScript 中使用JSON.parse()和JSON.stringify()深度克隆对象
JSON.stringify()
用于将 JavaScript 对象转换为 JSON 字符串,JSON.parse()
用于将 JSON 字符串转换为 JavaScript 对象。我们可以将 JSON.parse()包裹在 JSON.stringify()周围,以首先将 JavaScript 对象转换为 JSON String,然后对其进行解析以获得该对象的副本。
var user = { name: 'Harshit', age: 21, Profession: 'Software Engineer' };
let fakeDeepCopy = JSON.parse(JSON.stringify(user));
此方法创建深拷贝,但仅适用于没有功能的对象。与其他引用对象一样,它在任何循环依赖方面都有问题。复制对象中属性的顺序也可能与原始对象不同。因此,如果我们有一个简单的对象而原始数据类型很少,那么此方法是一个很好的技巧,但不建议在现实世界中使用。
在JavaScript中使用jQuery extend()方法深度克隆对象
我们可以使用 jQuery 的 .extend()
进行对象的浅拷贝和深拷贝。这是最可靠的深度克隆方法,不会丢失数据或破坏数据。它的主要功能是合并两个或更多对象。但是也可以用于克隆对象。它带有以下参数:[deep]
、target
、object1 ..... objectN
。
[deep]
:这是一个可选参数。它唯一允许的值为 true。如果在函数中传递它,则该函数将创建对象的深拷贝。否则,它将形成一个浅拷贝。
target
:要扩展的对象。它将接收所有合并的对象。
object1, ..., objectN
:这些是要合并/克隆到新对象中的对象。
let obj = {
a: 1,
b: {
c: 2
}
}
let shallowClone = $.extend({},obj); // creates a shallow copy
let deepClone = $.extend(true,{}, obj); // creates a deep copy
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)