【js进阶】-深浅拷贝

一、为什么会出现深浅拷贝

实质上是由于JS对基本类型和引用类型的处理不同。基本类型指的是简单的数据段，而引用类型指的是一个对象，而JS不允许我们直接操作内存中的地址，也就是不能操作对象的内存空间，所以，我们对对象的操作都只是在操作它的引用而已。

二、js中复制初体验

当我们复制一个基本类型的值时，会创建一个新值，并把它保存在新的变量的位置上。而如果我们复制一个引用类型时，同样会把变量中的值复制一份放到新的变量空间里，但此时复制的东西（也就是值）并不是对象本身，而是指向该对象的指针。所以我们复制引用类型后，两个变量其实指向同一个对象，改变其中一个对象，会影响到另外一个。

var num = 10;
var num2 = num;  
var obj = {
    name: 'Nicholas'
}
var obj2 = obj;

obj.name = 'Lee';
obj2.name; // 'Lee'

解析：var num2 = num; 属于基本类型的复制，直接在栈内存中创建了一块新内存空间给num2，存的值同样是10，num2和num完全无关，而var obj2 = obj因为obj是一个对象，所以属于引用类型的复制，所以此时复制给obj2的只是原先保存在obj变量中的引用地址（指针）而已，此操作过后，obj和obj2两个变量存的都是堆内存那个实际对象的引用地址，两个变量指向了同一个内存空间，所以当obj修改对象的name属性时，其实改的是堆内存中的那个对象，由于obj2和obj指向的是同一个对象，所以打印obj2.name就是修改后的那个name值了

三、js中的深浅拷贝（外加首层浅拷贝）

注意：我们所说的深浅拷贝一般用于引用类型的复制，不用于基本类型复制

浅拷贝：

只复制了引用而未真正复制值

几种浅拷贝的方式：

1、“ = ”运算符

const originArray = [1,2,3,4,5];
const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};

const cloneArray = originArray;
const cloneObj = originObj;

console.log(cloneArray); // [1,2,3,4,5]
console.log(originObj); // {a:'a',b:'b',c:Array[3],d:{dd:'dd'}}

cloneArray.push(6);
cloneObj.a = {aa:'aa'};

console.log(cloneArray); // [1,2,3,4,5,6]
console.log(originArray); // [1,2,3,4,5,6]

console.log(cloneObj); // {a