js---封装浅拷贝和深拷贝

一、前置知识

基本数据类型和引用数据类型的存储方式

二、概念

浅拷贝：只能拷贝最外面一层的数据，基本类型的数据直接拷贝值；引用数据类型只拷贝数据的引用（地址），拷贝的引用类型数据与源数据指向同一个堆内存空间，当拷贝的引用类型数据或者源数据其中一方修改时，双方会被同时修改。

深拷贝：拷贝多层数据；每一层的基本数据类型和引用数据类型的数据都会复制一份，其中复制引用数据类型的数据是具有新的内存空间，拷贝的所有数据与源数据互不影响。

三、浅拷贝

1.推荐使用es6的 Object.assgin() 实现浅拷贝

mdn地址：

Object.assign() - JavaScript | MDN

2.自己封装浅拷贝函数

 <script>
    // -----------------------利用for in 实现对象的浅拷贝----------------------
    // 1.拷贝的数据源
    const obj = {
      name: "hsq",
      age: 18,
      color: ["red", "blue", "green"],
      children: {
        name: 'xxx',
        age: 1
      },
      say: function () {
        console.log(this);
      }
    }
 
    //2.调用浅拷贝函数将数据源obj进行浅拷贝并返回拷贝好的对象，使用testObj常量接收
    const testObj = simpleObjClone({}, obj)
 
    //3.修改数据源对象中的引用类型属性color数组的第一项
    obj.color[0] = 'hhh'
 
    //4.打印通过浅拷贝成功的对象的引用类型属性color数组的第一项，发现浅拷贝的数据发生更改
    console.log(testObj.color[0]);//hhh
 
    //浅拷贝函数
    function simpleObjClone(resultObj, Obj) {
      //两个参数必须存在而且要求参数的类型相同,类型同为数组或者对象
      const verify1 = resultObj && isArray(resultObj) && Obj && isArray(Obj)
      const verify2 = resultObj && isObject(resultObj) && Obj && isObject(Obj)
      if (verify1 || verify2) {
        // 利用for in循环对象或者数组的每一项并复制给resultObj参数
        for (const key in Obj) {
          resultObj[key] = Obj[key]
        }
        // 循环复制完毕后返回复制完毕的对象或者数组
        return resultObj
      }
      else {
        throw new Error("两个参数必须存在而且要求参数的类型相同,类型同为数组或者对象")
      }
    }
 
    //判断是否是数组
    function isArray(obj) {
      return Object.prototype.toString.call(obj) == '[object Array]';
    }
    //判断是否是对象
    function isObject(obj) {
      return Object.prototype.toString.call(obj) == '[object Object]';
    }
  </script>

四、深拷贝

封装深拷贝函数

 <script>
    // -----------------------利用递归和for in 实现对象的深拷贝----------------------
    // 1.拷贝的数据源对象
    const obj = {
      name: "hsq",
      age: 18,
      color: ["red", 1, false, undefined, null],
      children: {
        name: 'xxx',
        age: 12
      },
      say: function () {
        console.log('enenen');
      }
    }
 
    //2.调用深拷贝函数将数据源obj进行深拷贝并返回拷贝好的对象，使用testObj常量接收
    const testObj = deepObjClone({}, obj)
    //3.修改数据源对象中的引用类型属性color数组的第一项
    obj.color[0] = "hhh"
 
 
    //4.打印通过深拷贝成功的对象的引用类型属性color数组的第一项，发现深拷贝的数据发生没有更改
    console.log(testObj.color[0]);//red
 
    //深拷贝函数
    function deepObjClone(resultObj, Obj) {
      //两个参数必须存在而且要求参数的类型相同,类型同为数组或者对象
      const verify1 = resultObj && isArray(resultObj) && Obj && isArray(Obj)//参数校验1
      const verify2 = resultObj && isObject(resultObj) && Obj && isObject(Obj)//参数校验2
      if (verify1 || verify2) {
        //使用for in递归循环进行深拷贝
        for (const key in Obj) {
          //ObjTtem存储遍历数组或者对象的每一项属性值
          let ObjTtem = Obj[key]
          //遍历的属性值为数组
          if (ObjTtem instanceof Array) {
            //为拷贝对象添加属性，属性值为数组，数组内容由递归填充
            resultObj[key] = deepObjClone([], ObjTtem)
          }
          //遍历的属性值为函数对象
          else if (ObjTtem instanceof Function) {
            resultObj[key] = cloneFunction(ObjTtem)
          }
          //遍历的属性值为普通对象
          else if (ObjTtem instanceof Object) {
            //为拷贝对象添加属性，属性值为对象，对象内容由递归填充
            resultObj[key] = deepObjClone({}, ObjTtem)
          }
          //遍历的属性值为普通数据类型时直接赋值给拷贝对象的属性
          else {
            resultObj[key] = ObjTtem
          }
        }
        return resultObj
      }
      else {
        throw new Error("两个参数必须存在而且要求参数的类型相同,类型同为数组或者对象")
      }
 
    }
    //判断是否是数组
    function isArray(obj) {
      return Object.prototype.toString.call(obj) === '[object Array]';
    }
    //判断是否是对象
    function isObject(obj) {
      return Object.prototype.toString.call(obj) === '[object Object]';
    }
    //深拷贝函数
    function cloneFunction(fn) {
      //参数验证
      if (!(fn && fn instanceof Function)) {
        throw new Error("参数为必须并且参数类型为函数")
      }
      // 将函数转成字符串
      let str = fn.toString()
      //截取函数体内容字符串
      let subStr = str.substring(str.indexOf("{") + 1, str.lastIndexOf("}"))
      // 利用截取函数体内容的字符串和函数的构造器生成新的函数并返回
      return new Function(subStr)
    }
  </script>