阅读 4964

“深拷贝” 与 “浅拷贝” 的区别,JS实现深浅拷贝的几种方法

一、 “深拷贝” 与 “浅拷贝” 的区别

对于这个问题,可以考虑从深拷贝和浅拷贝的使用或者起源说起,也就是为什么会出现这个问题。

首先了解一些javascript的基本知识。


【1】javascript变量包含两种不同数据类型的值:基本类型和引用类型。

①基本类型值指的是简单的数据段,包括es6里面新增的一共是有6种,具体如下:

String、Number、Boolean、Null、Undefined、Symbol

②引用类型值指那些可能由多个值构成的对象,具体如下:

Object(Object、Array、Function)

在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值。基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值。

引用类型的值是保存在内存中的对象。与其他语言不同,JavaScript 不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。 在操作对象时, 实际上是在操作对象的引用而不是实际的对象。


【2】javascript的变量的存储方式--栈(stack)和堆(heap)

栈:自动分配内存空间,系统自动释放,里面存放的是基本类型的值和引用类型的地址

堆:动态分配的内存,大小不定,也不会自动释放。里面存放引用类型的值。

【3】javascript值传递与址传递

基本类型与引用类型最大的区别实际就是传值与传址的区别

值传递:基本类型采用的是值传递。

    let a = 10; // 定义一个变量a并赋值为10
    let b = a;  // 将a的值10赋值给b (a、b都是基本类型,值传递)
    b++;  // b自加
    console.log(a, b) // 10, 11复制代码

址传递:引用类型则是地址传递,将存放在栈内存中的地址赋值给接收的变量。

    let a = ['a', 'b', 'c']; // 定义一个数组a并赋值 
    let b = a;   // 数组是引用类型,采用地址传递,将a的地址赋值给b
    b.push('d'); // 给b数组增加一个'd'元素
    console.log(a) // ['a', 'b', 'c', 'd']
    console.log(b) // ['a', 'b', 'c', 'd']复制代码

分析:由于a和b都是引用类型,采用的是址传递,即a将地址传递给b,那么a和b必然指向同一个地址(引用类型的地址存放在栈内存中),而这个地址都指向了堆内存中引用类型的值。当b改变了这个值的同时,因为a的地址也指向了这个值,故a的值也跟着变化。
举例:就好比是a租了一间房,将房间的地址给了b,b通过地址找到了房间,那么b对房间做的任何改变(添加了一些绿色植物)对a来说肯定同样是可见的。

那么如何解决上面出现的问题,就是使用浅拷贝或者深拷贝了。 JS的基本类型不存在浅拷贝还是深拷贝的问题,主要是针对于引用类型

【4】浅拷贝和深拷贝区别总结

字面意思:

浅拷贝---拷贝的级别浅。

深拷贝---拷贝级别更深。

具体:

浅拷贝---浅拷贝是指复制对象的时候,只对第一层键值对进行独立的复制,如果对象内还有对象,则只能复制嵌套对象的地址

深拷贝---深拷贝是指复制对象的时候完全的拷贝一份对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。其实只要递归下去,把那些属性的值仍然是对象的再次进入对象内部一 一进行复制即可。

浅拷贝案例

浅拷贝解决就是先设置一个新的对象obj2,通过遍历的方式将obj1对象的值一 一赋值给obj2对象。

    // 数组的浅拷贝
    let arr1 = [1, 2, 3]
    let arr2 = []
    for (let i in arr1) {
      arr2[i] = arr1[i]
    }
    arr2.push(4)
    console.log(arr1)  // [1, 2, 3]
    console.log(arr2)  // [1, 2, 3, 4]

    // 对象的浅拷贝
    let obj1 = {
      a: '1',
      b: '2',
      c: '3'
    }
    let obj2 = {}
    for (let i in obj1) {
      obj2[i] = obj1[i]
    }
    obj2.d = '4'
    console.log(obj1) // {a: "1", b: "2", c: "3"}
    console.log(obj2) // {a: "1", b: "2", c: "3", d: "4"}

    // 浅拷贝函数封装
    function shallowCopy(obj1, obj2) {
      for(var key in obj1) {
        obj2[key] = obj1[key]
      }
    }复制代码

但上面代码只能实现一层的拷贝,无法进行深层次的拷贝,封装函数再次通过对象数组嵌套测试如下:

    // 浅拷贝函数封装
    function shallowCopy(obj1, obj2) {
      for(var key in obj1) {
        obj2[key] = obj1[key]
      }
    }

    // 对象的浅拷贝
    let obj1 = {
      a: '1',
      b: '2',
      c: {
        name: 'Demi'
      }
    }
    let obj2 = {}
    shallowCopy(obj1, obj2) //将obj1的数据拷贝到obj2
    obj2.c.name = 'dingFY'
    console.log(obj1) // {a: "1", b: "2", c: {name: 'dingFY'}}
    console.log(obj2) // {a: "1", b: "2", c: {name: 'dingFY'}}复制代码

