!!!总结实现深克隆的方法 (数组/对象)

420 阅读2分钟

浅拷贝/浅克隆(引用数据类型): 把A赋值给B 如果修改A或B中的内容 另外一方也改变

深拷贝/深克隆(基本数据类型): 把A赋值给B 如果修改A或B中的内容 另外一方没有改变

仔细理解该图

json

前后端数据交互的数据类型 是一个字符串

转换一:<JSON.stringify 把对象类型转成字符串类型>

转换二:<JSON.parse 把字符串转成对象>

  • 浅拷贝/克隆过程
    • 将obj赋值给obj,无论是改变谁的内容都会发生改变,且相同的数据

        var obj = {
          name: 'zs',
          age: 18
        } 
        var obj1=obj
        obj1.age = 20
      

如果想把引用数据类型对象obj或者数组实现深拷贝过程,在json中:先转换为字符串类型,然后赋值,再转换回对象

  • 深拷贝/克隆过程

      var obj = {
        name: 'zs',
        age: 18
      } 
      <!--obj2为字符串类型-->
      var obj2 = JSON.stringify(obj);转换一
      <!--obj2为对象类型-->
      obj2 = JSON.parse(obj2)转换二
      console.log(obj)
      console.log(obj2)
      <!--此时obj和obj2都是对象,且数据一样-->
      obj2.age = 4;
      console.log(obj)
      console.log(obj2)
      <!--此时obj2的数据发生变化,但是obj不发生改变-->
    

function

对象深克隆

    • key意为属性名。在函数中obj.key意为对象中属性名为key的那一项。如果key为一个变量,表示方法为 obj.[key] 即能拿到相对应的值 ,所拿到的每一个值相当于基本数据类型。在此前提下进行赋值的过程就是深拷贝的过程
  • 初始obj

      var obj = {
        name: 'zs',
        age: 18,
      }
    

    obj的深克隆过程

    设置一个空对象tmp来获取返回值

    deepclone的过程就是将对象基本数据类型赋值到另一个对象中若此时

      var o2 = deepClone(obj)
      o2.age = 18
    

则打印出来的结果是,obj内容不改变而o2数据发生改变

  • 改变后obj(内容增加一个对象)

    打印出来的结果是一起发生改变

  • 是因为在该图片过程中没有对每一项进行判断而是直接赋值,姓名和年龄的值为基本数据类型,而info为引用数据类型》》》》》》

  • 进行如下修改即可

    typeof(obj[key]) === 'object'
    

判断数据类型为引用数据类型:对象。

    tmp[key] = deepClone(obj[key]

再进行一次深克隆过程,获取对象中对象数据里的基本数据,赋值

就可不再一起改变

深克隆

扩展运算符

未完待续。。。。。。