对象深拷贝理解

2018-06-12  本文已影响0人  等花开_8e16

先读一篇这样的文章扫盲来告诉我们为什么js会出现对象深拷贝的问题,

https://www.jb51.net/article/91053.htm

接下来就是一些实现深拷贝的方法了:

1.数组的深拷贝(es6)
方法1:

var arr1=[1,2,3];
var arr2=Array.from(arr1);
arr1.push(4);
console.log(arr1);  //1234
console.log(arr2);  //123
arr2.push(5);
console.log(arr1);  //1234
console.log(arr2);  //1235

方法2:

var arr1=[1,2,3];
var arr2=[...arr1];
arr1.push(4);
console.log(arr1);  //1234
console.log(arr2);  //123
arr2.push(5);
console.log(arr1);  //1234
console.log(arr2);  //1235

2.下面是对象深拷贝的方法
方法1:

var obj = {a:1,b:2,c:3};
var cpobj = JSON.parse(JSON.stringify(obj));
cpobj.a = "m";
console.log(obj);//{ a: 1, b: 2, c: 3 }
console.log(cpobj);//{ a: 'm', b: 2, c: 3 }

上述方法可以进行对象的拷贝但是却存在问题,如果对象的属性是函数的话,拷贝得到的对象中不会有这个属性,因此还是需要乖乖的进行递归拷贝,以下代码是借用CSDN上的一篇文章讲解的方法,链接如下:
https://blog.csdn.net/sysuzhyupeng/article/details/70340598
代码如下:

function getType(obj){
       //tostring会返回对应不同的标签的构造函数
       var toString = Object.prototype.toString;
       var map = {
          '[object Boolean]'  : 'boolean', 
          '[object Number]'   : 'number', 
          '[object String]'   : 'string', 
          '[object Function]' : 'function', 
          '[object Array]'    : 'array', 
          '[object Date]'     : 'date', 
          '[object RegExp]'   : 'regExp', 
          '[object Undefined]': 'undefined',
          '[object Null]'     : 'null', 
          '[object Object]'   : 'object'
      };
      if(obj instanceof Element) {
           return 'element';
      }
      return map[toString.call(obj)];
   }
  
function deepClone(data){
       var type = getType(data);
       var obj;
       if(type === 'array'){
           obj = [];
       } else if(type === 'object'){
           obj = {};
       } else {
           //不再具有下一层次
           return data;
       }
       if(type === 'array'){
           for(var i = 0, len = data.length; i < len; i++){
               obj.push(deepClone(data[i]));
           }
       } else if(type === 'object'){
           for(var key in data){
               obj[key] = deepClone(data[key]);
           }
       }
       return obj;
   }
  

以上代码完善简洁,在此记录一下

上一篇 下一篇

猜你喜欢

热点阅读