今天，我们踏上一段新的编程之旅，探索JavaScript中的"拷贝"。在现实生活中，我们常常会遇到复制的需求，比如复印文件、照片等，而在JavaScript中，拷贝则是数据复制的代名词，尤其是针对引用类型数据的操作。接下来让我们一起探索吧。✨
一、拷贝的现实映射与JavaScript中的含义
想象一下，你手头有一份重要文档，需要在不改变原文件的情况下，制作一份或多份副本。在JavaScript中，数据的"拷贝"也是如此，它是创建数据对象或数组副本的过程，以便在不影响原数据的情况下进行操作。
二、拷贝的双生子：浅拷贝与深拷贝
拷贝的世界分为两大阵营：浅拷贝与深拷贝，它们之间的区别在于对数据结构的复制程度。
-
浅拷贝：如同复印文件时只复印了封面，内部的页码和内容还是与原文件共享。在JavaScript中，这意味着拷贝后的新对象与原对象在顶层结构上看起来相同，但内部如果有引用类型的属性（如对象、数组），新旧对象将共享这部分数据。一旦原对象的引用类型属性发生改变，拷贝对象也会随之变动。
-
深拷贝：则是从封面到内容页的全面复制，每一页都是全新的。在JavaScript中，这意味着无论数据结构如何嵌套，深拷贝都能创建出一个与原对象完全独立的副本，任何对原对象的修改都不会影响到拷贝对象。
三、浅拷贝的日常应用
让我们通过几个方法，揭开浅拷贝的面纱：
1. Object.create(obj)
css
const obj = { a: 1 };
const shallowCopy = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
console.log(shallowCopy); // { a: 1 }这个方法创建了一个新对象，其原型指向obj，适合用于原型链的继承，但通常不作为浅拷贝的主要手段。
2. Object.assign({}, obj)
css
const obj = { a: 1, b: { c: 2 } };
const newObj = Object.assign({}, obj);
console.log(newObj); // { a: 1, b: { c: 2 } }通过Object.assign，我们可以快速复制对象的可枚举属性，但嵌套对象仍然是引用共享。
3. [].concat(arr) 、 [...arr] 、 arr.slice(0)
数组的浅拷贝也很常见：
ini
const array = [1, 2, { three: 3 }];
const concatCopy = [].concat(array);
const spreadCopy = [...array];
const sliceCopy = array.slice(0);
console.log(concatCopy,spreadCopy,sliceCopy);
// [ 1, 2, { three: 3 } ] [ 1, 2, { three: 3 } ] [ 1, 2, { three: 3 } ]这些方法创建了数组的新实例，但数组内的对象还是共享的。
四、深拷贝的精妙之处
深拷贝是数据复制的高级形态，它确保了数据的完全独立性。
1. JSON.parse(JSON.stringify(obj))
ini
const obj = { a: 1, b: { c: 2 } };
const newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj); // { a: 1, b: { c: 2 } }这个方法简单实用，但注意它无法处理函数、undefined、Symbol类型以及循环引用。
2. structuredClone(obj)
ini
const obj = { a: 1, b: [97, 98, 99] };
const newObj = structuredClone(obj);
console.log(newObj); // { a: 1, b: [ 97, 98, 99 ] }现代浏览器提供了structuredClone，它几乎可以完美复制任何类型的值，包括循环引用。
五、手写拷贝方法：从零开始的创造
理解了浅拷贝和深拷贝的原理后，我们不妨自己动手实现这些过程。
1. 手写浅拷贝
javascript
function shallowCopy(obj) {
let newObj = {}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key]
}
}
return newObj
}
Object.prototype.c = 3
let obj = {
a: 1,
b: {n: 2}
}
console.log(shallowCopy(obj)); // { a: 1, b: { n: 2 } }
}- 使用
for...in循环遍历原对象的所有可枚举属性。 hasOwnProperty检查确保我们不复制原型链上的属性。- 对于每一个属性，直接将其值赋给新对象的同名属性，这一步对于基本类型是深拷贝，而对于引用类型则是浅拷贝，因为它们的值是引用地址。
2. 手写深拷贝
vbnet
let obj = {
a: 1,
b: {n: 2}
}
function deepCopy(obj) {
let newObj = {}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] instanceof Object) {
newObj[key] = deepCopy(obj[key])
}else {
newObj[key] = obj[key]
}
}
}
return newObj
}
console.log(deepCopy(obj)); // { a: 1, b: { n: 2 } }- 根据
obj的构造函数创建新对象，保证新对象与原对象类型一致。 - 使用
for...in循环遍历并深拷贝每一个属性。 hasOwnProperty检查确保我们不复制原型链上的属性，instanceof Object判断是否属性值是对象，是的话使用递归调用deepCopy，不是就直接。- 最终返回构建好的新对象。
六、总结与思考
在JavaScript中，无论是浅拷贝还是深拷贝，都有其适用场景。浅拷贝简单快速，适用于不需要关心内部嵌套结构的情况；而深拷贝虽消耗更多资源，但提供了数据的完全独立性，对于复杂数据结构的复制至关重要。
通过本文的介绍，希望你能掌握JavaScript拷贝的精髓。深拷贝和浅拷贝没有好坏之分，正确地选择和应用拷贝方法，将使我们的代码更加牛叉。🎉