简单理解js的深浅拷贝

1 深浅拷贝

        深浅拷贝是针对引用类型的，因为引用类型是存放在堆内存中的，在栈地址有一个或者多个地址来指向堆内存的某一数据。

那么js的引用数据类型有哪些呢？

基本数据类型

undefined、null、Boolean、Number、String、Symbol(ES6)、BigInt(ES10新增)

引用数据类型

Object(Array、Date、RegExp、Function)

1.1 浅拷贝介绍

        创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

1.2 深拷贝介绍

        深拷贝是一个整个独立的对象拷贝，深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。
深拷贝把要复制的对象所引用的对象都复制了一遍，从堆内存中开辟一个新的区域存放新对象。如果你修改了“副本”的值，那么原来的对象不会被修改，两者是相互独立的。

2 实现浅拷贝

2.1 手撕浅拷贝函数

判断是否是引用类型，引用类型直接复制会互相影响

let obj ={
   
    a:1,
    b:"bbb",
    c:{
   
        value:"ccc"
    },
    d:null,
    e:[1,2,3]
}
function shallowCopy(target) {
   
    if(!target || typeof target !=="object") //判断是否是object类型，不是直接返回
        return target;
    let newObject = Array.isArray(target)?[]:{
   }; // 判断是数组还是对象
    for(let key in target){
     // 遍历target 并且判断是target的属性才拷贝
        if(target.hasOwnProperty(key)){
   
            newObject[key] = target[key];
        }
    }
    return newObject;
}
let obj1 = shallowCopy(obj)
console.log(obj1) // { a: 1, b: 'bbb', c: { value: 'ccc' }, d: null, e: [ 1, 2, 3 ] }
// 修改普通类型值和引用类型值  查看输出
obj1.b = "wjing"
obj1.c.value ="改变引用类型值"
// 普通类型值修改并不互相影响  引用类型值会互相影响
console.log(obj) // { a: 1, b: 'bbb', c: { value: '改变引用类型值' }, d: null, e: [ 1, 2, 3 ] }
console.log(<