Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

ES系列文章

前言

所谓的浅拷贝和深拷贝：浅拷贝是在在拷贝过程中，遍历时那部分为对象/数组类型指向原来的地址，而深拷贝，则是完全开辟新的内存地址。

深拷贝与浅拷贝

- 深拷贝

let b = 5
let a = a
console.log(a,b)
//输出 5 5

let b = 5
let a = a
a = 6
console.log(a,b)
//输出 6 5
//a发生变化时b没有随着变化，当两个值互相并不影响这是深拷贝

JSON.parse

let object = JSON.parse('{"a":hello,"b":"world"}')
console.log(object)
//把字符串通过json.parse转化成了对象

JSON.stringify

let str = JSON.stringify('{"a":hello,"b":"world"}')
console.log(object)
//把对象通过json.stringify转化成了字符串

实现深拷贝：

对象

let object1 = {
   name: 'xxx',
   age: 18
}
let str = JSON.stringify(object1)
let object2 = JSON.parse(str)
object1.age = 30
console.log(object2)
//{name: "xxx",age:18}

对象数组基本数据类型

//检查类型
let checkType = data =>{
    return Object.prototype.toString.call(data).slice(8,-1)
}
checkType({})
//toString来判断数据类型
let deepClone = target =>{
    let targetType =checkType(target)//检查目标类型
    
    let result //深拷贝返回
    if (targetType === 'Object'){
        result ={}
    }else if(targetType === 'Array'){
        result =[]
    }else{
        return target
    }
    //循环返回
    for(let i in target){
        let value =target[i]
        let valueType = checkType(value)
        if(valueType === 'Object' || valueType === 'Array'){
            result[i] = deepClone(value)//递归
        }else{
            result[i] = value
        }
    }
}
//数组
let arr1 = [1,2,{age:12}]
let arr2 = deepClone(arr1)
arr2[2].age = 18
console.log(arr1)
//对象
let object1 = {
    name: 'xxx',
    hobby: ['xxx','aaa']
}
let object2 = deepClone(object1)
object2.hobby[0] = 'qqq'
console.log(object1)
console.log(object2)

- 浅拷贝

let object1 = {
    a:123,
    b:4
}
let object2 = object1
console.log(object1)
console.log(object2)
//{a:123,b:4}
//{a:123,b:4}


let object1 = {
    a:123,
    b:4
}
let object2 = object1
object2.b = 5
console.log(object1)
console.log(object2)
//{a: 123, b: 5}
//{a: 123, b: 5}
//当object1发生变化时object2也随着变化，这是浅拷贝。

一个前端小白，若文章有错误内容，欢迎大佬指点讨论！

ES系列 | 深拷贝与浅拷贝

ES系列文章

前言

深拷贝与浅拷贝

- 深拷贝

实现深拷贝：

- 浅拷贝