小白学 VUE 系列JS的深浅拷贝：数组，对象深浅拷贝

出现原因

出现深浅拷贝的问题，实质上是由于JS对基本类型和引用类型的处理不同。基本类型指的是简单的数据段，而引用类型指的是一个对象，而JS不允许我们直接操作内存中的地址，也就是不能操作对象的内存空间，所以对对象的操作都只是在操作它的引用而已。
如果我们复制一个基本类型的值时，会创建一个新值，并把它保存在新的变量的位置上。
而如果我们复制一个引用类型时，同样会把变量中的值复制一份放到新的变量空间里，但此时复制的东西并不是对象本身，而是指向该对象的指针。所以我们复制引用类型后，两个变量其实指向同一个对象，改变其中一个对象，会影响到另外一个。

js 数据类型

• 基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。
• 引用类型：object。里面包含的 function、Array、Date

我们操作基本类型的时候，拷贝和复制都不会出现引用问题

var a=10;
var b=a;
b=15;
console.log(a,b);//10,15,

这个a变量并没有被改变，因为它是基本类型

var arr=[
    {name:"a"},
    {name:"b"}
];
var arr2=arr;
arr[0].name="a-update";
console.log(arr,arr2);

这个时候就出现了浅拷贝的现象，我们并不想 arr2 也被修改了。因为我们复制的只是引用地址

内部实现了浅拷贝

• Object.assign() 实现
• slice()方法

var arr1 = ['red','green'];
var arr2 = arr1.slice(0);//复制
console.log(arr2)//['red','green'];
arr1.push('black') ;//改变color1的值
console.log(arr2)//["red", "green"]
console.log(arr1)//["red", "green", "black"]

看起来像是深拷贝，其实slice方法只适用于一维数组的拷贝，在二维数组中就会破绽百出

• concat

var arr1 = ['red','green'];
var arr2 = arr1.concat();//复制
console.log(arr2)//['red','green'];
arr1.push('black') ;//改变color1的值
console.log(arr2)//["red", "green"]
console.log(arr1)//["red", "green", "black"]

看起来像是深拷贝，其实concat方法只适用于一维数组的拷贝，在二维数组中就会破绽百出

深拷贝方法

• JSON.parse

var arr1 = ['red','green'];
var arr2 = JSON.parse(JSON.stringify(arr1));//复制
console.log(arr2)//['red','green'];
arr1.push('black') ;//改变color1的值
console.log(arr2)//["red", "green"]
console.log(arr1)//["red", "green", "black"]

• 自定义方法

function deepClone(obj){
    //判断参数是不是一个对象
    let objClone = obj instanceof Object?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    

总结

• 1：深拷贝只是从源数据中拷贝一份出来进行操作，而不是改变源数据；改变源数据的那是浅拷贝；
• 2：原生js方法slice、concat都不是真正意义上的深拷贝，都仅只适用于一维数组，拷贝的属性不够彻底；
• 3：实现js深拷贝我们可以通过JSON.parse(JSON.stringify())、递归以及JQuery库的extend方法来实现；