js 浅拷贝和深拷贝的区别
时间: 2025-06-19 16:53:26 浏览: 17
### JavaScript 浅拷贝与深拷贝的区别及实现方式
在 JavaScript 中,浅拷贝和深拷贝是处理对象或数组复制时的两种不同方式。它们的主要区别在于复制的层级以及是否共享引用。
#### 1. 浅拷贝
浅拷贝仅复制对象的第一层属性,对于嵌套的对象或数组,它会复制其引用而非实际内容。这意味着如果修改了原始对象中的嵌套数据,副本也会受到影响[^3]。
##### 实现方式
- 使用 `Object.assign()` 方法:
```javascript
const obj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, obj);
```
- 使用扩展运算符 `...`:
```javascript
const obj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...obj };
```
- 针对数组使用 `slice()` 或 `concat()` 方法:
```javascript
const array = [1, 2, 3];
const shallowCopyArray = array.slice();
```
#### 2. 深拷贝
深拷贝会递归地复制对象的所有层级,确保原始对象和副本之间没有任何引用共享。因此,修改原始对象不会影响副本[^2]。
##### 实现方式
- 使用 `JSON.parse()` 和 `JSON.stringify()`(注意:无法处理函数、`undefined` 和循环引用):
```javascript
const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));
```
- 使用第三方库如 Lodash 的 `_.cloneDeep()` 方法:
```javascript
const _ = require('lodash');
const obj = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(obj);
```
- 使用 jQuery 的 `$.extend()` 方法:
```javascript
var array = [1, 2, 3, 4];
var deepCopyArray = $.extend(true, [], array); // true 表示深拷贝
```
#### 性能与适用场景
- **浅拷贝**:适用于简单对象或无需隔离引用属性的场景,性能较高,内存占用较少[^2]。
- **深拷贝**:适用于需要完全隔离数据的场景,但性能较低,内存占用较大,且实现复杂度较高[^1]。
#### 注意事项
- 深拷贝无法实现对对象中方法的深拷贝,这些方法会被复制为 `undefined`[^1]。
- 避免滥用深拷贝,应在明确需要数据隔离时才使用,以减少不必要的性能损耗[^2]。
```javascript
// 示例代码:浅拷贝 vs 深拷贝
const original = { a: 1, b: { c: 2 } };
// 浅拷贝
const shallowCopy = { ...original };
shallowCopy.b.c = 3;
console.log(original.b.c); // 输出 3,因为浅拷贝共享引用
// 深拷贝
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 4;
console.log(original.b.c); // 输出 3,深拷贝不共享引用
```
阅读全文
相关推荐


















