赋值与深浅拷贝（转自https://www.jianshu.com/p/fcaec412cc30）

在写敲代码的时候，经常会出现，改变了一个变量的值，结果其他变量的值也一并改变了，那么为什么会出现这种现象？

1、发生原理

前面介绍js数据类型时，有提到过，js数据类型分为基本类型和引用类型，基本类型存储在栈中，可以直接调用，引用类型存储在堆中，栈中存引用（指向堆的地址）。

当我们进行赋值操作时：

      let a = 1;
      let b = a;

浏览器在栈中创建变量a，并将其值设为1。紧接着，又创建了一个变量b，将其值设为a的值1。

      let a = {a:1};
      let b = a;

浏览器在栈中创建变量a，在堆中保存{a:1}，并将栈中a变量的值设为堆中的引用（地址）0x1。紧接着，在栈中创建变量b，并将a的值0x1赋给b。此时，a和b同时指向了堆中的数据{a:1}。

总的来说，当发生赋值操作时，基本类型给本身，引用类型给地址。

再回过去看文中开头的问题，也就不难理解了。当数据为引用类型时，直接赋值，并进行修改，会改向堆中的同一份数据。所以导致其他使用这个数据的变量随之改动。

2、如何避免？（如何拷贝）

很多时候，我们的需求是需要用一个变量去创建另一个全新的变量，并不希望两个变量联动。这里可以利用一些手段，在堆中重新创建一份数据。也就是我们说的深浅拷贝。【针对引用类型】

1、浅拷贝

浅拷贝会重新创建对象，但一般仅拷贝一层。如：

    let a = {a: 'a', b: [1, 2, 3]};
    let b = { ...a };
    console.log(b); //{a: 'a', b: [1, 2, 3]};
    b.a = 'b';
    console.log(a); //{a: 'a', b: [1, 2, 3]};
    console.log(b); //{a: 'b', b: [1, 2, 3]};
    b.b.push(4);
    console.log(a); //{a: 'a', b: [1, 2, 3, 4]};
    console.log(b); //{a: 'b', b: [1, 2, 3, 4]};

通过代码，不难看出，浅拷贝可以创建新的对象，并对第一层存储的数据赋值给新的对象中。基本类型给本身，引用类型给地址。所以a.a与b.a完全分隔，a.b，b.b，还存着同一个引用，指向同一份数据。

常用的浅拷贝方法有：

• ...扩展运算符（推荐）

eg:
let arr = [1, 2, 3]; let arrCopy = [...arr];
let obj = {a: 1, b: 1}; let objCopy = {...obj};

2、深拷贝

深拷贝会创建一份全新的对象，并为原始对象中的引用类型也创建一份新的对象。即有几层，拷贝几层。

常用的深拷贝方法有两个：

（1）JSON.parse() + JSON.stringify()

原理：利用JSON.stringify()将原始对象转换成JSON字符串，利用JSON.parse() 解析JSON字符串生成新的对象。

    let obj = {a: 1, b: [1, 2, 3]}; 
    let objCopy = JSON.parse(JSON.stringify(obj));
    objCopy.b.push(4);
    console.log(obj); //{a: 1, b: [1, 2, 3]};
    console.log(objCopy); //{a: 1, b: [1, 2, 3, 4]};

通过JSON.parse() + JSON.stringify()能较为简单的实现对象和数组的深拷贝，但仍会存在很多问题。

• 局限

我们已经了解到此方法会将原始对象转换成JSON字符串，紧接着再将JSON字符串解析生成新的对象。那么在“对象->JSON字符串->对象”这一过程中，必然存在一些转换的问题。

    let obj = {
        a: [1,2,3],
        b: {a: 'a'},
        c: new Date(),
        d: /[a-z]/,
        f: function a(){ alert(1) }
    }
    let objCopy = JSON.parse(JSON.stringify(obj));
    console.log(obj);
    // {
    //    a: [1, 2, 3], 
    //    b: {a: 'a'},
    //    c: Tue Feb 23 2021 11:38:49 GMT+0800 (中国标准时间),
    //    d: /[a-z]/,
    //    f: ƒ a()
    // }
    console.log(objCopy);
    // {
    //    a: [1, 2, 3], 
    //    b: {a: 'a'},
    //    c: "2021-02-23T03:38:49.679Z"
    //    d: {},
    // }

根据代码，我们不难发现：针对基本数据类型、对象、数组的时候，“JSON.parse(JSON.stringify(obj));”表现良好，但是针对日期Date、正则RegExp、函数Function的时候，会出现问题。

• Date
  JSON.stringify()会将Date对象转换成ISO日期格式的字符串，且JSON.parse()，并不会将其转换成Date对象。从而导致类型不一致。
• RegExp
  JSON.parse(JSON.stringify(obj));在处理正则的时候，会粗暴的直接将其转换成空对象，数据丢失。
• Function
  同理，JSON.parse(JSON.stringify(obj));在处理Function的时候，会将其转换成undefined，数据丢失。

（2）利用递归手写方法实现深拷贝

这部分内容，需要综合利用前文提到的知识点，进行构造，大家可以自行进行尝试。本文不进行赘述，下个文章会单独总结。

3、总结

• 改变了一个变量的值，其他变量也一并改变的原因是引用类型数据，栈中存放的是地址，两个变量用了同一份堆中的数据。
• 当数据为引用类型时，且想取消变量之间的关联，需要用到深浅拷贝。
• 当数据仅有一层时，利用...扩展运算符能很简单的实现数据的拷贝。
• 使用JSON.parse(JSON.stringify(obj));来进行深拷贝时，应注意对象中，不能存在Date、RegExp、Function类型的数据，不然会导致数据丢失。