• 深拷贝


    一、什么是深拷贝?(先简单理解概念)

    深拷贝是指,拷贝对象的具体内容,深拷贝在计算机中开辟一块新的内存地址用于存放复制的对象。源数据改变不会影响复制的数据。

    二、为什么要使用深拷贝?

    我们希望在改变新的数组(对象)的时候,不改变原数组(对象)

    arr=[100, [{a : 'hello'}, {b : "world"}], { c: "123456789" }];
        //判断修改的是不是'object'或者null,如果不是 object 或者 null 那么直接返回
        function deepClone(obj = {}) {
            if (typeof obj !== 'object' || obj == null) {
                return obj;
            }
            let result;
            //判断上面下来的obj是不是数组 用instanceof来检测 因为是数组应用类型 
     
     obj instanceof Array?result=[]:result={}
            for (var item in obj) {
                //查找一个对象是否有某个属性
                if (obj.hasOwnProperty(item)) {
                    // 递归调用
                    result[item] = deepClone(obj[item])
                }
            }
            return result;
        }
        let arr1=deepClone(arr);
        arr1[1][0].a='vue'
        arr1[0]=99
        console.log('原数组',arr)
        console.log('新数组',arr1)
    

    三、如何进行深拷贝(四种方法)

    1.可以通过 for in 实现

    function deepCopy1(obj) {
      let o = {}
      for(let key in obj) {
        o[key] = obj[key]
      }
      return o
    }
     
    let obj = {
      a:1,
      b: undefined,
      c:function() {},
    }
    console.log(deepCopy1(obj))
    

    2. 可以借用JSON对象的parse和stringify(对象的深拷贝)

    function deepClone(obj){
        let _obj = JSON.stringify(obj),
            objClone = JSON.parse(_obj);
        return objClone
    }    
    let a=[0,1,[2,3],4],
        b=deepClone(a);
    a[0]=1;
    a[2][0]=1;
    console.log(a,b);
    

    3.递归 自身调用自身(对象的深拷贝)

    function deepClone1(obj) {
      //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
      var objClone = Array.isArray(obj) ? [] : {};
      //进行深拷贝的不能为空,并且是对象或者是
      if (obj && typeof obj === "object") {
        for (key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] && typeof obj[key] === "object") {
              objClone[key] = deepClone1(obj[key]);
            } else {
              objClone[key] = obj[key];
            }
          }
        }
      }
      return objClone;
    }
    

    4.concat(数组的深拷贝)

    使用concat合并数组,会返回一个新的数组。
    对象是一个引用数据类型 普通的复制是一个浅拷贝。

  • 相关阅读:
    如何判断网页中引入jquery
    回车事件jquery
    bootcss
    jquery 固定导航
    vs2012常用快捷键总结
    网页上新闻,多余内容用....(省略号)代替
    git的使用
    vue获取点击事件源的方法
    JS实现复制功能
    AdminLTE 学习笔记
  • 原文地址:https://www.cnblogs.com/tommymarc/p/16160324.html
Copyright © 2020-2023  润新知