深浅复制

2017-12-30

摘要：学习深浅复制总结，深复制和浅复制只针对像 Object、Array 这样的复杂对象，不考虑基本数据类型 null、undefined、string、number 和 boolean

浅复制

浅复制只会将对象的各个属性依次复制，并不会进行递归复制。因为只是复制了指向同一块内存的地址，所以彼此之间的操作还会互相影响。比如数组的 slice 和 concat 方法Array对象

// 数组方法
var arrA = [
  {
    name: "niuxiaokui"
  }, {
    age: 24
  }, {
    friends: [
      "xiaowang",
      "xiaohong"
    ]
  }
]
var arrB = arrA.slice();
var arrC = arrA.concat();
arrA[0].name = "niukui";
arrB[1].age = 25;
arrC[2].friends.push("dagang")
console.log(arrA);
console.log(arrB);
console.log(arrC);
/*
[
  {
    name: "niukui"
  }, {
    age: 25
  }, {
    friends: [
      "xiaowang",
      "xiaohong",
      "dagang"
    ]
  }
]
*/

// for循环
function _shallowCopy(obj) {
  // 只拷贝对象
  if (!obj || typeof obj !== 'object') return;
  var newObj = obj instanceof Array ? [] : {};
  // 遍历obj，并且判断是obj的属性才拷贝
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}
var objA = {
  name: "niuxiaokui",
  friends: ["xiaowang", "xiaohong"]
};
var objB = _shallowCopy(objA);
objA.friends.push("dagang");
objB.friends.push("ect...");
objB.name = "niukui";
console.log(objA);
// {
//   friends: ["xiaowang", "xiaohong", "dagang", "ect..."],
//     name: "niuxiaokui"
// }
console.log(objB);
// {
//   friends: ["xiaowang", "xiaohong", "dagang", "ect..."],
//     name: "niukui"
// }

深复制

深复制是在堆中重新分配内存，并将目标对象进行递归复制（性能会受影响），复制后的对象与原来的对象是完全隔离的

function _deepCopy(obj, map = new WeakMap()) {
  if (!obj || typeof obj !== 'object') return obj;
  if (map.has(obj)) return map.get(obj) // 验证循环调用
  map.set(obj, obj)
  var result = obj instanceof Array ? [] : {};
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = (typeof obj[key] === 'object' && obj[key] !== null) ? _deepCopy(obj[key], map) : obj[key];
    }
  }
  return result;
}

还有一种简单粗暴的方法：使用JSON.stringify解决。但这个方法有局限性：undefined、function、symbol（ES6+）和包含循环引用（对象之间相互引用，形成一个无限循环）的对象都不符合 JSON 结构标准，支持 JSON 的语言无法处理它们就会出现错误。其中 undefined、function 和 symbol 在对象中会自动被忽略，在数组中则会返回 null（以保证单元位置不变）JSON 与 JSONP

var objC = {name: undefined, age: null, say: function(){}};
objD = JSON.parse(JSON.stringify(objC));
console.log(objD); // {age: null}

var arrC = [null, 1, false, "string", undefined, function(){}];
arrD = JSON.parse(JSON.stringify(arrC));
console.log(arrD); // [null, 1, false, "string", null, null]

参考：
javascript中的深拷贝和浅拷贝？
冴羽的博客
 也来谈一谈js的浅复制和深复制