JS浅拷贝和深拷贝

1、浅拷贝

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址（简单理解：如果是单层对象，没问题，如果有多层就有问题）

• 示例1

const obj = {
    name: 'Jack',
    age: 18
}
const o = { ...obj }
console.log(o)   // {name: 'Jack', age: 18}

o.age = 20
console.log(o)   // {name: 'Jack', age: 20}
console.log(obj)   // {name: 'Jack', age: 18}

• 示例2

 const obj = {
    name: 'Jack',
    age: 18
}
const o = {}
Object.assign(o, obj)
o.age = 20

console.log(o)   // {name: 'Jack', age: 20}
console.log(obj)  // {name: 'Jack', age: 18}

• 示例3：复杂数据类型不适用

const obj = {
    name: 'Jack',
    age: 28,
    family: {
        baby: '小Jack',
        age: 1
    }
}

const o = {}
Object.assign(o, obj)
o.family.age = 2

console.log(o)   
//  打印结果
//{
//    name: "Jack",
//    age: 28,
//    family: {
//       baby: "小Jack",
//       age: 2
//    }
//}
console.log(obj)
//打印结果
//{
//    name: "Jack",
//    age: 28,
//    family: {
//        baby: "小Jack",
//        age: 2
//    }
//}

2、深拷贝

拷贝的是对象，不是地址
常见方法:
1.通过递归实现深拷贝
2. lodash / cloneDeep
3.通过JSON.stringify()文现

（1）递归函数
如果一个函数在内部可以调用其本身，那么这个函数就是递归函数
示例：简易深拷贝

const obj = {
    name: 'Jack',
    age: 18,
    hobby: ['兵乓球', '足球'],
    family: {
        baby: '小Jack'
    }
}
const o = {}
// 拷贝函数
function deepCopy(newObj, oldObj) {
    for (let k in oldObj) {
        if (oldObj[k] instanceof Array) { // 处理数组的问题(数组要写在前面，因为Array也属于Object)
            newObj[k] = []
            deepCopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {  //处理对象
            newObj[k] = {}
            deepCopy(newObj[k], oldObj[k])
        }
        else {
            // k 是属性名，值是 oldObj[k]
            newObj[k] = oldObj[k]
        }

    }
}
deepCopy(o, obj)  // o 是新对象，obj是旧对象
o.age = 20;
o.hobby[0] = '篮球'
o.family.baby = '宝宝'

console.log(o)
// 打印结果：新对象
// {
//     name: "Jack",
//     age: 20,
//     hobby: ["篮球","足球"],
//     family: {baby: '宝宝'}
// }
console.log(obj)
// 打印结果：旧对象
// {
//     name: "Jack",
//     age: 20,
//     hobby: ["兵乓球","足球"],
//     family: {baby: '小Jack'}
// }

（2）lodash方法
下载地址：https://www.cdnpkg.com/ld-min/file/lodash.min.js/
官网：https://www.lodashjs.com/
（3）JSON.stringify()和JSON.parse()
示例

const obj = {
    name: 'Jack',
    age: 18,
    hobby: ['兵乓球', '足球'],
    family: {
        baby: '小Jack'
    }
}
// 把对象转换为JSON字符串
const o = JSON.parse(JSON.stringify(obj))
o.family.baby = '宝宝'
// 打印结果：新对象
// {
//     name: "Jack",
//     age: 20,
//     hobby: ["篮球","足球"],
//     family: {baby: '宝宝'}
// }
console.log(obj)
// 打印结果：旧对象
// {
//     name: "Jack",
//     age: 20,
//     hobby: ["兵乓球","足球"],
//     family: {baby: '小Jack'}
// }