深拷贝、浅拷贝的方法

客官°小女子只卖身不卖艺 2024-03-31 13:57 80阅读 0赞

**目录**

浅拷贝

深拷贝

--------------------

**深拷贝**与**浅拷贝**概念：

深浅拷贝出现的前提： 应用类型的数据（对象和数组）
    深拷贝就是把目标对象里面的数据一个一个都复制下来，创建出一个一模一样的，存放地
    址不一样，互不影响。就像真假美猴王。改变其中一个对象中的内容，另一个对象不会受
    到任何影响。
    浅拷贝就是单纯的复制内存地址，并没有复制对象本身，新旧两个都共享同一个内存。一荣
    俱荣一损共损的样子，任何一个对象里改变某一个属性值，那么另一个也会随之发生改变
    **区别：**浅拷贝只能复制第一层，想要深度拷贝的话就要用到深拷贝了

**深拷贝和浅拷贝的区别**

**1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用**

**2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”**

接下来我们就以下面这个obj1对象为例子，进行深浅拷贝的演示

const obj1 = {
        a: 1,
        b: undefined,
        arr: [1, 2, 3],
        fun: () => {}
      }

## **浅拷贝**![b2a60806589243299ede610e89df3b3a.png][] ##

**1.Object.assign()方法**

const obj2 = Object.assign({},obj1)

![4ee67bd3b4a345f79a2a7eda0f933684.png][]

![a774ba86007340ed965cca19ab45aaf6.png][]

**缺点：这里就会发现使用Object.assign()只能深拷贝一级属性，二级以上的属性（引用类型）就是浅拷贝了**

**2.扩展运算符**

const obj2 = {...obj1}

![9c036a4de82f494c858a675e33202f19.png][]

![425fdd2574b34b76873db25fb1a87afc.png][]

**缺点：这个方法和上面使用Object.assign()方法使用的结果都是一样的。只能深拷贝一级属性，二级以上属性（引用类型）就是浅拷贝了**

3.arrayObject.slice(start,end)、arrayObject.concat(arrayX,...,arrayX)

用法：

arrayObject.slice(start,end)

*  Object.assign()
 *  函数库lodash的\_.clone方法
 *  展开运算符…
 *  Array.prototype.concat()
 *  Array.prototype.slice()

## **深拷贝**![a25d4bc7b68047979ce5697f0e661b30.png][] ##

**1.写一个递归(推荐，比较完美的解决方案)**  
封装一个DeepClone的深拷贝函数

function DeepClone(data) {
        const newData = Array.isArray(data) ? [] : {}
        for (let key in data) {
          if (data[key] && typeof data[key] === 'object') {
            newData[key] = DeepClone(data[key])
          } else {
            newData[key] = data[key]
          }
        }
        return newData
      }

//deepClone 深拷贝
    function deepClone(source) {
      if (!source || typeof source !== 'object') {
        return source;
      }
      const targetObj = source.constructor === Array ? [] : {};
      for (const keys in source) {
        if (source.hasOwnProperty(keys)) {
          if (source[keys] && typeof source[keys] === 'object') {
            targetObj[keys] = source[keys].constructor === Array ? [] : {};
            targetObj[keys] = deepClone(source[keys]);
          } else {
            targetObj[keys] = source[keys];
          }
        }
      }
      return targetObj;
    }

//调用他

const obj2 = DeepClone(obj1)

![aa095a515283475fb5febe18e0bbdf04.png][]

**2.用for…in实现遍历和复制**

**3.利用数组的Array.prototype.forEach进copy**

![fea5d809b56a420c8ddb0156343ac2dd.png][]

**4.JSON转换方法**

const obj1 = {
        a: 1,
        b: undefined,
        arr: [1, 2, 3],
        fun: () => {}
      }

const obj2 = JSON.parse(JSON.stringify(obj1))

//这个方法可以，只不过function和undefined这种情况下无法复制

![341562981a404a708157fd182e5aec89.png][]

**缺点：你看到这里就会发现数据类型是 function 和 undefined 情况下无法复制，其他的都可以进行深层次的拷贝**

**5.loadash函数库**  
函数库lodash，也有提供\_.cloneDeep用来做深拷贝6.

let lodash = require('lodash');
    let list = [{ name: 'Tom' }];
    let copyList = lodash.cloneDeep(list);
    copyList[0].name = 'Jerry'
    console.log(list[0].name);      // Tom
    console.log(copyList[0].name);      // Jerry

[b2a60806589243299ede610e89df3b3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/731866e8ac0a486f8f4a885a9bc96bda.png
[4ee67bd3b4a345f79a2a7eda0f933684.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f0ce3b9b90bb4ef9a21f93dd7af20d13.png
[a774ba86007340ed965cca19ab45aaf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/717606ac5aa845a0a34404e210c86f7c.png
[9c036a4de82f494c858a675e33202f19.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c1e690db99c44559845fc666527d6792.png
[425fdd2574b34b76873db25fb1a87afc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f5d0e91ca8bf441ea33ad8cf549a67c4.png
[a25d4bc7b68047979ce5697f0e661b30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d5ff2bd98abf4cc3a73b3fc7e0215ae4.png
[aa095a515283475fb5febe18e0bbdf04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bf8c249cac774e9090ab2c7739961f8a.png
[fea5d809b56a420c8ddb0156343ac2dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0ee96eba8163424197864f9ab6aef4bc.png
[341562981a404a708157fd182e5aec89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0192b9492b404d879d67a50490cdd187.png