JavaScript数组中的深复制与浅复制是什么

发布时间：2021-12-20 16:33:11 作者：iii
来源：亿速云阅读：174

# JavaScript数组中的深复制与浅复制是什么

## 引言

在JavaScript开发中，数组(Array)是最常用的数据结构之一。当我们需要复制数组时，可能会遇到一些意想不到的问题，这是因为JavaScript中的数组复制分为**深复制(Deep Copy)**和**浅复制(Shallow Copy)**两种方式。理解这两种复制方式的区别对于避免程序中的bug至关重要。

本文将深入探讨：
- 浅复制与深复制的定义
- 常见的复制方法及其行为
- 如何实现真正的深复制
- 实际应用场景分析
- 性能考量与最佳实践

## 一、基本概念解析

### 1.1 什么是浅复制

浅复制是指创建一个新数组，新数组中的元素是对原数组中元素的**引用**。当原数组包含对象或其他引用类型时，修改新数组中的这些元素会影响原数组。

```javascript
const original = [{a: 1}, {b: 2}];
const shallowCopy = [...original];

shallowCopy[0].a = 99;
console.log(original[0].a); // 输出99，原数组被修改

1.2 什么是深复制

深复制是创建一个新数组，并且递归地复制原数组中所有层级的值。修改新数组不会影响原数组，即使数组包含嵌套对象。

const original = [{a: 1}, {b: 2}];
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy[0].a = 99;
console.log(original[0].a); // 仍输出1，原数组不受影响

1.3 JavaScript的数据类型与复制行为

基本类型：String、Number、Boolean等 - 复制时会创建新值
引用类型：Object、Array等 - 复制时只复制引用

二、常见的数组复制方法分析

2.1 浅复制方法

1. 扩展运算符(…)

const copy = [...original];

2. Array.prototype.slice()

const copy = original.slice();

3. Array.from()

const copy = Array.from(original);

4. concat方法

const copy = original.concat();

2.2 这些方法的局限性

所有上述方法对于多层嵌套数组都只能实现浅复制：

const nestedArray = [[1], [2]];
const copy = [...nestedArray];

copy[0][0] = 99;
console.log(nestedArray[0][0]); // 输出99

三、实现深复制的多种方式

3.1 JSON方法（有限深复制）

const deepCopy = JSON.parse(JSON.stringify(original));

局限性： - 无法复制函数、Symbol等特殊类型 - 会丢失undefined值 - 不能处理循环引用

3.2 递归实现

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  if (Array.isArray(obj)) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepClone(obj[i]);
    }
    return arrCopy;
  }
  
  const objCopy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      objCopy[key] = deepClone(obj[key]);
    }
  }
  return objCopy;
}

3.3 使用第三方库

1. Lodash的_.cloneDeep

const _ = require('lodash');
const deepCopy = _.cloneDeep(original);

2. jQuery的$.extend

const deepCopy = $.extend(true, [], original);

3.4 现代浏览器API：structuredClone

ES2021引入了structuredClone方法：

const deepCopy = structuredClone(original);

支持大多数类型，包括循环引用，但不支持函数和DOM节点。

四、实际应用场景分析

4.1 何时使用浅复制

性能敏感场景：浅复制更快，内存占用更少
不需要修改嵌套数据时
明确需要共享引用时

4.2 何时必须使用深复制

状态管理（如Redux中reducer必须返回新状态）
防止意外的数据修改
处理配置对象（避免原始配置被修改）
函数式编程（保持数据不可变）

4.3 React中的特殊案例

在React中，状态更新需要不可变性：

// 浅复制足够
setState(prev => [...prev, newItem]);

// 深复制必要
setState(prev => {
  const newState = _.cloneDeep(prev);
  newState[0].value = updatedValue;
  return newState;
});

五、性能考量与最佳实践

5.1 性能对比

方法	时间复杂度	适用场景
扩展运算符	O(n)	浅复制，简单数组
JSON方法	O(n)	简单深复制
递归深复制	O(n)	复杂对象
structuredClone	O(n)	现代浏览器
Lodash.cloneDeep	O(n)	生产环境

5.2 内存考虑

深复制会消耗更多内存，特别是对于大型对象。在内存敏感的环境中应谨慎使用。

5.3 最佳实践建议

按需选择：不是所有情况都需要深复制
文档说明：在API文档中明确说明复制行为
性能测试：对大型数据结构进行基准测试
考虑不可变库：如Immutable.js
避免过度复制：有时传递引用更合适

六、常见问题与解决方案

6.1 循环引用问题

const obj = {a: 1};
obj.self = obj;

// JSON方法会报错
// JSON.stringify(obj); // TypeError

// 解决方案：使用特殊库或实现循环引用检测

6.2 特殊对象的复制

Date、RegExp、Map、Set等需要特殊处理：

function cloneSpecial(obj) {
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  // 其他特殊类型...
}

6.3 函数复制问题

大多数深复制方法无法正确复制函数，需要特殊处理或评估是否真的需要复制函数。

七、总结与展望

理解JavaScript中的深复制与浅复制是成为高级开发者的重要一步。随着JavaScript语言的发展，新的API如structuredClone正在简化深复制的实现。同时，函数式编程的流行也使得不可变数据的概念越来越重要。

在未来，我们可能会看到： - 更高效的深复制API - 浏览器更好的优化支持 - 类型系统（如TypeScript）对复制行为的更好描述

掌握这些知识将帮助你写出更健壮、可维护的JavaScript代码。

附录：代码示例汇总

// 浅复制示例
const shallowCopy1 = [...arr];
const shallowCopy2 = arr.slice();

// 深复制示例
const deepCopy1 = JSON.parse(JSON.stringify(arr));
const deepCopy2 = structuredClone(arr); // ES2021+
const deepCopy3 = _.cloneDeep(arr); // Lodash

// 自定义深复制函数
function deepClone(obj) {
  // 实现见上文
}

参考资料： 1. MDN文档 - Array 2. ECMAScript规范 3. Lodash文档 4. 《JavaScript高级程序设计》 “`