详解js中的对象的深浅拷贝

谁践踏了优雅 2023-07-13 10:46 9阅读 0赞

## 前言 ##

本文是整理的浅拷贝和深拷贝中涉及的知识点，在工作中是非常重要的，在面试中也是必考的，希望对小伙伴们有所帮助！  
![cmd-markdown-logo][]

## 为什么会产生深浅拷贝？ ##

首先我们要知道一个流程

1，对象属于引用类型的，以后浏览器会为其开辟一个新的内存空间，并为它分配一个16进制的地址

2，按照一定的顺序，把对象的键值对存储到内存空间

3，把开辟的内存地址赋值给变量(或事件)，以后变量就通过地址找到内存空间，然后进行操作

## 基本数据类型和引用数据类型 ##

**数据分为基本数据类型和引用数据类型**

**基本数据类型**

String、Number、Boolean、Null、Undefined、Symbol

基本数据类型是直接存储在栈中的数据

let str1 = '123';
    str2 = str1;
    str2 = '456';
    console.log(str1); // '123'
    console.log(str2); // '456'

**形象举例：**

我之前买了一双鞋子，我现在又买了一双，某一双坏了不会影响到另外一双

**引用数据类型**

Array、Object

引用数据类型存储的是该对象在栈中引用，真实的数据存储在内存中

let arr1 =[1,2,3,4,5,6];
    arr2 = arr1;
    arr2.pop();
    console.log(arr1);//[ 1, 2, 3, 4, 5 ]
    console.log(arr2);//[ 1, 2, 3, 4, 5 ]

**形象举例：**

在大草原上，有一些羊吃了腐烂的草得病死了。草原还是草原，但是内部的草变少了；羊群还是羊群，但是内部的羊变少了

## 深拷贝和浅拷贝的概念 ##

**浅拷贝：**

仅仅复制对象的引用，而不是对象本身

**深拷贝：**

把复制的对象所引用的全部对象都复制一遍

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

![cmd-markdown-logo][cmd-markdown-logo 1]  
![cmd-markdown-logo][cmd-markdown-logo 2]

<table> 
 <thead> 
  <tr> 
   <th align="center">~</th> 
   <th align="center">和原数据是否指向同一对象</th> 
   <th align="center">第一层数据为基本数据类型</th> 
   <th align="center">原数据中包含子对象</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">赋值</td> 
   <td align="center">是</td> 
   <td align="center">改变会使数据一同改变</td> 
   <td align="center">改变会使原数据一同改变</td> 
  </tr> 
  <tr> 
   <td align="center">浅拷贝</td> 
   <td align="center">否</td> 
   <td align="center">改变不会使原数据一同改变</td> 
   <td align="center">改变会使数据一同改变</td> 
  </tr> 
  <tr> 
   <td align="center">深拷贝</td> 
   <td align="center">否</td> 
   <td align="center">改变不会使原数据一同改变</td> 
   <td align="center">改变不会使原数据一同改变</td> 
  </tr> 
 </tbody> 
</table>

## 浅拷贝 ##

### 通用循环 ###

运行结果：  
![cmd-markdown-logo][cmd-markdown-logo 3]

### object.assign() ###

*  Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象
 *  Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身

运行结果：  
![cmd-markdown-logo][cmd-markdown-logo 4]

### Array.prototype.concat() ###

concat()是数组的一个内置方法，用户合并两个或者多个数组

这个方法不会改变现有数组，而是返回一个新数组

const arr1 = [1,{username: 'ming',},];
      let arr2 = arr1.concat();
      arr1[0] = 2;
      arr1[1].username = 'meng';
      console.log(arr1);
      console.log(arr2);

运行结果：  
![cmd-markdown-logo][cmd-markdown-logo 5]

### Array.prototype.slice() ###

slice()也是数组的一个内置方法，该方法会返回一个新的对象

slice()不会改变原数组

const arr1 = [1,{username:'ming',},];
    let arr2 = arr1.slice();
    arr2[0] = 2;
    arr2[1].username = 'meng'
    console.log(arr1);
    console.log(arr2);

运行结果：  
![cmd-markdown-logo][cmd-markdown-logo 6]

### obj展开运算符 ###

展开运算符是ES6中新提出来的一种运算符

在拷贝数组、对象以及拼接数组等方面都可以使用

这步我们也可以尝试下使用const obj2 = \{…obj1\}的形式进行浅拷贝

//拷贝数组
    const arr1 = [1, 2, 3];
    const arr2 = [...arr1]; // like arr.slice()
    arr2.push(8); 
    
    console.log(arr1); // [ 1, 2, 3 ]
    console.log(arr2); // [ 1, 2, 3, 8 ]
    
    //拷贝对象
    const obj1 = {
      name: 'ming',
      arr1: ['9', '7', '6'],
      obj: {
        name: 'meng',
        arr2: ['7', '8', '9'],
      },
    };
    const obj2 = {...obj1};// like arr.slice()
    obj2.name = 'ming2';
    obj2.arr1 = ['null'];
    obj2.obj.name = 'meng2';
    obj2.obj.arr2 = ['null'];
    
    console.log(obj1);
    console.log(obj2);

