js浅拷贝和深拷贝

---

前言

提示：今天我们要讲解的内容是浅拷贝以及深拷贝,顺带会讲到栈内存和堆内存

---

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

一、什么是栈内存和堆内存

       let a = 3;
       let b = a;
       b = 2;
       console.log(a);
       console.log(b);
//很明显由于数值属于栈内存,所以结果是a =3 ,b =2

接下来我们看这样一个案例

      let obj = {
        name: "小明",
        age: 20,
      };
      let newobj = {};
      newobj = obj;
      obj.name = "小刚";
      console.log(obj);
      console.log(newobj);

 为什么会出现这种结果呢,这个时候我们就需要了解一下栈内存和堆内存了。

 可以看到上方的这个图例,你修改的是obj.name但是实际上由于堆内存的原因,两者都指向同一个数据,你只要修改其中一个另一个的结果也会改变,做到这里,我们就可以引入今天的主题,浅拷贝与深拷贝了。

总结:

存放到我们堆内存中的是原始数据类型,而原始数据类型包括,数值,字符串,Null,undefined,Boolean

存放到我们栈内存中的是复杂数据类型,复杂类型，又叫做引用类型，在存储对象是存储的仅仅是地址（引用），因此叫又引用类型

复杂类型是通过new关键字创建的对象，如Object,Array,Date等

二、什么是浅拷贝?浅拷贝解决了什么问题

1.定义一个obj对象

代码如下（示例）：

let obj = {
        name: "小明",
        age: 20,
      };

2.写一个浅拷贝案例

代码如下（示例）：

      let obj = {
        name: "小明",
        age: 20,
      };
      let newobj = {};
      for (let i in obj) {
      //将obj复制一个等于newobj
      //for in语句,输出i代表的是属性名,输出obj[i]代表的是属性值
        newobj[i] = obj[i];
      }
      obj.name = "小亮";
      console.log(obj);
      console.log(newobj);
      //这里的结果就是我们想要的结果了。

这里的结果就已经修改成我们想要的样子了

三 什么是深拷贝,深拷贝相对于浅拷贝呢？

下方代码是在浅拷贝的基础之上添加了一个firendname,对象里面的名字叫做小张,

 let obj = {
        name: "小明",
        age: 20,
        firendname: {
          name: "小张",
        },
      };
      let newobj = {};
      for (let i in obj) {
        newobj[i] = obj[i];
      }
      obj.firendname.name = "小刚";
      console.log(obj);
      console.log(newobj);

我们只是修改了obj内部firendname里面name的名字,但是结果就有点让人大跌眼镜

---

 这里我们就要引出我们今天的第二个重点内容了,深拷贝

 let obj = {
        name: "小明",
        age: 20,
        firendname: {
          name: "小张",
        },
      };
      function copy(obj) {
        let newobj = {};
        for (let i in obj) {
     //这里来判断一下如果obj[i]有内容是对象,如果有的话再克隆一遍
          if (obj[i] instanceof Object) {
            newobj[i] = copy(obj[i]);
          } else {
     //如果没有就正常显示
            newobj[i] = obj[i];
          }
        }
     
        return newobj;
      }
      const newobj = copy(obj);
      newobj.firendname.name = "小刚";
      console.log(obj);
      console.log(newobj);

这里控制台就输出了我们想要的结果

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了浅拷贝和深拷贝的使用，而浅拷贝和深拷贝在我们以后处理数据的时候会大大被使用到。