深拷贝与浅拷贝的核心区别在于数据独立性，浅拷贝仅复制顶层属性，嵌套对象共享引用，修改会影响原对象；深拷贝递归复制所有层级，实现完全独立。常用浅拷贝方法包括扩展运算符、Object.assign()和slice()，适用于简单复制；深拷贝可使用JSON.parse(JSON.stringify())处理纯数据对象，但会丢失函数、undefined、Symbol，且无法处理循环引用；推荐使用structuredClone()或手写递归函数，结合WeakMap解决循环引用问题，确保复杂结构的安全复制。
在JavaScript中，深拷贝与浅拷贝是处理对象和数组时绕不开的核心概念，它们决定了我们复制数据时，新旧数据之间是共享引用还是完全独立。简单来说，浅拷贝只是复制了数据的第一层，如果数据结构中有嵌套的对象或数组，那么新旧数据会共享这些嵌套内容的引用。这意味着修改新数据中的嵌套部分，原数据也会受到影响。而深拷贝则会递归地复制所有层级的数据，确保新数据与原数据在任何层面上都完全独立，互不干扰。理解并正确运用这两种拷贝方式，是编写健壮、可预测代码的关键。
要实现JavaScript中的深拷贝与浅拷贝，我们有多种策略和工具，选择哪种取决于你的具体需求和数据结构的复杂程度。
浅拷贝的实现
浅拷贝相对简单，主要目标是复制顶层属性的值。对于基本类型（如数字、字符串、布尔值），它们的值会被直接复制；而对于引用类型（如对象、数组），复制的是它们的内存地址（引用），而不是它们指向的实际内容。
立即学习“Java免费学习笔记（深入）”；
使用扩展运算符（Spread Syntax ...
const originalObject = { a: 1, b: { c: 2 } };
const shallowCopyObject = { ...originalObject };
console.log(shallowCopyObject); // { a: 1, b: { c: 2 } }
shallowCopyObject.a = 100;
shallowCopyObject.b.c = 200; // 修改嵌套对象
console.log(originalObject.a); // 1 (基本类型未受影响)
console.log(originalObject.b.c); // 200 (嵌套对象受影响)
const originalArray = [1, { a: 2 }, 3];
const shallowCopyArray = [...originalArray];
console.log(shallowCopyArray); // [1, { a: 2 }, 3]
shallowCopyArray[0] = 100;
shallowCopyArray[1].a = 200; // 修改嵌套对象
console.log(originalArray[0]); // 1
console.log(originalArray[1].a); // 200使用 Object.assign()
const originalObject = { a: 1, b: { c: 2 } };
const shallowCopyObject = Object.assign({}, originalObject);
shallowCopyObject.b.c = 300;
console.log(originalObject.b.c); // 300 (嵌套对象受影响)使用 Array.prototype.slice()
Array.from()
const originalArray = [1, { a: 2 }, 3];
const shallowCopySlice = originalArray.slice();
const shallowCopyFrom = Array.from(originalArray);
shallowCopySlice[1].a = 400;
console.log(originalArray[1].a); // 400深拷贝的实现
深拷贝则复杂得多，因为它需要递归地遍历所有嵌套层级，为每个引用类型的数据都创建一个全新的副本。
使用 JSON.parse(JSON.stringify(obj))
const originalObject = { a: 1, b: { c: 2 }, d: [3, { e: 4 }] };
const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
deepCopyObject.b.c = 500;
deepCopyObject.d[1].e = 600;
console.log(originalObject.b.c); // 2 (未受影响)
console.log(originalObject.d[1].e); // 4 (未受影响)注意： 这种方法有很多局限性，下面会详细说明。
使用 structuredClone()
const originalObject = {
a: 1,
b: { c: 2 },
d: new Date(),
reg: /test/g,
func: () => console.log('hello')
};
// 注意：structuredClone 不会复制函数
const deepCopyObject = structuredClone(originalObject);
console.log(deepCopyObject.d instanceof Date); // true
console.log(deepCopyObject.reg instanceof RegExp); // true
console.log(deepCopyObject.func); // undefined (函数未被复制)structuredClone()
手写递归深拷贝函数 对于更复杂或有特定需求的场景，比如需要拷贝函数、Symbol类型，或者处理循环引用，通常需要我们自己编写一个递归的深拷贝函数。
function deepClone(obj, hash = new WeakMap()) {
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理循环引用
if (hash.has(obj)) {
return hash.get(obj);
}
let clone;
// 处理Date对象
if (obj instanceof Date) {
clone = new Date(obj.getTime());
}
// 处理RegExp对象
else if (obj instanceof RegExp) {
clone = new RegExp(obj);
}
// 处理数组
else if (Array.isArray(obj)) {
clone = [];
hash.set(obj, clone); // 先将空数组放入hash，再填充
obj.forEach((item, index) => {
clone[index] = deepClone(item, hash);
});
}
// 处理普通对象
else {
clone = {};
hash.set(obj, clone); // 先将空对象放入hash，再填充
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
clone[key] = deepClone(obj[key], hash);
}
}
}
return clone;
}
const original = {
a: 1,
b: { c: 2 },
d: new Date(),
e: /pattern/g,
f: function() { console.log('func'); }, // 函数会被复制引用，但不会执行
g: undefined,
h: Symbol('test'),
i: null
};
original.self = original; // 制造一个循环引用
const cloned = deepClone(original);
console.log(cloned.b.c); // 2
cloned.b.c = 999;
console.log(original.b.c); // 2 (原始未变)
console.log(cloned.d instanceof Date); // true
console.log(cloned.e instanceof RegExp); // true
console.log(cloned.f === original.f); // true (函数是引用拷贝)
console.log(cloned.g); // undefined
console.log(cloned.h === original.h); // true (Symbol是引用拷贝)
console.log(cloned.i); // null
console.log(cloned.self === cloned); // true (循环引用被正确处理)
console.log(cloned.self === original); // false这个手写函数相对健壮，能处理多种类型和循环引用，但对于Map、Set、TypedArray等更复杂的数据结构，还需要进一步扩展。
说实话，刚开始写JavaScript的时候，我经常会因为分不清深拷贝和浅拷贝而踩坑。最常见的场景就是，我明明“复制”了一个对象，然后修改了“副本”里的某个属性，结果发现原对象也跟着变了，这让我百思不得其解，甚至怀疑是不是JavaScript出了什么问题。这就是浅拷贝带来的隐患。
区分深拷贝与浅拷贝之所以重要，核心在于数据隔离和避免意外副作用。
想象一下，你在开发一个复杂的应用，比如一个用户配置页面。用户修改了某个配置项，你希望在用户点击“保存”之前，这些修改只影响到当前编辑的临时数据，而不会立即改变全局的用户配置。如果这里使用了浅拷贝，那么用户在编辑过程中修改了嵌套的配置项（比如一个权限列表），这些修改会立即反映到原始的全局配置对象上。一旦用户取消了操作，你就无法回溯到修改前的状态了，这显然是不可接受的。
另一个例子是React或Vue这类前端框架中的状态管理。为了确保组件的响应式更新机制正常工作，我们通常需要避免直接修改状态对象。当需要更新一个对象或数组时，我们应该创建一个新的对象或数组，然后将新的值赋给它。如果只是进行浅拷贝，然后修改了拷贝后的嵌套对象，框架可能无法检测到状态的变化，导致UI不更新。例如，
this.setState({ user: { ...this.state.user, age: 30 } })user
this.state.user.profile.age = 30
所以，理解何时需要一个完全独立的数据副本（深拷贝），何时只需要一个顶层独立的副本（浅拷贝），是编写可维护、可预测且没有奇怪bug的代码的基础。它关乎我们对数据流的控制力，以及代码的健壮性。
JSON.parse(JSON.stringify())
JSON.parse(JSON.stringify())
无法处理函数（Function
JSON.stringify()
null
const objWithFunc = {
name: 'test',
greet: function() { console.log('Hello'); }
};
const cloned = JSON.parse(JSON.stringify(objWithFunc));
console.log(cloned.greet); // undefined无法处理 undefined
Symbol
JSON.stringify()
undefined
Symbol
null
const objWithUndefined = { a: 1, b: undefined, c: Symbol('sym') };
const cloned = JSON.parse(JSON.stringify(objWithUndefined));
console.log(cloned); // { a: 1 } (b和c都丢失了)
const arrWithUndefined = [1, undefined, Symbol('sym')];
const clonedArr = JSON.parse(JSON.stringify(arrWithUndefined));
console.log(clonedArr); // [1, null, null]日期对象（Date
Date
JSON.stringify()
Date
getDate()
const objWithDate = { created: new Date() };
const cloned = JSON.parse(JSON.stringify(objWithDate));
console.log(cloned.created); // "2023-10-27T10:00:00.000Z" (字符串)
console.log(cloned.created instanceof Date); // false正则表达式（RegExp
{}
const objWithRegExp = { pattern: /abc/g };
const cloned = JSON.parse(JSON.stringify(objWithRegExp));
console.log(cloned.pattern); // {}无法处理循环引用：如果对象中存在循环引用（即一个对象的属性直接或间接引用了自身），
JSON.stringify()
TypeError: Converting circular structure to JSON
const circularObj = {};
circularObj.self = circularObj;
try {
JSON.parse(JSON.stringify(circularObj));
} catch (e) {
console.error(e.message); // TypeError: Converting circular structure to JSON
}应对策略：
JSON.parse(JSON.stringify())
structuredClone()
structuredClone()
_.cloneDeep()
WeakMap
选择哪种方式，最终还是取决于你的项目需求、对性能的考量以及对代码复杂度的接受程度。没有银弹，只有最适合当前场景的方案。
编写一个能处理循环引用的深拷贝函数，关键在于维护一个映射表，记录已经拷贝过的对象。这样，当我们在递归过程中再次遇到同一个对象时，就可以直接返回之前拷贝的副本，而不是陷入无限递归导致栈溢出。
以下是一个相对健壮的深拷贝函数实现，它能处理基本类型、数组、普通对象、日期对象、正则表达式，并能有效避免循环引用问题。对于函数和Symbol，它会进行引用拷贝（因为函数通常不需要深拷贝其内部逻辑，而Symbol是不可变的）。
/**
* 健壮的深拷贝函数，能处理基本类型、数组、对象、日期、正则表达式，并处理循环引用。
* 对于函数和Symbol，进行引用拷贝。
*
* @param {any} obj 要拷贝的源对象
* @param {WeakMap} hash 用于存储已拷贝对象的映射，避免循环引用
* @returns {any} 深拷贝后的新对象
*/
function robustDeepClone(obj, hash = new WeakMap()) {
// 1. 处理基本类型和null/undefined
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 2. 处理日期对象
if (obj instanceof Date) {
return new Date(obj.getTime());
}
// 3. 处理正则表达式
if (obj instanceof RegExp) {
return new RegExp(obj);
}
// 4. 处理循环引用：如果该对象已被拷贝过，直接返回其副本
if (hash.has(obj)) {
return hash.get(obj);
}
// 5. 根据类型创建新的容器（数组或对象）
let clone;
if (Array.isArray(obj)) {
clone = [];
} else {
// 保留原对象的原型链
clone = Object.create(Object.getPrototypeOf(obj));
}
// 6. 将新创建的空副本存入hash，以便在递归子属性时处理循环引用
hash.set(obj, clone);
// 7. 递归拷贝属性
// 对于数组，使用forEach遍历
if (Array.isArray(obj)) {
obj.forEach((item, index) => {
clone[index] = robustDeepClone(item, hash);
});
}
// 对于对象，遍历其可枚举的自有属性
else {
for (let key in obj) {
// 确保只拷贝对象自身的属性，而不是原型链上的属性
if (Object.prototype.hasOwnProperty.call(obj, key)) {
clone[key] = robustDeepClone(obj[key], hash);
}
}
}
return clone;
}
// 示例测试
const originalData = {
name: 'Alice',
age: 30,
address: {
city: 'New York',
zip: '100以上就是如何实现JavaScript中的深拷贝与浅拷贝？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
591
