ES6 Object.assign()解析

es6出的这个Object.assign()在大部分的场景当中都会使用,比方说写redux中reducer的纯函数、或者在提交之前处理提交的数据之类的。
但它有一个问题,它是浅拷贝,因为Object.assign()拷贝的是对象的属性值,如果属性值是一个对象的引用,那么它拷贝的就是那个对象的引用值。

let obj = {
    a: 1,
    b: 2,
    c: {
        a: 111
    }
}
let newObj = Object.assign({}, obj)
console.log(obj) //{ a: 1, b: 2, c: { a: 111 } }
console.log(newObj) //{ a: 1, b: 2, c: { a: 111 } }
obj.a = 222
console.log(obj) //{ a: 222, b: 2, c: { a: 111 } }
console.log(newObj) //{ a: 1, b: 2, c: { a: 111 } }
obj.c.a = 1
console.log(obj) //{ a: 222, b: 2, c: { a: 1 } }
console.log(newObj) //{ a: 1, b: 2, c: { a: 1 } }

很明显能看出来,属性为一个对象的索引,就会导致拷贝的值一起变化,因为他们的地址是一样的。

那么只能自己来写一个,既然说到了es6,那就用es6写一个:

const deepClone = obj => {
    if (!obj || typeof obj !== 'object') {
        return obj
    }
    let o = {}
    if (Array.isArray(obj)) {
        o = obj.map(item => deepClone(item))
    } else {
        Object.keys(obj).forEach((key) => {
                    return o[key] = deepClone(obj[key])
            })
    }
    return o
}

这种比JSON.parse(JSON.stringify())要更加通用。
支持null、undefined、NaN、Infinity

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容