10分钟深入探讨带你彻底理解浅拷贝与深拷贝

谁借莪１个温暖的怀抱￠ 2024-04-25 20:14 54阅读 0赞

![cd36113cf50b4c3bb4a7b3edd4e78d0e.gif][]

**? 江城开朗的豌豆**：[个人主页][Link 1]

**? 个人专栏**:[《 VUE 》][VUE] [《 javaScript 》][javaScript]

?**个人网站**:[《 江城开朗的豌豆? 》][Link 2]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

? 引言

? 1. 深拷贝的实现

? 1.1 基本类型和特殊类型的处理

? 1.2 处理循环引用

? 1.3 性能优化

? 1.4 完整的深拷贝实现示例

? 2. 浅拷贝的实现

? 2.1 Object.assign()

? 2.2 展开语法（Spread Syntax）

? 2.3 数组浅拷贝

? 3. 深拷贝与浅拷贝的应用场景

? 4. 注意事项

? 结论

--------------------

### ? 引言 ###

> 在JavaScript中，对象的拷贝是一项常见的操作。浅拷贝和深拷贝是两种常用的拷贝方式。浅拷贝只复制对象的引用，而深拷贝创建了一个全新的对象，包含与原始对象相同的值和结构。深拷贝和浅拷贝各有适用的场景和注意事项。本文将详细介绍如何实现一个完整而优雅的深拷贝函数，处理循环引用和特殊类型，优化性能，并探讨深拷贝和浅拷贝的应用场景、注意事项和相关属性。

### ? 1. 深拷贝的实现 ###

实现一个完整而优雅的深拷贝函数需要考虑以下几个方面：

#### ? 1.1 基本类型和特殊类型的处理 ####

> 在实现深拷贝函数时，首先需要处理基本类型（如字符串、数字、布尔值等）和特殊类型（如函数、正则表达式和日期对象等）。对于基本类型，直接返回其值即可。对于特殊类型，可以选择直接引用原始对象，而不进行复制。

> 在上述代码中，我们使用 `typeof` 操作符判断基本类型，根据对象的类型选择适当的处理方式。对于函数、正则表达式和日期对象，我们使用相应的构造函数创建新的实例。

#### ? 1.2 处理循环引用 ####

> 循环引用是指对象属性之间存在相互引用的情况，导致递归复制陷入无限循环。为了处理循环引用，我们可以使用一个额外的数据结构（如 `Map` 或 `WeakMap`）来存储已经复制的对象，以便在遇到循环引用时进行判断和处理。
> 
> 下面是一个修改后的 `deepClone` 函数，解决了循环引用问题：

在上述代码中，我们使用 `Map` 数据结构来存储已经复制的对象。在每次递归调用时，我们首先检查 `map` 中是否存在当前对象的引用，如果存在则直接返回对应的副本。这样，我们可以避免陷入无限循环。

#### ? 1.3 性能优化 ####

深拷贝是一项相对耗费性能的操作，特别是在处理大型对象或嵌套层次很深的对象时。为了提高性能，可以考虑以下几个优化策略：

>  *  **循环拷贝**：使用循环代替递归，减少函数调用的开销。这可以通过迭代对象的属性并复制它们来实现。
>  *  **使用 `JSON` 序列化与反序列化**：`JSON.stringify()` 方法可以将对象序列化为字符串，`JSON.parse()` 方法可以将字符串解析为对象。使用这两个方法可以快速实现深拷贝，但它的适用范围受限，无法处理特殊类型（如函数和正则表达式）和循环引用。
>  *  **使用库函数**：许多优秀的 JavaScript 库（如 Lodash、Underscore）提供了高性能的深拷贝函数。这些库经过充分测试和优化，可以满足大多数深拷贝需求。

#### ? 1.4 完整的深拷贝实现示例 ####

下面是一个完整的深拷贝函数的实现，综合考虑了上述的处理方法：

// 也可以用WeakMap优化
    function deepClone(obj, hash = new WeakMap()) {
      if (obj === null || typeof obj !== 'object') {
        return obj;
      }
    
      if (hash.has(obj)) {
        return hash.get(obj);
      }
    
      const clone = Array.isArray(obj) ? [] : {};
    
      hash.set(obj, clone);
    
      if (obj instanceof Date) {
        return new Date(obj.getTime());
      }
    
      if (obj instanceof RegExp) {
        const flags = obj.flags;
        const pattern = obj.source;
        return new RegExp(pattern, flags);
      }
    
      if (typeof obj === 'function') {
        return cloneFunction(obj);
      }
    
      const keys = [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)];
    
      for (const key of keys) {
        clone[key] = deepClone(obj[key], hash);
      }
    
      return clone;
    }
    
    function cloneFunction(func) {
      const body = func.toString();
      const parameters = body.match(/\((.*?)\)/)[1];
      const functionBody = body.substring(body.indexOf('{') + 1, body.lastIndexOf('}'));
      return new Function(parameters, functionBody);
    }