结果证明,如果对象内还有对象,则只能复制嵌套对象的地址,无法进行深层次的拷贝,当改变obj2嵌套对象c的值后,obj1嵌套对象c的值也跟着变了

这个时候我们可以使用深拷贝来完成,所谓深拷贝,就是能够实现真正意义上的数组和对象的拷贝,我们通过递归调用浅拷贝的方式实现。

深拷贝案例

// 深拷贝函数封装
    function deepCopy(obj) {
      // 根据obj的类型判断是新建一个数组还是对象
      let newObj = Array.isArray(obj)? [] : {};
      // 判断传入的obj存在,且类型为对象
      if (obj && typeof obj === 'object') {
        for(key in obj) {
          // 如果obj的子元素是对象,则进行递归操作
          if(obj[key] && typeof obj[key] ==='object') {
            newObj[key] = deepCopy(obj[key])
          } else {
          // // 如果obj的子元素不是对象,则直接赋值
            newObj[key] = obj[key]
          }
        }
      }
      return newObj // 返回新对象
    }

    // 对象的深拷贝
    let obj1 = {
      a: '1',
      b: '2',
      c: {
        name: 'Demi'
      }
    }
    let obj2 = deepCopy(obj1) //将obj1的数据拷贝到obj2
    obj2.c.name = 'dingFY'
    console.log(obj1) // {a: "1", b: "2", c: {name: 'Demi'}}
    console.log(obj2) // {a: "1", b: "2", c: {name: 'dingFY'}}复制代码

结果证明上面的代码可以实现深层次的克隆。

数组的浅拷贝

如果是数组,我们可以利用数组的一些方法比如:slice、concat 返回一个新数组的特性来实现拷贝。

【1】Array.concat()

    let arr = ['one', 'two', 'three'];
    let newArr = arr.concat();
    newArr.push('four')

    console.log(arr)    // ["one", "two", "three"]
    console.log(newArr) // ["one", "two", "three", "four"]复制代码

【2】Array.slice()

    let arr = ['one', 'two', 'three'];
    let newArr = arr.slice();
    newArr.push('four')

    console.log(arr)    // ["one", "two", "three"]
    console.log(newArr) // ["one", "two", "three", "four"]复制代码

数组的深拷贝

这里介绍一个技巧,不仅适用于数组还适用于对象!不过存在一个问题,就是不能拷贝函数

    let arr = {
      a: 'one', 
      b: 'two', 
      c: {
        name: 'Demi'
      }
    };

    let newArr = JSON.parse( JSON.stringify(arr) );
    newArr.c.name = 'dingFY'
    console.log(arr);    // {a: "one", b: "two", c: {name: 'Demi'}}
    console.log(newArr); // {a: "one", b: "two", c: {name: 'dingFY'}}


    // 测试函数能否复制
    let arr = {
      a: 'one', 
      b: ()=>{
        console.log('test')
      }
    };

    let newArr = JSON.parse( JSON.stringify(arr) );
    console.log(arr);    // {a: "one", b: ()=>{console.log('test')}}
    console.log(newArr); // {a: "one"} // 函数没有复制成功复制代码

对象的浅拷贝

Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign() 进行的是浅拷贝

    let arr = {
      a: 'one', 
      b: 'two', 
      c: 'three'
    };

    let newArr = Object.assign({}, arr)
    newArr.d = 'four'
    console.log(arr);    // {a: "one", b: "two", c: "three"}
    console.log(newArr); // {a: "one", b: "two", c: "three", d: "four"}复制代码

浅拷贝封装方法

原理:遍历对象,然后把属性和属性值都放在一个新的对象

   let shallowCopy = function (obj) {
      // 只拷贝对象
      if (typeof obj !== 'object') return;
      // 根据obj的类型判断是新建一个数组还是对象
      let newObj = obj instanceof Array ? [] : {};
      // 遍历obj,并且判断是obj的属性才拷贝
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          newObj[key] = obj[key];
        }
      }
      return newObj;
    }复制代码

深拷贝封装方法

原理:我们在拷贝的时候判断一下属性值的类型,如果是对象,我们递归调用深拷贝函数就好了

    let deepCopy = function (obj) {
      // 只拷贝对象
      if (typeof obj !== 'object') return;
      // 根据obj的类型判断是新建一个数组还是对象
      let newObj = obj instanceof Array ? [] : {};
      // 遍历obj,并且判断是obj的属性才拷贝
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          // 如果obj的子属性是对象,则进行递归操作,否则直接赋值
          newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
      }
      return newObj;
    }复制代码

文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料



文章分类
前端
文章标签