深拷贝与浅拷贝的理解及其实现的方法

一、概念区分

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

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

二、问题与思考

定义数组a，将a赋值给b,修改b数组里的元素，分别打印a,b两个数组，结果a,b两个数组的元素同时被修改。

let a=[0,1,2,3,4],
    b=a;
a[0]=1;
console.log(a); // [1,1,2,3,4]
console.log(b); // [1,1,2,3,4]

因为上述的问题，引出了栈堆，js的基本数据类型与引用数据类型

1、栈(stack)和堆（heap）

stack为自动分配的内存空间，它由系统自动释放；而heap则是动态分配的内存，大小也不一定会自动释放

2、数据类型

JS分两种数据类型：

(1) 基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型可以直接操作保存在变量中的实际值。

(2) 引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）

3、基本数据类型

基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问

4、引用数据类型

引用类型是存放在堆内存中的对象，每个空间大小不一样，要根据情况进行特定的配置，变量其实是保存的在栈内存中的一个指针（保存的是堆内存中的引用地址，这个指针指向堆内存。）实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象

上述问题中，将a赋值给b,实际上是将a的引用赋值给了b,此时a和b同时指向同一个堆内存，当修改b的值，自然也会影响到a的值。那么将a赋值给b,修改b的时候如何做到不影响a呢？？？那么就用深拷贝，将a的各项属性的“值”都拷贝给b。实现方法很多。

三、深拷贝的方法与评析

1.方法一：封装一个深拷贝的方法

/**
 * @desc 深拷贝
 * @param {Object} obj 需要拷贝的数据
 */
export const deepClone = obj => {
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(let key in obj){
            if(obj.hasOwnProperty(key)){
                //判断obj子元素是否为对象，如果是，递归复制；否则，简单复制
                if(obj[key] && typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

测试：定义对象a，b调用自定义方法deepClone，深拷贝a,并修改b对象的值，测试是否会影响a。

let a=[
    {name:'April',age:18},
    [3,4,5],
    1
]
 let b=deepClone(a)
 b[0].name='april'
 b[1][0]=300
 console.log("b==>",b,"a==>",a)

测试结果，修改b,并不会影响到a。（结果如下图）

2. 方法二：借用JSON对象的parse和stringify

let b = JSON.parse(JSON.stringify(a)) //深拷贝a , 并赋值给b

这种方法可以简单，便捷的实现深拷贝，但是它有局限性。当值为undefined、function、symbol 会在转换过程中被忽略。所以，对象值有这三种的话用这种方法会导致属性丢失。测试如下：

let sym=Symbol(sym);
let a=[
    {name:'April',age:18,fun:function(){ console.log(100) },telephone:undefined,sym:sym},
    [3,4,5],
    1
]
let b = JSON.parse(JSON.stringify(a))
console.log("a==>",a,"b==>",b)

建议：当对象中包含值为undefined、function、symbol 的数据时，不要采用此方法进行深拷贝。

以下介绍的方法只能拷贝到数据的第一级，从严格意义上来说，它并不是深拷贝，因为我们说深拷贝是将原对象各个层级的各项属性的“值”拷贝过来。

建议：当数据类型足够简单只包含一级的时候可以采用以下方法。

3.方法三：for...in遍历对象，存入新对象

function deepCloneObj(obj){
    if(Array.isArray(obj)){
        let objClone=[];
        for (let i in obj){
            objClone.push(obj[i])
        }
        return objClone
    }else{
        let objClone={};
        for (let i in obj){
            objClone[i]=obj[i]
        }
        return objClone
    }
}

let a=[1,2,3]
let b=deepCloneObj(a)
b[0]=100
console.log("a==>",a,"b==>",b)

let a1={name:'april',age:18}
let b1=deepCloneObj(a1)
b1.name='April'
console.log("a1==>",a1,"b1==>",b1)

测试结果如下：

4. 方法四：ES6扩展运算符(...)

扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中

let a={name:'April',age:18}
let b={...a}
b.age=16
console.log(a,b)

let a1=[1,2,3,4,5]
let b1=[...a1]
a1[0]=100
console.log(a1,b1)

5. 方法五：利用数组/对象上的一些方法

这种实现深拷贝的方法，实际上是利用操作数组/对象的方法，操作原数据后，不改变原数据，返回一个新的数据的特性实现的。

(1) 数组

slice() 方法返回一个从已有的数组中截取一部分元素片段组成的新数组（不改变原来的数组！）

用法：array．slice(start,end) start表示是起始元素的下标，end表示的是终止元素的下标

当slice()不带任何参数的时候，默认返回一个长度和原数组相同的新数组

let a=[1,2,3]
let b=a.slice()
b[0]=100
console.log(a,b)

concat() 方法用于连接两个或多个数组。( 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。)

用法：array.concat(array1,array2,......,arrayN)

当concat()不带任何参数的时候，表示返回数组和一个空数组合并后返回，默认返回一个长度和原数组相同的新数组

let a=[1,2,3]
let b=a.concat()
b[0]=100
console.log(a,b)

(2) 对象

Object.assign()：用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），并返回合并后的target

用法： Object.assign(target, source1, source2);

所以 b=Object.assign({},a) 这段代码将会把 a 中的一级属性都拷贝到｛｝中，然后将其返回赋给b

let a={name:'April',age:18}
let b=Object.assign({},a)
b.age=16
console.log(a,b)

实现的方法，没有最优，只有最适合，根据实际需求选择就好了。