js实现深浅拷贝

一、实现浅拷贝的方法
(1)直接用=赋值

let a=[0,1,2,3,4],
    b=a;
console.log(a===b);
a[0]=1;
console.log(a,b);//两个相同的[1,1,2,3,4]

(2)for···in只循环第一层

// 只复制第一层的浅拷贝
function simpleCopy(obj1) {
   var obj2 = Array.isArray(obj1) ? [] : {};
   for (let i in obj1) {
   obj2[i] = obj1[i];
  }
   return obj2;
}
var obj1 = {
   a: 1,
   b: 2,
   c: {
         d: 3
      }
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4

(3)Object.assign方法

var obj = {
    a: 1,
    b: 2
}
var obj1 = Object.assign({},obj);
obj1.a = 3;
console.log(obj.a) // 3

二、实现深拷贝的方法
(1)手写一个深拷贝函数。

function deepClone( obj ) {
  var result = obj;
  if(typeof obj == 'object' && obj != 'undefined'){
    result = Object.prototype.toString.call(obj) === '[object Array]' ? [] : {};
    for(var prop in obj){
      if(obj[prop] == result){
        continue;// 避免相互引用对象导致死循环,如initalObj.a = initalObj的情况
      }
      result[prop] = deepClone( obj[prop] );
    }
  }
  return result;
}

(2) 通过JSON对象来实现深拷贝

function deepClone(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}

(3)通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝,false为浅拷贝

(4)用slice实现对数组的深拷贝

// 当数组里面的值是基本数据类型,比如String,Number,Boolean时,属于深拷贝
// 当数组里面的值是引用数据类型,比如Object,Array时,属于浅拷贝
var arr1 = ["1","2","3"]; 
var arr2 = arr1.slice(0);
arr2[1] = "9";
console.log("数组的原始值:" + arr1 );
console.log("数组的新值:" + arr2 );

(5)用concat实现对数组的深拷贝

// 当数组里面的值是基本数据类型,比如String,Number,Boolean时,属于深拷贝
var arr1 = ["1","2","3"];
var arr2 = arr1.concat();
arr2[1] = "9";
console.log("数组的原始值:" + arr1 );
console.log("数组的新值:" + arr2 );
// 当数组里面的值是引用数据类型,比如Object,Array时,属于浅拷贝
var arr1 = [{a:1},{b:2},{c:3}];
var arr2 = arr1.concat();
arr2[0].a = "9";
console.log("数组的原始值:" + arr1[0].a ); // 数组的原始值:9
console.log("数组的新值:" + arr2[0].a ); // 数组的新值:9
发布了58 篇原创文章 · 获赞 0 · 访问量 7002

猜你喜欢

转载自blog.csdn.net/Mweb_demo/article/details/102677467