数组拷贝：浅拷贝与深拷贝的实现方式
欢迎来到今天的讲座！
大家好，欢迎来到今天的编程讲座。今天我们要探讨的是一个非常基础但又极其重要的话题——数组的浅拷贝与深拷贝。无论你是刚刚入门的新人，还是已经有一定经验的开发者，这个问题都会在你编写代码时频繁出现。那么，什么是浅拷贝？什么是深拷贝？它们有什么区别？我们该如何实现它们？让我们一步步来揭开这个谜底。
1. 为什么需要拷贝数组？
在编程中，数组是非常常见的数据结构，用来存储多个相同类型的元素。很多时候，我们需要对数组进行操作，比如复制、修改、传递给函数等。然而，直接赋值（如 arr2 = arr1）并不会创建一个新的数组，而是让两个变量指向同一个内存地址。这意味着如果你修改了 arr2，arr1 也会受到影响。为了避免这种情况，我们就需要用到拷贝。
举个例子：
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2[0] = 100;
console.log(arr1); // 输出: [100, 2, 3]可以看到，arr1 和 arr2 其实是指向同一个数组的引用，因此修改 arr2 也会影响 arr1。这就是为什么我们需要拷贝数组的原因。
2. 浅拷贝 vs 深拷贝
2.1 浅拷贝（Shallow Copy）
浅拷贝是指只复制数组的第一层元素，对于数组中的对象或嵌套数组，仍然会共享同一个引用。换句话说，浅拷贝只会复制数组的“表层”，而不会递归地复制内部的对象或数组。
举个例子：
let arr1 = [1, 2, [3, 4]];
let arr2 = [...arr1]; // 使用扩展运算符进行浅拷贝
arr2[2][0] = 100;
console.log(arr1); // 输出: [1, 2, [100, 4]]在这个例子中，arr1 和 arr2 的第一层是独立的，但第二层的 [3, 4] 是共享的。因此，当我们修改 arr2 中的嵌套数组时，arr1 也会受到影响。
2.2 深拷贝（Deep Copy）
深拷贝则是指不仅复制数组的第一层元素，还会递归地复制所有嵌套的对象或数组，确保新数组和原数组完全独立，没有任何共享的引用。
举个例子：
let arr1 = [1, 2, [3, 4]];
let arr2 = JSON.parse(JSON.stringify(arr1)); // 使用 JSON 方法进行深拷贝
arr2[2][0] = 100;
console.log(arr1); // 输出: [1, 2, [3, 4]]这次，arr1 和 arr2 完全独立，修改 arr2 不会影响 arr1。
3. 浅拷贝的实现方式
浅拷贝的实现方式有很多种，下面列举几种常见的方法：
3.1 使用扩展运算符（Spread Operator）
这是最简单也是最常见的浅拷贝方式之一。通过在数组前面加上三个点 ...，可以将数组展开并创建一个新的数组。
let arr1 = [1, 2, 3];
let arr2 = [...arr1];3.2 使用 Array.prototype.slice()
slice() 方法可以返回一个从原数组中提取的新数组，而不修改原数组。它也可以用于浅拷贝。
let arr1 = [1, 2, 3];
let arr2 = arr1.slice();3.3 使用 Array.prototype.concat()
concat() 方法可以将两个或多个数组合并为一个新数组。如果只传入一个数组，它实际上就是一个浅拷贝。
let arr1 = [1, 2, 3];
let arr2 = arr1.concat();3.4 使用 Object.assign()
Object.assign() 可以将多个对象的属性复制到目标对象中。虽然它主要用于对象的浅拷贝，但对于数组也同样适用。
let arr1 = [1, 2, 3];
let arr2 = Object.assign([], arr1);3.5 性能对比
| 方法 | 优点 | 缺点 |
|---|---|---|
| 扩展运算符 | 简洁易读 | 不能处理复杂嵌套结构 |
slice() |
原生支持 | 仅适用于数组 |
concat() |
原生支持 | 仅适用于数组 |
Object.assign() |
通用性强 | 不能处理复杂嵌套结构 |
4. 深拷贝的实现方式
深拷贝的实现方式相对复杂一些，因为我们需要递归地复制所有的嵌套对象和数组。下面是几种常见的深拷贝方法：
4.1 使用 JSON.parse() 和 JSON.stringify()
这是最简单的一种深拷贝方式。通过将数组转换为 JSON 字符串，然后再解析回数组，可以实现深拷贝。不过需要注意的是，这种方法有一些局限性，比如不能处理函数、undefined、NaN、Infinity 等特殊值，也不能处理循环引用。
let arr1 = [1, 2, [3, 4]];
let arr2 = JSON.parse(JSON.stringify(arr1));4.2 使用递归函数
我们可以编写一个递归函数来手动实现深拷贝。这个方法可以处理更复杂的嵌套结构，并且可以根据需求进行自定义。
function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
let copy = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
copy[key] = deepCopy(obj[key]);
}
}
return copy;
}
let arr1 = [1, 2, [3, 4]];
let arr2 = deepCopy(arr1);4.3 使用第三方库
如果你不想自己动手写深拷贝逻辑，可以使用一些成熟的第三方库，比如 Lodash 的 _.cloneDeep()。这些库通常经过优化，能够处理各种复杂的场景。
let arr1 = [1, 2, [3, 4]];
let arr2 = _.cloneDeep(arr1);4.4 性能对比
| 方法 | 优点 | 缺点 |
|---|---|---|
JSON.parse() + JSON.stringify() |
简单易用 | 无法处理特殊值和循环引用 |
| 递归函数 | 自定义性强 | 需要自己实现，可能有性能问题 |
| 第三方库 | 功能强大 | 引入额外依赖 |
5. 总结
今天我们学习了数组的浅拷贝和深拷贝的区别，以及如何在 JavaScript 中实现它们。浅拷贝适合简单的数组复制，而深拷贝则更适合处理嵌套结构。不同的拷贝方式有不同的优缺点，选择哪种方式取决于你的具体需求。
希望今天的讲座对你有所帮助！如果你有任何问题，欢迎在评论区留言。下次见！ 😊
参考资料：
- MDN Web Docs: JavaScript Arrays
- You Don’t Know JS (book series) by Kyle Simpson
- JavaScript: The Good Parts by Douglas Crockford
