一、对象的深拷贝和浅拷贝

2020-04-17  本文已影响0人  雪燃归来

     javascript 有8中数据类型,undefined、number、boolean、object、symbol、BigInt、String、Null,他们可以被分为两大类——原始类型引用类型
    其中,原始数据类型存放在中,引用数据类型是存放在中的。堆中的数据是通过引用和变量关联起来的。也就是,javascript的变量是没有数据类型的,值才有数据类型,变量可以随时持有任何类型数据。
    在JavaScript中将一个原始数据类型的变量a赋值给b,那么a和b会相互独立、互不影响;但是将引用类型的变量a赋值给变量b,那么导致a、b两个变量都同时指向对中的同一块数据。

JavaScript中对象的深拷贝和浅拷贝

let jack = { name : "jack.ma",
     age:40,
           like:{
               dog:{ color:'black', age:3, },
               cat:{ color:'white', age:2 } 
           }
      }
    function copy(src){ 
            let dest
            return dest
    }
   let jack2 = copy(jack)
   jack2.age = 50
   jack2.like = {
      spork:{color:'purple',age:5}
   }
  console.log(jack.age)
  console.log(jack.like)

方法一、使用JSON.parse和JSON.stringfy

可以通过JSON.string将复杂的对象数据类型转化为简单的字符串类型,然后再进行复制的时候,就是复制字符串的过程,就不存在对象拷贝不完成的情形。具体代码如下。

function copy(src){ 
       let dest
       dest = JSON.parse(JSON.stringify(src))
      return dest
}

\color{red}{注意}:这种方法不能拷贝函数。

方法二、使用es6的Object.assign(target,source1,source2)

Object.assign()这个方法将源对象(source)的所有可枚举的属性复制到目标属性

function copy(src){ 
            let dest
            dest = Object.assign({}, src)
            return dest
        }

\color{red}{注意}:只能拷贝一层。

方法三、自定义方法(使用递归的方法)

function copy(src){ 
    let dest
    if(typeof src !== 'object'){
         return
    }
     dest = src instanceof Array ? [] : {}
     for(let key of Object.keys(src)){
           dest[key] = typeof src[key] === 'object' ? copy(src[key]) : src[key]
      }
     return dest
 }

\color{red}{注意}:这种通过递归的方法可以遍历多层对象。
也可以使用下面的这种形式

function copy(src){ 
            if(typeof src === 'object'){
                if(!src) return 
                var dest = src.constructor()
                for(var key in src){
                    dest[key] = typeof dest[key] === 'object' ? copy(src[key]) :  src[key]
                }
                return dest
            } else {
                return src
            }
        }

其中var dest = src.constructor()比较重要,当src为数组时,dest就是数组;当src为对象时,dest就是对象。

上一篇下一篇

猜你喜欢

热点阅读