登录
原创

ES6-深拷贝与浅拷贝

发布于 2021-10-13 阅读 26
  • 前端
  • ECMAScript 6
原创

深拷贝与浅拷贝区别

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

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

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)

打印结果:

image.png

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

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

Object.assign()

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

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

打印结果:

image.png

使用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)

打印结果:

image.png

将对象 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)

打印结果:

image.png

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) 

打印结果:

image.png

评论区

零00
5粉丝

时光荏苒,我自清欢

0

0

0

举报