对象的浅拷贝与深拷贝的简单理解

    var oldObj = {
        name: 'xxx',
        sex: 'male',
        age: 3,
        friend: {
            name: 'hello', 
            age: 100
        }
    }

假设要克隆oldObj,做一个新的oldObj,里面内容一样,但和oldObj不是同一个,是新的oldObj,这就是拷贝。

  • 浅拷贝:只遍历一层,克隆name、sex、age、friend,但friend里面对象与新的friend里面对象指向同一个地址。(或者在js的基本类型和引用类型里面,如var a =1,浅拷贝只是单纯的对值的复制,对引用类型拷贝只是地址的复制,指向是同一个地方。)


    浅拷贝.jpg
  1. 实现浅拷贝的方式


    function shallowCopy(oldObj) {
        var newObj = {};
        for(var i in oldObj) {
            if(oldObj.hasOwnProperty(i)) {
                newObj[i] = oldObj[i];
            }
        }
        return newObj;
    }

  • 深拷贝:就是不管里面多少层,都遍历,克隆一个与旧不相关的,修改新的不影响旧的。
  1. 第一种方法:深拷贝(对象里面有数组和对象的情况下)

var o={
  name:'xiaogu',
  age:5,
  sex:'male',
  value:[1,2,3]
};

function deepCopy(oldObj,newObj){
  var newObj=newObj||{};
  for(var key in oldObj){
    if(typeof oldObj[key]==='object'){
      if(oldObj[key].constructor  === Array){
        //这是数组
        newObj[key]=[];
      }else{
        //这是对象
        newObj[key]={};
      }
      deepCopy(oldObj[key],newObj[key]);
       
    }else{
      newObj[key]=oldObj[key];
    }
  }
  return newObj;
}

var n=deepCopy(o,n);
console.log(n);

  1. 第二种方法:JOSN的方法实现深拷贝(无论什么情况)
   var result=JSON.parse(JSON.stringify(oldObj))
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容