在 JavaScript 中深度克隆对象
JavaScript 是一种对象语言。几乎所有内容都是 JavaScript 中的对象。布尔值、数字、字符串、日期、数学、Regex、数组、函数和对象本身都是对象。它们是由各种属性和方法组成的键值对的集合。它们直接存储在内存中,并且只能通过引用进行复制。变量不存储对象,而只是在内存中对该对象的引用。因此,当我们尝试复制对象变量时,最终会创建对同一对象的额外引用。此方法称为浅拷贝。这是不理想的,因为我们不希望更改原始对象来影响其克隆。这就需要一种方法来深度克隆对象。本教程讲授如何在 JavaScript 中深度克隆对象。
浅拷贝是对象的按位拷贝。创建的新对象成功复制了诸如数字、布尔值和字符串等基元,但未复制对对象的任何引用。只有引用地址会导致指向同一对象的指针。对原始对象所做的任何更改都会反映在浅拷贝中。
另一方面,深拷贝不仅将地址/引用复制到原始对象,还复制整个对象。创建的新对象与复制的对象没有任何依赖关系。JavaScript 为我们提供了各种内置方法来复制对象,但是浅拷贝是大多数方法中的默认行为。
我们将简要介绍浅拷贝方法,以使你了解深拷贝的一些错误方法。
我们可以通过创建一个新对象来克隆对象,然后使用 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
语法创建对象的浅拷贝。然后,我们在原始对象中修改了引用对象的属性之一,并表明在克隆的对象中该属性已被修改。
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()
创建对象的浅拷贝。然后,我们在原始对象中修改了引用对象的属性之一,并表明在克隆的对象中该属性已被修改。
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));
此方法创建深拷贝,但仅适用于没有功能的对象。与其他引用对象一样,它在任何循环依赖方面都有问题。复制对象中属性的顺序也可能与原始对象不同。因此,如果我们有一个简单的对象而原始数据类型很少,那么此方法是一个很好的技巧,但不建议在现实世界中使用。
我们可以使用 Node.js v8
模块的序列化算法来深度克隆对象。尽管它仅限于某些内置数据类型,但它保留了克隆数据中的引用。它允许我们复制 JSON 方法不支持的几个循环和递归结构。
const v8 = require('v8');
const structuredClone = obj => {
return v8.deserialize(v8.serialize(obj));
};
我们反序列化然后序列化对象,就像 JSON 方法的 stringify 和 parse 一样。但是它保留了循环依赖关系,并且稍微好一些。
Lodash 库具有浅拷贝和深拷贝的函数,即 clone
和 clonedeep
。这是一个很棒的库,它允许我们仅导入所需的功能,而不导入完整的库。clonedeep
方法的工作方式是递归地复制值,然后保留所有对象继承,从而创建对象的真实副本。
const lodashClonedeep = require('lodash.clonedeep');
let obj = {
a: 1,
b: {
c: 2
}
}
let deepClone = lodashClonedeep(obj);
在这里,我们从 lodash 加载 clonedeep
函数,并使用它来深克隆对象。它是一个经过良好测试和维护的库,但只能与 Node.js 一起使用,不能与 Vanilla JavaScript 一起使用。
我们可以使用 jQuery 的 .extend()
进行对象的浅拷贝和深拷贝。这是最可靠的深度克隆方法,不会丢失数据或破坏数据。它的主要功能是合并两个或更多对象。但是也可以用于克隆对象。它带有以下参数:[deep]
、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
一个更明显的解决方案可以是遍历源对象的每个属性,然后将它们复制到新对象中。上面讨论的所有方法都与所有主要的浏览器兼容。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。