JS对象类型-对象-浅拷贝和深拷贝

浅拷贝和深拷贝是针对数组和对象而言的。对象的浅拷贝只复制了一层对象的属性，对于Array和Object这些引用类型值拷贝的是一个在内存中的地址。而深拷贝会把对象的属性通过递归的方式逐个复制，包括引用类型值。

浅拷贝

function shallowCloneObj(obj) {
  var cloneObj = {};
  for(var i in obj) {
    cloneObj[i] = obj[i]
  }
  return cloneObj
}

var o = {a:1,b:2,c:[1,2,3]};
var o1 = shallowCloneObj(o);

o.a = 'hello';
o.c[0] = 4;
console.log(o, o1); // {a:'hello',b:2,c:[4,2,3]} {a:1,b:2,c:[4,2,3]} 

深拷贝

【方法1】

function clone(obj, cloneObj = {}) {
  for(var key in obj) {
    if(typeof obj[key] === 'object') {
      cloneObj[key] = (obj[key] instanceof Array) ? [] : {};
      clone(obj[key], cloneObj[key])
    }else{
      cloneObj[key] = obj[key]
    }
  }
  return cloneObj
}
  

  // 使用
  var o = { num: 1, arr: ['hello', 'world'], obj: { age: 10 } }
  var o1 = deepCloneObj(o)
  o.arr[0] = 'HELLO'
  o.obj.age = 15
  
  console.log(o, o1) 
  // { num: 1, arr: ['HELLO', 'world'], obj: { age: 15 } }
  // { num: 1, arr: ['hello', 'world'], obj: { age: 10 } }

【方法2】

使用JSON全局对象的parse和stringify方法实现深拷贝，可以处理能够被json表示的数据结构。

function jsonClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

// 使用
var o = { num: 1, arr: ['hello', 'world'], obj: { age: 10 } }
var o1 = jsonClone(o)
o.arr[0] = 'HELLO'
o.obj.age = 15

console.log(o, o1) 
// { num: 1, arr: ['HELLO', 'world'], obj: { age: 15 } }
// { num: 1, arr: ['hello', 'world'], obj: { age: 10 } }