美文网首页
浅拷贝与深拷贝

浅拷贝与深拷贝

作者: 再见噜噜班 | 来源:发表于2020-03-09 20:53 被阅读0次

    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
    

    相关文章

      网友评论

          本文标题:浅拷贝与深拷贝

          本文链接:https://www.haomeiwen.com/subject/rgjmdhtx.html