JS浅拷贝与深拷贝

浅拷贝

1、...扩展运算符拷贝

let copy = { ...obj }

2、Object.assign 复制一个对象

const obj = { a: 1, b: 2 }
const copy = Object.assign({}, obj);

深拷贝

针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是(可枚举)属性值。

1、最简单的方法(但是有局限性,不能序列化函数,会忽略undefined,和Symbol)

// 使用JSON.stringify序列化,再用JSON.parse反序列化
JSON.parse(JSON.stringify(obj1))

2、最好的做法是定义函数并利用递归的方法实现对象的深拷贝

        // 1.1 判断是否是对象
        const isObject = obj => (typeof obj === 'object' || typeof obj === 'function') &&  obj !== 'null'
        // 1.2 定义深克隆的方法
        function cloneDeep(obj) {
            if(!isObject(obj)) throw new Error('参数不是对象')
            // 1.3 如果参数为数组,则复制数组各元素,否则复制对象属性
            const newObject = Array.isArray(obj) ? [ ...obj ] : { ...obj }
            // 1.4 迭代
            Object.keys(newObject).forEach(key => {
                // 1.5 判断如果遍历到的属性值为对象,则继续递归cloneDeep
                if(isObject(newObject[key])) {
                    newObject[key] = cloneDeep(newObject[key])
                }
            })
            return newObject
        }
        // 1.6 测试
        let test = {a: 1, b: {c: 2}}
        let xm = cloneDeep(test)
        xm.b.c = '二'
        console.log(xm)
        console.log(test)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浅拷贝 Object.assign Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象...
    草帽lufei阅读 1,023评论 0 0
  • 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是...
    程序猿TODO阅读 178评论 0 2
  • 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是...
    Victor_818阅读 119,467评论 21 91
  • 浅拷贝是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果...
    diviner_杨阅读 277评论 0 0
  • javaScript的变量类型 javaScript的变量类型基本类型:引用类型: 浅拷贝和深拷贝的区分 浅拷贝浅...
    席坤阅读 235评论 0 0