浅拷贝与深拷贝

JavaScript中的数据类型主要分为原始数据类型(Number,String,Boolean,Null,Undefined,Symbol)和引用类型(Object)。深拷贝和浅拷贝主要是针对引用类型的,即在拷贝一个对象时,对于对象中属性值是对象的情况,浅拷贝复制的是对象的引用,深拷贝会复制对象的值。举个例子说,假设B复制了A,如果B改变了,A跟着改变,这就是浅拷贝,如果B改变了而A不改变,此时就是深拷贝。

  • 浅拷贝可以用Object.assign()实现,也可以用...扩展运算符实现
    Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
   let temp = {
        name:'temp',
        obj:{
            msg:'hello'
        },
        fn:function(){
            console.log('hello')
        }
    }

    let shallowCopy = Object.assign({},temp)
    temp.obj.msg='hi'
    console.log(shallowCopy.obj.msg)//hi
  • 深拷贝的实现方法主要有两种:JSON和递归
  1. JSON
    先把对象序列化成JSON字符串,然后再把字符串解析成对象,这种方法只适合处理属性值是对象或者数组的情况,对于函数会失真。还有,会丢失constructor,不管原先是什么,都会成为Object。
     let temp = {
        name:'temp',
        obj:{
            msg:'hello'
        },
        fn:function(){
            console.log('hello')
        }
    }
    
    let deepCopy1 = JSON.parse(JSON.stringify(temp))
    temp.obj.msg='hi'
    console.log(deepCopy1.obj.msg,deepCopy1.fn)//hello undefined
  1. 递归,for...in...循环遍历属性
   function deepClone(obj) {
        //判断是否是数组
        let result = Array.isArray(obj) ? [] : {}
        for (let key in obj) {
            //判断是否是自身的属性
            if (obj.hasOwnProperty(key)) {
                if (typeof obj[key] === 'object') {
                    //如果属性值是对象,对这个对象深拷贝
                    result[key] = deepClone(obj[key])
                } else {
                    //如果属性值类型不是object,直接复制
                    result[key] = obj[key]
                }
            }

        }
        return result
    }
    let temp = {
        name:'temp',
        obj:{
            msg:'hello'
        },
        fn:function(){
            console.log('hello')
        }
    }
    let deepCopy2 = deepClone(temp)
    temp.obj.msg='hi'
    console.log(deepCopy2.obj.msg) //hello
    deepCopy2.fn()  //hello
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容