JS深拷贝与浅拷贝总结

JS数据类型思维导图：

深拷贝与浅拷贝是针对引用数据类型而言，可分下面几种：

一 JSON.parse(JSON.stringify)深拷贝的局限

1 可以用这个技巧进行数据对象或数组的拷贝

2 如果被拷贝的对象中有function，则拷贝之后的对象就会丢失这个function

3 如果被拷贝的对象中有正则表达式，则拷贝之后的对象正则表达式会变成Object

4 好文你所不知道的JSON.stringify

二 返回一个数组或者对象的浅拷贝：  Array.prototype.slice()和Array.prototype.concat()；ES6数组的解构赋值

var o1 = ['darko', {age:22}];

var o2 = o1.slice();// 根据Array.prototype.slice()的特性，这里会返回一个o1的浅拷贝对象

console.log(o1 === o2);// => false，说明o2拷贝的是o1的一个实例

o2[0] ='lee';

console.log(o1[0]);// => "darko" o1和o2内部包含的基本类型值，复制的是其实例，不会相互影响

o2[1].age =23;

console.log(o1[1].age);// =>23 o1和o2内部包含的引用类型值，复制的是其引用，会相互影响

三 深浅拷贝实现：

1 浅拷贝实现：

  function shallowClone(source) {

    if (!source || typeof source !== 'object') {

      throw new Error('error arguments');

    }

    var targetObj = source.constructor === Array ? [] : {};

    for (var keys in source) {

      if (source.hasOwnProperty(keys)) {

        targetObj[keys] = source[keys];

      }

    }

    return targetObj;

  }

2 深拷贝实现：

function deepClone(source){

  if(!source || typeof source !== 'object'){

    throw new Error('error arguments', 'shallowClone');

  }

  var targetObj = source.constructor === Array ? [] : {};

  for(var keys in source){

      if(source.hasOwnProperty(keys)){

        if(source[keys] && typeof source[keys] === 'object'){

          targetObj[keys] = source[keys].constructor === Array ? [] : {};

          targetObj[keys] = deepClone(source[keys]);

        }else{

          targetObj[keys] = source[keys];

        }

      }

  }

  return targetObj;

}

// test example

var o1 = {

  arr: [1, 2, 3],

  obj: {

    key: 'value'

  },

  func: function(){

    return 1;

  }

};

var o3 = deepClone(o1);

console.log(o3 === o1); // => false

console.log(o3.obj === o1.obj); // => false

console.log(o2.func === o1.func); // => true