一文读懂 JavaScript 中的深浅拷贝

在 JavaScript 编程里，深浅拷贝是处理数据时极为关键的概念。理解它们的差异，能帮我们规避许多数据操作上的 “陷阱”。今天，咱们就借助简单的 “abc” 相关示例，深入探索深浅拷贝的奥秘，并且通过在浏览器控制台输出结果，让大家有更直观的感受。

一、浅拷贝：共享的 “小秘密”

浅拷贝会创建一个新的对象或数组，新对象里的属性值，对于基本数据类型（像字符串、数字、布尔值），是独立复制的；但对于引用数据类型（比如对象、数组），新对象和原对象的这些属性引用的是同一块内存地址。打个比方，就好像两个人共用一个笔记本，一个人写了东西，另一个人也能看到。

在 JavaScript 中，Object.assign() 是实现浅拷贝的常用方法。我们在浏览器控制台里试试：

// 创建一个原对象
const originalObject = {a: 'abc',b: {c: 'abc'}
};
// 使用Object.assign进行浅拷贝
const copiedObject = Object.assign({}, originalObject);
// 尝试修改原对象的基本数据类型属性a
originalObject.a = '修改abc';
// 查看原对象和浅拷贝对象的a属性
console.log('原对象a:', originalObject.a);
console.log('浅拷贝对象a:', copiedObject.a);
// 尝试修改原对象的引用数据类型属性b里的c
originalObject.b.c = '修改后的abc';
// 查看原对象和浅拷贝对象的b.c属性
console.log('原对象b.c:', originalObject.b.c);
console.log('浅拷贝对象b.c:', copiedObject.b.c);

控制台结果：

运行这段代码后，从控制台输出结果能发现，修改原对象的基本数据类型属性 a，浅拷贝对象的 a 不受影响；然而修改原对象引用数据类型属性 b 里的 c 时，浅拷贝对象的 b.c 也跟着变了。这就是浅拷贝的特性，基本数据类型 “各自为政”，引用数据类型 “共享信息” 。 

二、深拷贝：彻底的 “分家”

深拷贝则是彻头彻尾地创建一个全新的对象或数组，新对象的所有属性和原对象完全分离，互不干扰。不管属性是基本数据类型还是引用数据类型，都有自己独立的存储空间。这就好比两个人各自有一个笔记本，谁写什么都不会影响对方。

实现深拷贝，JSON.parse(JSON.stringify()) 是个简单易用的方法。同样在浏览器控制台操作：

// 创建一个原对象
const originalObj = {x: 'abc',y: {z: 'abc'}
};
// 使用JSON.parse(JSON.stringify())进行深拷贝
const deepCopiedObj = JSON.parse(JSON.stringify(originalObj));
// 修改原对象的引用数据类型属性y里的z
originalObj.y.z = '不一样的abc';
// 查看原对象和深拷贝对象的y.z属性
console.log('原对象y.z:', originalObj.y.z);
console.log('深拷贝对象y.z:', deepCopiedObj.y.z);

 控制台结果：

从控制台的输出可以明显看出，修改原对象的引用数据类型属性 y.z，深拷贝对象的 y.z 丝毫不受影响，这就是深拷贝 “彻底分家” 的效果。

不过，JSON.parse(JSON.stringify()) 并非万能的。它没办法处理包含函数、正则表达式、undefined 等特殊类型的数据。要是遇到这种情况，可以借助 lodash 库中的 cloneDeep 方法。先在页面引入 lodash 库：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

// 创建一个包含特殊数据（这里假设是一个简单对象，模拟特殊情况）的原对象
const original = {special: {a: 'abc'}
};
// 使用lodash的cloneDeep进行深拷贝
const deepCopied = _.cloneDeep(original);
// 查看原对象和深拷贝对象的special.a属性
console.log('原对象special.a:', original.special.a);
console.log('深拷贝对象special.a:', deepCopied.special.a);

注意：可自行尝试

三、总结

深浅拷贝在 JavaScript 开发中至关重要。浅拷贝适用于基本数据类型为主，且部分引用数据类型修改可共享的场景；深拷贝则用于需要确保数据完全独立，避免相互干扰的情况。通过这些简单的 “abc” 示例和浏览器控制台的实践，希望大家对深浅拷贝有更清晰的认识，在今后的代码编写中能够游刃有余地处理数据。