JS深拷贝实现的三种方法

1. 递归遍历

function deepClone(obj) {
  // 定义一个变量 并判断是数组还是对象
  var objClone = Array.isArray(obj) ? [] : {}
  if (obj && typeof obj === 'object' && obj != null) {
    // 判断obj存在并且是对象类型的时候 因为null也是object类型，所以要单独做判断
    for (var key in obj) {
      // 循环对象类型的obj
      if (obj.hasOwnProperty(key)) {
        // 判断obj中是否存在key属性
        if (obj[key] && typeof obj[key] === 'object') {
          // 判断如果obj[key]存在并且obj[key]是对象类型的时候应该深拷贝，即在堆内存中开辟新的内存
          objClone[key] = deepClone(obj[key])
        } else {
          // 否则就是浅复制
          objClone[key] = obj[key]
        }
      }
    }
  }
  return objClone
}
var a = {
  name: 'key1',
  eat: ['苹果', '香蕉'],
}
b = deepClone(a)
a.eat = ['苹果', '香蕉', '橙子']
console.log(a) //  {name:"key1",eat:["苹果","香蕉","橙子"]}
console.log(b) //  {name:"key1",eat:["苹果","香蕉"]}

2、JSON的parse和stringify方法

function deepClone(obj) {
  var _obj = JSON.stringify(obj) //  对象转成字符串
  var objClone = JSON.parse(_obj) //  字符串转成对象
  return objClone
}
var a = [0, 1, [2, 3], 4]
b = deepClone(a)
a[0] = 6
a[2][0] = 7
console.log(a) //  [6,1,[7,3],4]
console.log(b) //  [0,1,[2,3],4]

3、query的$.extend方法

var a = [0,1,[2,3],4];
b = $.extend(true,[],a);
a[0] = 1;
a[2][0] = 7;
console.log(a);   //  [1,1,[7,3],4];
console.log(b);   //  [0,1,[2,3],4];

//$.extend参数：
//第一个参数是布尔值，是否深复制
//第二个参数是目标对象，其他对象的成员属性将被附加到该对象上
//第三个及以后的参数是被合并的对象