JavaScript深浅拷贝问题

一. 什么是深浅拷贝

因为Javascript的对象是引用类型，当将一个对象复制给一个变量时，会把对象的引用赋值，改变对象和变量其中一个的值，两个都会改变，这就是浅拷贝。

let object = { name: 'aaa' }
let object2 = object
object2.name = 'AAA'
console.log(object) // { name: 'AAA' }

当我们不想让两个值都改变时就要用到深拷贝。

二. 深拷贝的实现方式：

1.JSON.parse(JSON.stringify(object))

let object = { name: 'aaa' }
let object2 = JSON.parse(JSON.stringify(object))
object2.name = 'AAA'
console.log(object) // { name: 'AAA' }

但是缺陷也很明显，

1. 会忽略 undefined
2. 会忽略 symbol
3. 不能序列化函数正则对象等特殊对象
4. 不能处理指向相同引用的情况，相同的引用会被重复拷贝

let obj = {         
    reg : /^reg$/,
    fun: function(){},
    syb: Symbol('foo'),
    undefined: undefined
}; 
let copied_obj = JSON.parse(JSON.stringify(obj));
console.log(copied_obj); // { reg: {} }


let obj = {}; 
let obj2 = {name:'aaaaa'};
obj.ttt1 = obj2;
obj.ttt2 = obj2;
let cp = JSON.parse(JSON.stringify(obj)); 
obj.ttt1.name = 'change'; 
cp.ttt1.name  = 'change';

// 因为obj的 ttt1 和 ttt2都是指向一个同一个对象，所以修改其中一个，另一个也会变，也就是说obj.ttt1 === obj.ttt2
console.log(obj); // { ttt1: {name: "change"}, ttt2: {name: "change"}}

// 而通过这种方式拷贝时，obj2拷贝了两次，丢失了cp.ttt1 === cp.ttt2 的特征
console.log(cp); // {ttt1: {name: "change"}, ttt2: {name: "aaaaa"}}

2.递归 通过遍历对象，数组，直到都是基本类型，再进行复制

// 递归判断是否对象和数组
function deepClone(obj, target) {
    if(!obj) return

    for(let key in obj) {
        // 继续遍历对象的每一个元素是否是引用类型
        if(obj.hasOwnProperty(key)) { 
            // null也是obj类型，要判断，如果还需要继续遍历，就把这个key赋给新的数组，递归遍历一            
               下，否则直接赋值
            if(Array.isArray(key) || (typeof obj[key] === 'object' && obj[key] !== null)) { 

                target[key] = []
                
                deepClone(obj[key], target[key])
            } else {
                target[key] = obj[key]
            }
        }
    }

    return target
}

三.  使用...扩展运算符，map ，filter

这几种方式都是在第一层深拷贝，没有将后面的几层也深拷贝

// ...扩展运算符
const a = [1,[2,3],{c:4}]
const b = [...a]

a[1][1] = 13
a[0] =12
console.log(b[0])   // 1
console.log(b[1][1])   // 13

a[2].c = 14
console.log(b[2].c)  // 14

// map, filter
const a = [1,[2,3],{c:4}]
const b = a.map(item=>item)
const c = a.filter(item=>item)

a[1][1] = 13
a[0] =12

console.log(b[0])   // 1
console.log(b[1][1])   // 13
console.log(b[0])   // 1
console.log(b[1][1])   // 13

a[2].c = 14
console.log(b[2].c)  // 14
console.log(b[2].c)  // 14

四. Object.assign