简单理解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(obj1) // { a: 1, b: 'wjing', c: { value: '改变引用类型值' }, d: null, e: [ 1, 2, 3 ] }

2.2 库函数实现浅拷贝

2.2.1 Object.assign()

assign()函数的详细使用

let obj ={
    a:1,
    b:"bbb",
    c:{
        value:"ccc"
    },
    d:null,
    e:[1,2,3]
}
let obj1 = Object.assign({}, obj)
console.log(obj1) // { a: 1, b: 'bbb', c: { value: 'ccc' }, d: null, e: [ 1, 2, 3 ] }

2.2.2 展开语法 Spread

let obj ={
    a:1,
    b:"bbb",
    c:{
        value:"ccc"
    },
    d:null,
    e:[1,2,3]
}

let {...obj2} = obj
console.log(obj2) // { a: 1, b: 'bbb', c: { value: 'ccc' }, d: null, e: [ 1, 2, 3 ] }

如果被复制对象是数组可以用Array.prototype.slice、Array.prototype.concat、map、reduce等方法实现浅拷贝。

3 实现深拷贝

3.1 JSON.parse(JSON.stringify(object))

const target = {
    field1: 1,
    field2: undefined,
    field3: 'ConardLi',
    field4: {
        child: 'child',
        child2: {
            child2: 'child2'
        }
    },
    field5:[1,2,3],
    func: function () {
        console.log('this is function')
    },
    date: new Date(),
    symbol: Symbol(),
    a: null,
};
// target.target = target;

let obj = JSON.parse(JSON.stringify(target))
console.log(obj)//
// {
//     field1: 1,
//     field3: 'ConardLi',
//     field4: { child: 'child', child2: { child2: 'child2' } },
//     field5: [ 1, 2, 3 ],
//     date: '2021-05-06T09:54:20.972Z',
//     a: null
// }

缺点：不能处理undefined、 函数 、data、symbol等。

3.2 手撕深拷贝代码

const target = {
    field1: 1,
    field2: undefined,
    field3: 'ConardLi',
    field4: {
        child: 'child',
        child2: {
            child2: 'child2'
        }
    },
    field5:[1,2,3],
    func: function () {
        console.log('this is function')
    },
    date: new Date(),
    symbol: Symbol(),
    a: null,
};
// target.target = target;

function deepcopy(target){
    if(!target || typeof target!=="object")
        return target;
    let newObject = Array.isArray(target)?[]:{};
    for(let key in target){
        if (target.hasOwnProperty(key)){
            newObject[key] = typeof target[key] === "object"?deepcopy(target[key]):target[key];
        }
    }
    return newObject;
}
console.log(deepcopy(target))
// {
//     field1: 1,
//     field2: undefined,
//     field3: 'ConardLi',
//     field4: { child: 'child', child2: { child2: 'child2' } },
//     field5: [ 1, 2, 3 ],
//     func: [Function: func],
//     date: {},
//     symbol: Symbol(),
//     a: null
// }

不能实现循环引用 如果将 target.target = target; （第19行代码解除注销）会报错

3.3 map解决循环引用问题

const target = {
    field1: 1,
    field2: undefined,
    field3: 'ConardLi',
    field4: {
        child: 'child',
        child2: {
            child2: 'child2'
        }
    },
    field5:[1,2,3],
    func: function () {
        console.log('this is function')
    },
    date: new Date(),
    symbol: Symbol(),
    a: null,
};
target.target = target; // 循环引用

// 这个存储空间，需要可以存储key-value形式的数据，且key可以是一个引用类型，我们可以选择Map这种数据结构：
function clone(target,map = new Map()) {
    if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {};
        if (map.get(target)) {  // 检查map中有无克隆过的对象
            return map.get(target);  // 有 - 直接返回
        }
        map.set(target, cloneTarget); // 没有 - 将当前对象作为key，克隆对象作为value进行存储
         // 继续克隆
        for (const key in target) {
            cloneTarget[key] = clone(target[key],map);
        }
        return cloneTarget;
    } else {
        return target;
    }
};
console.log(clone(target))
// {
//     field1: 1,
//         field2: undefined,
//     field3: 'ConardLi',
//     field4: { child: 'child', child2: { child2: 'child2' } },
//     field5: [ 1, 2, 3 ],
//         func: [Function: func],
//     date: {},
//     symbol: Symbol(),
//         a: {},
//     target: [Circular]
// }

如图所示可看到实现target嵌套循环

3.3.3 WeakMap优化Map

function clone(target, map = new WeakMap()) {
    // ...
};

        WeakMap 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。

什么是弱引用？

在计算机程序设计中，弱引用与强引用相对，是指不能确保其引用的对象不会被垃圾回收器回收的引用。 一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收。

强弱引用就是在垃圾回收机制中有差异。

3.4 其他数据类型

        其他数据类型需要特殊判断，下次再总结（我还没学会）。

本文参考链接1
参考链接2