js深拷贝与浅拷贝

1 基础知识：基本类型与引用类型

 JS中可以把变量分成两部分，基本类型和引用类型。

 基本类型包括：Undefined、Null、Boolean、Number和String；
 引用类型值可能由多个值构成的对象。

在对基础类型数据进行拷贝时，实际相当于创建新的相同数据'hello'，赋值给b

var a='hello';
var b = a;
b = 'world';
console.log(a);//"hello"

在对引用类型数据进行拷贝时，操作的不是实际的对象而是对象的引用，通过指针指向相同的内存区域，所以值相等;
在下面的代码中，因为arr和arr1指向同一内存区域，所以当改变arr1的值时，arr也跟着改变了

var arr = ['1','2'];
var arr1 = arr;
arr1[0] = '11';
console.log(arr); //["11", "2"]

2 浅拷贝

当我们在对引用类型数据进行拷贝时，就会产生类似上面子对象数据改变引起父对象数据同时改变的情况，这种拷贝就叫浅拷贝。

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
      dst[prop] = src[prop];
  }
  return dst;
}

var xiaoming = {hobby:['唱歌','书法']};
var xiaoli = shallowCopy(xiaoming);

//如果将拷贝后的对象xiaoli的爱好更改，原对象xiaoming就也被更改了
// 因为xiaoli的hobby属性是个数组，即引用类型的数据，所以复制到的内容只是一个内存地址，并不是创建的新内容，详情请参考js的基本类型和引用类型
xiaoli.hobby[0] = '画画';
console.log(xiaoming);//{hobby: ["画画", "书法"]} 小明的内容也别改变了

3深拷贝

实现深拷贝的方法就是将浅拷贝递归,让每一次赋值都通过基础类型的创建新数据的赋值方式进行赋值

function deepCopy(src,dst){
  var dst =  dst || {};
  for (var i in src) {
    if (typeof src[i] === 'object') {
      dst[i] = (src[i].constructor === Array) ? [] : {};
      deepCopy(src[i],dst[i]);
    }else{
      dst[i] = src[i];
    }
  }
  return dst;
}

var xiaoming2 = {hobby:['唱歌','书法']};
var xiaoli2 = deepCopy(xiaoming2);
xiaoli2.hobby[0] = '画画';
console.log(xiaoming2);//{hobby: ["唱歌", "书法"]} xiaoming的内容不变 　　

4 代码地址 ：http://jsbin.com/namajic/edit?js,console,output

 

转载于:https://www.cnblogs.com/houxiaohang/p/7463389.html