ES6-深拷贝与浅拷贝 - sdk社区

深拷贝与浅拷贝区别

都是将一个源数据拷贝到一个目标数据上

区别在于:
深拷贝：拷贝后的变量数据不受被拷贝的数据的影响
浅拷贝：拷贝后的变量数据受被拷贝的数据的影响

eg:

// 深拷贝
let s1 = '今天是雨天'
let s2 = s1
console.log('s1:' + s1)
console.log('s2:' + s2)
s1 = '我把伞掰断了'
console.log('s1:' + s1)
console.log('s2:' + s2)


// 浅拷贝
let obj = {
    uname: '夏目玲子',
    age: 18
}

let obj2 = obj
console.log(obj)
console.log(obj2)

obj.age = 20
console.log(obj)
console.log(obj2)

打印结果：

基础数据类型string将一个变量赋值给另一个变量后，两个变量的数据不会互相影响，改变一个数据的值，另一个的不会被改变- - -这种拷贝后，目标数据和源数据之间不会互相影响的，就是深拷贝

但是对象数据类型，将一个对象赋值给一个变量后，原来的对象值改变后，被赋值产生的那个变量数据也会发生改变- - -这种拷贝后，目标数据和源数据之间会互相影响的，就是浅拷贝

Object.assign()

Object.assign()拷贝对象这种引用数据类型的是浅拷贝，对基础数据类型如 String 是深拷贝

let obj = {
    a: 1,
    b: 2,
    c: '今天是雨天',
    d: {
        x: '啦啦啦',
        y: '今天不是卖报的小行家',
        z: '今日心情~还行'
    },
}
console.log(obj)

打印结果：

使用Object.assign()对对象进行进行拷贝后：

let obj = {
    a: 1,
    b: 2,
    c: '今天是雨天',
    d: {
        x: '啦啦啦',
        y: '今天不是卖报的小行家',
        z: '今日心情~还行'
    },
}

let obj2 = {}
Object.assign(obj2, obj)
obj2.d.y = '大头大头下雨不愁'
console.log(obj)

打印结果：

将对象 obj 的数据拷贝给 obj2，对 obj2 的数据进行了修改，但是 obj 的数据也跟着改变了

Object.assign(目标对象，源对象) 是将源对象的地址值赋值给目标对象

深拷贝方法1：JSON.tringify() + JSON.parse()

实现方法示例：

let obj = {
    uname: '夏目玲子',
    age: 18
}

let str = JSON.stringify(obj)
console.log(str)
let obj2 = JSON.parse(str)
console.log(obj)
console.log(obj2)
obj2.uname = '夏目贵志'
console.log(obj)
console.log(obj2)

打印结果：

JSON是一个字符串类型，和对象不同的是键值对都有 “” 双引号，而对象的属性名不用引号

深拷贝方法2：自定义函数（对象，数组，字符串）深拷贝

先检查数据类型，然后根据数据类型进行深拷贝处理：

代码示例：

// 1. 检查数据类型
let checkType = data => {
    return Object.prototype.toString.call(data).slice(8, -1)
}

console.log(checkType({}))
console.log(checkType([]))
console.log(checkType(18))


// 2. 通过函数进行深拷贝处理
let deepClone = origin => {
    let originType = checkType(origin)
    let result
    if (originType === 'Object') {
        result = {}
    }else if (originType === 'Array') {
        result = []
    }else {
        return origin
    }

    for (let i in origin) {
        let value = origin[i]
        let valueType = checkType(value)
        // 检查内层数据类型
        if (valueType === 'Object' || valueType === 'Array') {
            result[i] = deepClone(value) // 递归
        } else {
            result[i] = value
        }
    }
    return result
}

let obj = {
    uname: '夏目玲子',
    age: 18,
    like: ['跑步', '收妖怪']
}

let obj2 = deepClone(obj)

obj2.age = 20
obj2.like[0] = '打架'
console.log(obj)
console.log(obj2)

打印结果：