运行结果：  
![cmd-markdown-logo][cmd-markdown-logo 7]

## 深拷贝 ##

### 手动递归 ###

function deepClone (sourceObj, targetObj) {
        let cloneObj = targetObj || {}
        if(!sourceObj || typeof sourceObj !== "object" || sourceObj.length === undefined){
            return sourceObj
        }
        if(sourceObj instanceof Array){
            cloneObj = sourceObj.concat()
        } else {
            for(let i in sourceObj){
                if (typeof sourceObj[i] === 'object') {
                    cloneObj[i] = deepClone(sourceObj[i], {})
                } else {
                    cloneObj[i] = sourceObj[i]
                }
            }
        }
        return cloneObj
    }
    let sourceObj = {
      a: 1,
      b: {
        a: 1
      },
      c: {
        a: 1,
        b: {
          a: 1
        }
      },
      d: function() {
        console.log('hello world')
      },
      e: [1, 2, 3]
    }
    let targetObj = deepClone(sourceObj, {})
    targetObj.c.b.a = 9
    console.log(sourceObj)
    console.log(targetObj)

运行结果：  
![cmd-markdown-logo][cmd-markdown-logo 8]

### Json.parse(Json.Stringify()) ###

JSON.stringify():把一个js对象序列化为一个JSON字符串

JSON.parse():把JSON字符串反序列化为一个js对象

const arr9 = [
        1,
        {
          username:'ming',
        },
      ];
      let arr10 = JSON.parse(JSON.stringify(arr9));
      arr10[0]=2;
      arr10[1].username='meng';
      console.log(arr9);
      console.log(arr10);

运行结果：  
![cmd-markdown-logo][cmd-markdown-logo 9]

let obj = {
        name: 'ming',
        age: 20,
        friend: {
          name: 'ming1',
          age: 19
        }
      };
      let copyObj = JSON.parse(JSON.stringify(obj));
      obj.name = 'meng';
      obj.friend.name = 'meng1';
      console.log(obj);
      console.log(copyObj);

运行结果：  
![cmd-markdown-logo][cmd-markdown-logo 10]

### 函数库Lodash ###

Lodash作为JavaScript函数库/工具库，它里面有非常好用的封装好的功能

var _= require('lodash');
    const obj1 = [
      1,
      'Hello!',
      { name:'ming1' },
      [
        {
          name:'meng1',
        }
      ],
    ]
    const obj2 = _.cloneDeep(obj1);
    obj2[0] = 2;
    obj2[1] = 'Hi!';
    obj2[2].name = 'ming2'
    obj2[3][0].name = 'meng2';
    console.log(obj1);
    console.log(obj2);

运行结果：  
![cmd-markdown-logo][cmd-markdown-logo 11]

## 最后 ##

如果本文对你有帮助得话，给本文点个赞❤️❤️❤️

欢迎大家加入，一起学习前端，共同进步！  
![cmd-markdown-logo][cmd-markdown-logo 12]  
![cmd-markdown-logo][cmd-markdown-logo 13]

[cmd-markdown-logo]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8yNS8xNmVhMmZjOGY3N2NkYzM3?x-oss-process=image/format,png
[cmd-markdown-logo 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZDE4OGYxM2IwNDg3?x-oss-process=image/format,png
[cmd-markdown-logo 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZDE4ZTVhNDE2NjJk?x-oss-process=image/format,png
[cmd-markdown-logo 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZDU3ODRmNmU1OWY0?x-oss-process=image/format,png
[cmd-markdown-logo 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZDU0MzljMTIzOWIz?x-oss-process=image/format,png
[cmd-markdown-logo 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZDkxMTBmN2ZmOGQ4?x-oss-process=image/format,png
[cmd-markdown-logo 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZGJmOTQ0MzhmNzA4?x-oss-process=image/format,png
[cmd-markdown-logo 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZGNkZjZkN2E5NjE2?x-oss-process=image/format,png
[cmd-markdown-logo 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZTQ5NWMxMjAxMmVi?x-oss-process=image/format,png
[cmd-markdown-logo 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZGRjZDNlOWE0ZTEx?x-oss-process=image/format,png
[cmd-markdown-logo 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZGRlZThjMWI2ZWEx?x-oss-process=image/format,png
[cmd-markdown-logo 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMC8yNC8xNmRmZGUyNjYzNDhjZjk1?x-oss-process=image/format,png
[cmd-markdown-logo 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGUzNmNhZjkzZmI?x-oss-process=image/format,png
[cmd-markdown-logo 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGU4YjExZDBjZTY?x-oss-process=image/format,png