关于Js深拷贝的三种方法详细讲解

目录

前言

一、pandas是什么？

二、使用步骤

1.利用函数递归来实现深拷贝

2.利用引入lodash包

3.利用JSON字符串转换

总结

前言

当涉及到JavaScript数据拷贝的时候，深拷贝是一个非常关键的概念。在JavaScript中，对象和数组被认为是引用类型，因此在进行赋值操作时，实际上是复制的引用而不是真正的拷贝。这就意味着当我们修改或操作某个拷贝后的对象或数组时，原始对象或数组也会被影响。

为了解决这个问题，我们可以使用深拷贝的方法来创建一个完全独立的副本，以便我们可以自由地修改或操作它，而不会影响到原始的数据。

在本文中，我们将详细讲解三种常用的JavaScript深拷贝方法，分别是递归拷贝、JSON序列化和使用第三方库。通过学习这些方法，我们将能够更好地理解深拷贝的原理以及如何在实际开发中应用它们。

让我们开始探索这三种方法，深入了解它们的优缺点以及适用场景。无论你是初学者还是有经验的开发者，相信本文都能对你有所帮助。让我们一起来掌握深拷贝的技巧，提升我们的JavaScript编程能力吧！

提示：以下是本篇文章正文内容，下面案例可供参考

一、为什么要用深拷贝？

二、使用步骤

1.利用函数递归来实现深拷贝

了解什么是递归函数：

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数
 简单理解:函数内部自己调用自己, 这个函数就是递归函数
 递归函数的作用和循环效果类似
一个简单的递归函数：

 let u = 1;
      function pan() {
        console.log(`今天星期${u}`);
        if (u >= 7) {
          return;
        }
        u++;
        pan();
      }
      pan();

利用递归解释深拷贝问题：

 function deepColy(newobj, OldObj) {
        for (let k in OldObj) {
          if (OldObj[k] instanceof Array) {
            newobj[k] = [];
            deepColy(newobj[k], OldObj[k]); //再利用递归调用一下函数  []  ["小明", "小曹"]
          }
          if (OldObj[k] instanceof Object) {
            newobj[k] = {};
            deepColy(newobj[k], OldObj[k]); //再利用递归调用一下函数  {}   hoae: "河北", hoon: "邯郸",
          } else {
            //newobj[k]  创建   k 是属性名
            newobj[k] = OldObj[k];
          }
        }
      }

总结：

当一个函数调用自身时，它会创建一个新的函数执行上下文，并将其添加到执行栈中。递归函数通常会包含一个或多个基本情况（base cases），用于终止递归的过程，并包含一个递归情况（recursive case），用于调用自身并不断进行计算。

递归在实现深拷贝时非常有用。在深层嵌套的对象或数组中，我们可以使用递归来遍历每个属性或元素，并进行拷贝操作。递归函数可以在遇到对象或数组时再次调用自身，以实现对嵌套层级的完全拷贝。

需要注意的是，在使用递归时，我们需要确保设置好基本情况，以避免进入无限循环的情况。此外，递归的性能可能不如迭代方式高效，因为每次调用递归函数都会创建新的函数执行上下文，消耗内存和处理时间。

2.利用引入lodash包

lodash

给大家说一下关于lodash如何使用：cmd下载方法

下载Lodash非常简单，可以使用npm（Node Package Manager）或者yarn来下载。

使用npm下载Lodash的命令是：
npm install lodash
使用yarn下载Lodash的命令是：
yarn add lodash
以上命令会自动从npm仓库下载Lodash，并将其添加到项目的依赖中。

如果你想下载Lodash的特定版本，可以使用以下命令：

使用npm下载特定版本的Lodash：
npm install lodash@版本号
使用yarn下载特定版本的Lodash：
yarn add lodash@版本号
例如，如果你想下载Lodash的4.17.21版本，可以使用以下命令：

使用npm下载Lodash 4.17.21：
npm install lodash@4.17.21
使用yarn下载Lodash 4.17.21：
yarn add lodash@4.17.21
下载完成后，你就可以在你的项目中引入和使用Lodash了。例如：
const _ = require('lodash');

// 使用Lodash的函数
const result = _.capitalize('hello world');
console.log(result); // 输出：Hello world

第二利用引入js包来解决

我已经为大家下载好需要的私信我

也可以去 https://www.lodashjs.com/

 <script src="../第四天/lodash.min.js"></script>
    <script>
      const obj = {
        uname: "小明",
        age: 19,
        hooby: ["小明", "小曹"],
        finally: {
          hoae: "河北",
          hoon: "邯郸",
        },
      };
      const mang = _.cloneDeep(obj);
      console.log(mang);
      obj.finally.hoae = "四川";
      console.log(obj);
      console.log("_------------------------------------");

该处使用的url网络请求的数据。

3.利用JSON字符串转换

利用JSON字符串转换实现深拷贝的过程可以分为以下几个步骤：

首先，将需要拷贝的对象转换成JSON字符串。
const obj = { foo: 'bar', nested: { baz: 'qux' } };
const jsonString = JSON.stringify(obj);
然后，将JSON字符串转换回对象，这将创建一个新的对象。
const newObj = JSON.parse(jsonString);
现在，newObj是原始对象的深拷贝。你可以对newObj进行修改，而不会影响到原始对象。
newObj.foo = 'baz';
newObj.nested.baz = 'quux';

console.log(obj.foo); // 输出：'bar'
console.log(obj.nested.baz); // 输出：'qux'
console.log(newObj.foo); // 输出：'baz'
console.log(newObj.nested.baz); // 输出：'quux'
需要注意的是，使用JSON字符串转换方法实现深拷贝有一些限制。例如，如果对象中包含函数、不可枚举的属性、循环引用等特殊情况，JSON.stringify()可能会在转换过程中丢失或无法正确处理这些数据。在这种情况下，你可能需要使用其他深拷贝方法，如递归深拷贝或第三方库。