详解js中的对象的深浅拷贝

前言 本文是整理的浅拷贝和深拷贝中涉及的知识点，在工作中是非常重要的，在面试中也是必考的，希望对小伙伴们有所帮助！ 为什么会产生深浅拷贝？ 首先我们要知道一个流程 1，对象属于引用类型的，以后浏览器会为其开辟一个新的内存空间，并为它分配一个16进制的地址 2，按照一定的顺序，把对象的键值对存储到内存空间 3，把开辟的内存地址赋值给变量(或事件)，以后变量就通过地址找到内存空间，然后进行操作 基本数据类型和引用数据类型 数据分为基本数据类型和引用数据类型 基本数据类型 String、Number、Boolean、Null、Undefined、Symbol 基本数据类型是直接存储在栈中的数据 在JavaScript中，对象的深浅拷贝是编程中常见的概念，尤其在处理复杂的数据结构时显得尤为重要。在面试中，这一知识点通常会被用来考察开发者对于内存管理的理解以及对JavaScript对象特性的掌握。本文将深入探讨这两类拷贝的定义、区别以及实现方式。 **浅拷贝**指的是创建一个新对象，新对象的属性与原对象的属性一一对应，但这些属性仍然是指向原对象的引用。这意味着，如果属性是基本数据类型，那么新旧对象分别持有相同的数据副本；如果属性是对象引用，则新旧对象共享同一个对象引用。例如，使用`Object.assign()`、扩展运算符（`...`）或`for...in`循环创建的新对象都是浅拷贝的例子。 **深拷贝**则是创建一个新对象，并递归地复制原对象的所有属性，包括嵌套的对象。这意味着新对象不仅包含了原对象的所有属性，而且这些属性的值（尤其是对象）也是全新复制的，与原对象不共享任何内存空间。当原对象中的属性值是复杂的数据结构（如对象或数组）时，深拷贝确保了修改新对象不会影响原对象。 **浅拷贝的实现方式：** 1. **通用循环**：可以通过`for...in`循环遍历对象并创建新的对象，将属性逐一复制过来。 2. **`Object.assign()`**：这是ES6引入的方法，可以合并多个对象到一个新对象上，但它是浅拷贝。 3. **扩展运算符（`...`）**：与`Object.assign()`类似，扩展运算符也可以实现浅拷贝，将一个对象的属性复制到另一个对象。 **深拷贝的实现方式：** 1. **递归复制**：通过递归函数，对每个属性进行检查，如果是对象则继续深拷贝，否则直接复制值。 2. **JSON.parse 和 JSON.stringify**：虽然这种方法简单，但有局限性，因为它不能处理函数和循环引用的场景。 3. **`Array.prototype.concat()`**：当需要拷贝的属性是数组时，`concat()`可以生成新数组，但对嵌套的对象仍为浅拷贝。 4. **`Array.prototype.slice()`**：与`concat()`类似，`slice()`也适用于数组，但处理对象时依然是浅拷贝。 5. **第三方库**：如lodash的`_.cloneDeep()`或jQuery的`$.extend(true, {}, obj)`等，它们提供了强大的深拷贝功能，可以处理更复杂的场景。 了解深浅拷贝的原理和实现方式对于优化JavaScript代码性能、避免意外的副作用以及更好地理解对象的引用特性至关重要。在实际开发中，根据具体情况选择合适的拷贝策略，可以避免不必要的内存开销，提高代码质量。