### ? 2. 浅拷贝的实现 ###

与深拷贝不同，浅拷贝只复制对象的引用，而不创建对象的副本。下面是几种常见的浅拷贝方法：

#### ? 2.1 Object.assign() ####

> `Object.assign()` 方法用于将所有可枚举属性从一个或多个源对象复制到目标对象，并返回目标对象。它只会复制源对象的属性的引用，而不是属性的值。

const sourceObj = { name:
    
     'John', age: 25 };
    const targetObj = Object.assign({}, sourceObj);
    
    console.log(targetObj); // 输出：{ name: 'John', age: 25 }

> 在上述代码中，我们使用`Object.assign()`方法将源对象的属性复制到目标对象中。`targetObj` 是 `sourceObj` 的浅拷贝副本。

#### ? 2.2 展开语法（Spread Syntax） ####

展开语法（Spread Syntax）可以用于将一个对象的所有属性展开到另一个对象中。

const sourceObj = { name: 'John', age: 25 };
    const targetObj = { ...sourceObj };
    
    console.log(targetObj); // 输出：{ name: 'John', age: 25 }

> 在上述代码中，我们使用展开语法将源对象的所有属性展开到目标对象中。`targetObj` 是 `sourceObj` 的浅拷贝副本。

#### ? 2.3 数组浅拷贝 ####

> 对于数组的浅拷贝，可以使用`slice()` 或展开语法。

const sourceArray = [1, 2, 3];
    const targetArray1 = sourceArray.slice();
    const targetArray2 = [...sourceArray];
    
    console.log(targetArray1); // 输出：[1, 2, 3]
    console.log(targetArray2); // 输出：[1, 2, 3]

> 在上述代码中，我们使用 `slice()` 方法和展开语法将源数组的元素复制到目标数组中。`targetArray1` 和 `targetArray2` 都是 `sourceArray` 的浅拷贝副本。

### ? 3. 深拷贝与浅拷贝的应用场景 ###

深拷贝和浅拷贝各有适用的场景：

>  *  **深拷贝的应用场景**：
>     
>      *  当需要创建一个对象的完全独立副本时，以防止对原始对象的修改。
>      *  在对象状态管理中，需要创建对象的副本以记录历史状态、实现撤销和重做等操作。
>      *  在数据变换和处理过程中，创建对象的副本以避免对原始数据的修改。
>  *  **浅拷贝的应用场景**：
>     
>      *  当只需要复制对象的引用，而不需要创建对象的副本时。
>      *  在一些简单的数据处理场景中，浅拷贝可以更高效地完成任务。

### ? 4. 注意事项 ###

在使用深拷贝和浅拷贝时，需要注意以下几个问题：

>  *  **循环引用**：深拷贝和浅拷贝都需要注意循环引用的问题。循环引用是指对象之间相互引用，导致无限循环。在处理循环引用时，深拷贝需要使用额外的数据结构（如 `Map` 或 `WeakMap`）进行记录和判断，而浅拷贝则无法解决循环引用的问题。
>  *  **特殊类型的处理**：在实现深拷贝和浅拷贝时，需要注意特殊类型的处理。特殊类型包括函数、正则表达式等。对于特殊类型，深拷贝可以选择直接引用原始对象，而浅拷贝只会复制引用。
>  *  **性能开销**：深拷贝是一项相对耗费性能的操作，特别是在处理大型对象或嵌套层次很深的对象时。在实际应用中，需要根据场景权衡性能和需求。

### ? 结论 ###

> 深拷贝和浅拷贝是JavaScript中常用的拷贝方式，每种方式都有其适用的场景和注意事项。通过实现一个完整而优雅的深拷贝函数，我们可以轻松地创建对象的独立副本，并处理循环引用和特殊类型。浅拷贝则提供了一种快速复制对象的方式，适用于简单的数据处理场景。根据实际需求和性能要求，选择适合的拷贝方式，可以更好地满足业务需求。

> 请大家不吝赐教,在下方评论或者私信我,十分感谢???.
> 
> ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
> 
> ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
> 
> ✅ 对于文章中部分内容不理解
> 
> ✅ 解答我文章中一些疑问
> 
> ✅ 认为某些交互,功能需要优化,发现BUG
> 
> ✅ 想要添加新功能,对于整体的设计,外观有更好的建议
> 
> 最后感谢各位的耐心观看，既然都到这了，点个 ?赞再走吧

![fb77ce6b38ae44dfa8b5f6df780ba32a.jpeg][]

[cd36113cf50b4c3bb4a7b3edd4e78d0e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/7d6dadc297c4497c921b77e7d78e4261.gif
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[Link 2]: https://tinyurl.com/yangtaoWeb
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/8b3fd00890914ca4b1c420d66a134043.gif
[fb77ce6b38ae44dfa8b5f6df780ba32a.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/b9a0fbb6bc9945e489322cbd55a2c765.jpeg