前端值得一探究竟特辑 ---深拷贝与浅拷贝

1、深度理解深拷贝与浅拷贝

要立即深拷贝与浅拷贝，不得不从语言本身的角度出发，回归Javascript的数据类型。

原始类型

javascript中的原始值（undefined、null、布尔值、数字和字符串）与对象（包括数组和函数）有着根本区别。原始值是不可更改的：任何方法都无法更改（或“突变”）一个原始值，原始类型的比较是值的比较。

简单说来就是：基本数据类型值不可变。
对数字和布尔值来说显然如此 —— 改变数字的值本身就说不通，而对字符串来说就不那么明显了，因为字符串看起来像由字符组成的数组，我们期望可以通过指定索引来假改字符串中的字符。实际上，javascript 是禁止这样做的。字符串中所有的方法看上去返回了一个修改后的字符串，实际上返回的是一个新的字符串值。

基本数据类型的赋值是传值。在我们进行赋值操作的时候，基本数据类型的赋值（=）是在内存中新开辟一段栈内存，然后再把再将值赋值到新的栈中。

let str = 'abc';
str[0] // "a"
str[0] = 'A' // 返回了一个新字符串'A'，并没有改变str
str //"abc"

引用类型

引用类型（object）是存放在堆内存中的，变量实际上是一个存放在栈内存的指针，这个指针指向堆内存中的地址。引用类型值可变，引用类型的比较是引用的比较。

引用类型的赋值是传址。只是改变指针的指向，例如，也就是说引用类型的赋值是对象保存在栈中的地址的赋值，这样的话两个变量就指向同一个对象，因此两者之间操作互相有影响。

因此就出现了深拷贝和浅拷贝的现象。

直接复制、深拷贝与浅拷贝

直接复制： 新对象会指向源对象内存地址，源对象修改自身基本类型也会影响新对象。

浅度拷贝：新对象不会指向源对象内存地址，环境会为新对象开辟新的堆内存，用于存储新对象，新对象内的基本类型将通过传值获得，但对源对象里的引用类型进行传址操作，因此当改变源的对象里面的引用类型时，新对象也会改变。

深度拷贝：新对象不会指向源对象内存地址，环境会为新对象开辟新的堆内存，需要递归拷贝对象里的引用，直到子属性都为基本类型。两个对象对应两个不同的地址，修改源对象子对象的属性，不会影响新对象子对象的属性。

2、手撕深度拷贝

1. 如何写出一个惊艳面试官的深拷贝?

处理基本类型中的null， 以及引用对象的正则表达式对象

    function deepClone(sup) {
        if (Object.prototype.toString.call(sup) === '[object RegExp]') { // 如果是正则表达式，则进行特殊处理
            return new RegExp(sup);
        } else {
            let sub = Object.prototype.toString.call(sup) === '[object Array]' ? [] : {};
            for (let item in sup) { // for in 会对obj的第一层级进行遍历, item为键名或者数组下标
                if (sup.hasOwnProperty(item)) { // 只对sup私有属性进行深拷贝
                    if (typeof sup[item] === 'object') { // 如果item是引用类型，则递归调用deepClone
                        sub[item] = deepClone(sup[item]);
                    } else {
                        sub[item] = sup[item]; // 如果为基本类型，则直接复制
                    }
                }
            }
            return sub;
        }
    }

2. 被拷贝对象为Object，且有正则子对象

对正则对象暂且考虑能否正确拷贝。

    const a = {
        ax: 1,
        aArr: [2, 3, 4, [5, 6]],
        aObj: {
            objx: "a",
            objArr: [2, 3, 4, [5, 6]],
            objO: { oox: 0 },
        	aRegExp: /[a-z]/g,
        }
    }
    const b = deepClone(a);
    a.ax = 2;
    a.aObj.objArr.pop();
    a.aArr.pop();

基本类型顺利拷贝，引用类型的修改拷贝前后互不影响，正则对象顺利拷贝，null顺利拷贝。

3、快捷深拷贝

1. JSON解析

可以深度拷贝引用类型，表现非常出色啦，只是无法拷贝 RegExp 及 undefined。

    const a = {
        ax: 1,
        aArr: [2, 3, 4, [5, 6]],
        aObj: {
            objx: "a",
            objArr: [2, 3, 4, [5, 6]],
            objO: { oox: 0 }
        },
        aRegExp: /[a-z]/g,
    }
    const b = JSON.parse(JSON.stringify(a));
    a.aObj.objArr.pop();
    a.aArr.pop();
    a.aRegExp = new RegExp(/[A-Z]/g);

基本类型顺利拷贝，包括null，但不能拷贝undefined，引用类型的修改拷贝前后互不影响，但正则表达式的拷贝有误

4、 常见浅拷贝

1. Object.assgin

可以拷贝基本类型(包括null和undefined)和正则表达式，但是对象和数组是传址。

    const a = {
        ax: 1,
        aArr: [2, 3, 4, [5, 6]],
        aObj: {
            objx: "a",
            objArr: [2, 3, 4, [5, 6]],
            objO: { oox: 0 }
        },
        aRegExp: /[a-z]/g,
    }
    const b = Object.assign(Object.prototype.toString.call(a) === '[object Array]' ? [] : {}, a);
    a.aObj.objArr.pop();
    a.aArr.pop();
    a.aRegExp = new RegExp(/[A-Z]/g);

基本类型顺利拷贝，正则对象顺利拷贝，null顺利拷贝， 但引用类型的修改拷贝前后影响，属于传址拷贝。

2. 数组concat

数组内的基本类型及正则表达式传值赋值，但引用类型为传址赋值

    const a = [0, 1, 2, 3, /[a-z]/g, [4, 5, 6], {
        objx: "a",
        objArr: [2, 3, 4, [5, 6]],
        objO: { oox: 0 }
    }, null, undefined,];
    const b = a.concat([]);
    a[0] = 'a';
    a[4] = new RegExp(/[A-Z]/g);
    a[5].pop();
    a[6].objArr.pop();
    console.log(a);
    console.log(b);

基本类型顺利拷贝，正则对象顺利拷贝，null顺利拷贝， 但引用类型的修改拷贝前后影响，属于传址拷贝。

3. 解构赋值

基本类型及正则表达式传值赋值，但引用类型为传址赋值

	const a = {
        ax: 1,
        aArr: [2, 3, 4, [5, 6]],
        aObj: {
            objx: "a",
            objArr: [2, 3, 4, [5, 6]],
            objO: { oox: 0 }
        },
        aRegExp: /[a-z]/g,
        aNull: null,
        aUndefined: undefined
    }
   const {ax, aObj, aArr, aRegExp} = a;    
    a.ax = 2;
    a.aObj.objx = 'b';
    a.aObj.objArr.pop();
    a.aArr.pop();
    a.aRegExp = new RegExp(/[A-Z]/g);

基本类型顺利拷贝，正则对象顺利拷贝，null顺利拷贝， 但引用类型的修改拷贝前后影响，属于传址拷贝。