当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript深浅拷贝区别全解析

JavaScript深浅拷贝区别全解析

2025-10-02 19:56:48 0浏览收藏

在JavaScript开发中，深拷贝与浅拷贝是处理对象和数组复制时必须理解的关键概念。**浅拷贝**仅复制对象的第一层属性，引用类型属性共享内存地址，修改嵌套对象会影响原对象，常用方法包括Object.assign和扩展运算符。而**深拷贝**则递归复制所有层级，生成完全独立的对象，互不影响，通常使用JSON.parse(JSON.stringify())或Lodash的_.cloneDeep()实现。选择哪种拷贝方式取决于对象的结构复杂度和是否需要数据隔离。本文将深入探讨JavaScript中深拷贝与浅拷贝的区别、实现方式以及适用场景，助您在实际开发中避免数据污染，提升代码质量。需要注意的是，JSON方法在深拷贝时存在局限性，无法处理函数和undefined等特殊值。

浅拷贝复制对象第一层，引用类型共享内存地址，修改嵌套对象会影响原对象；深拷贝递归复制所有层级，完全独立，互不影响。常见浅拷贝方法有Object.assign、扩展运算符，深拷贝可用JSON.parse(JSON.stringify())或_.cloneDeep()，但前者不支持函数、undefined等。选择依据：简单结构用浅拷贝，多层嵌套需深拷贝以避免数据污染。

如何理解JavaScript中的深拷贝与浅拷贝？

JavaScript中的深拷贝与浅拷贝主要涉及对象或数组复制时，如何处理嵌套引用的问题。理解它们的区别对避免数据意外修改至关重要。

什么是浅拷贝？

浅拷贝创建一个新对象，但只复制原对象第一层属性的值。对于基本类型，复制的是实际值；对于引用类型（如对象、数组），复制的是指向内存地址的引用。

这意味着，如果原对象中有嵌套对象，拷贝后的新对象和原对象仍共享这些嵌套对象。修改其中一个的嵌套内容，会影响另一个。

常见实现方式：

使用 Object.assign({}, obj)
使用扩展运算符 {...obj}
数组可用 slice()、concat() 或 [...arr]

例如：

<font face="Courier New">
const original = { name: 'Alice', info: { age: 25 } };
const shallow = { ...original };
shallow.info.age = 30;
console.log(original.info.age); // 输出 30，被修改了
</font>

什么是深拷贝？

深拷贝会递归复制对象的所有层级，包括嵌套的对象和数组，生成一个完全独立的新对象。原对象和拷贝对象之间没有任何引用共享。

修改其中一个，不会影响另一个，适合需要彻底隔离数据的场景。

常见实现方式：

使用 JSON.parse(JSON.stringify(obj))（有局限）
使用递归函数手动实现
借助 Lodash 等工具库的 _.cloneDeep()

注意：JSON 方法无法处理函数、undefined、Symbol、循环引用等特殊值。

例如：

<font face="Courier New">
const original = { name: 'Bob', info: { age: 20 } };
const deep = JSON.parse(JSON.stringify(original));
deep.info.age = 25;
console.log(original.info.age); // 输出 20，未受影响
</font>