深拷贝&浅拷贝

JessYanCoding 发布于2019-08-22 14:00 / 2403人阅读

github源码：https://github.com/fypShirley...

看下面的示例了解赋值和引用的区别：

赋值：
    var a = 5;
    var b = a;
    b+=3;
    
    console.log(b)//8
    console.log(a)//5 原值没有发生改变

引用:(对象和函数都是引用的关系)
    var a = [1,2,3];
    var b = a;
    var c = a;
    b.push(4);
    
    console.log(b);//[1,2,3,4]
    console.log(a);//[1,2,3,4] a被影响
    
    c = [1,2,3,4,5];
    console.log(c);//[1,2,3,4,5]
    console.log(a);//[1,2,3,4] a不受影响

浅拷贝：

   var obj0= {a:10};
   var obj1= {a:{b:10}};
   
   function copy(obj){//浅拷贝
       var newObj = {};

       for(var attr in obj){
           newObj[attr] = obj[attr];
       }
       return newObj;
   }
   
    var obj2 = copy(obj0);
    var obj3 = copy(obj1);
    obj3.a.b = 20;
    
    console.log(obj0.a);//10 a不受影响
    console.log(obj1.a.b);//20 受影响了，还是引用

深拷贝：

先看一个递归 :

 function test(n){
    if(n == 1){
        console.trace()
        return 1;
    }
    return n*test(n-1);
}
console.log(test(4))//1*2*3*4 -> 24

深拷贝利用递归的思想：

function deepCopy(obj){//一层层进入，拿到值
   if(typeof obj != "object"){
       return obj;
   }
   console.trace();
   var newObj = {};

   for(var attr in obj){
       newObj[attr] = deepCopy(obj[attr]);//递归
   }
   return newObj;
 }
 var obj4= {a:{b:10}};
 var obj5 = deepCopy(obj4);
 obj5.a.b = 20;
 console.log(obj4.a);//a->{b:10},原数据没有改变
 console.log(obj5.a);//a->{b:20},

再一个深/浅拷贝的对比

 //先声明一个对象parent:

 var parent = {
   numbers: [1, 2, 3],
   letters: ["a", "b", "c"],
   obj: {prop: 1   },
   bool: true
};

// 浅拷贝函数：
function extendCopy(p) {//传地址
   var c = {};
   for (var i in p) {
       c[i] = p[i];
   }
   c.uber = p;
   return c;
}


// 深拷贝函数：
function deepCopy(p, c) {//传值
//在拷贝每个属性之前，建议使用 hasOwnProperty()来确认不会误拷贝不需要的继承属性。
   c = c || {};
   for (var i in p) {
       //console.log(p.hasOwnProperty(i))
       if (p.hasOwnProperty(i)) {
           if (typeof p[i] === "object") {
               c[i] = Array.isArray(p[i]) ? [] : {};
               deepCopy(p[i], c[i]);
           } else {
               c[i] = p[i];
           }
       }
   }
   return c;
}

var mydeep = deepCopy(parent);
mydeep.numbers.push(5);
console.log(mydeep.numbers)//[1,2,3,5]
console.log(parent.numbers)//[1,2,3]原数据没有改变

myshallow.numbers.push(6);
console.log(myshallow.numbers)//[1,2,3,6]
console.log(parent.numbers)//[1,2,3,6原数据改变
console.log(mydeep.numbers)//[1,2,3]

私有云海外云主机深拷贝和浅拷贝浅拷贝 javascript浅拷贝深拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92749.html

《你不知道的javascript》笔记_对象&amp;原型

摘要：上一篇你不知道的笔记写在前面这是年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响年是向上的一年在新的城市稳定连续坚持健身三个月早睡早起游戏时间大大缩减，学会生活。上一篇：《你不知道的javascript》笔记_this 写在前面这是2019年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响2018年是向上的一年：在新的城市稳定、...

seasonley 2019-08-23 14:32 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

J4ck_Chan 2019-08-01 18:22 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

lakeside 2019-08-22 13:48 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

big_cat 2019-08-29 14:12 评论0 收藏0