浅谈JS的浅拷贝和深拷贝(递归和树遍历)

1.对象的特殊性

因为对象的是通过指针仔细内存地址的，所以对象的拷贝不能像变量一般简单的赋值，对象的赋值只是将指针的地址赋值过去而已，修改属性值会对所有指向这个内存地址的对象的属性值都会被改变，见下面的例子：

// 变量赋值
var a = 5;
var b = a;
// 修改b不会对a造成影响
b=10;
> a
> 5

// 对象赋值
var obj = {
    a: '5',
    b: '10',
    c: {
        d: 1
    }  
}
var obj1 = obj
// 修改obj1.a会对obj.a造成影响
obj1.a = 9
> obj.a
> 9

所以当你使用object(array也是object的一种特殊形式)时，想复制一个object，但两个object互不影响时，这就需要我们说的浅拷贝和深拷贝了

2.最简单的实现(有局限性)

// object数据中只能有基本的数据类型（String，Number,Boolean,Array,object,null,undefined），其它数据会丢失，但不会报错
obj1 = JSON.parse(JSON.stringify(obj))

3.浅拷贝

基于Object的特殊性，在对对象进行简单的拷贝，只拷贝第一层级的属性，这种拷贝就是浅拷贝。

function Copy(source, obj) {
    for (let key in obj) {
        source[key] = obj[key]
    }
    return source
}

Copy(obj1, obj)
obj1.a=10
obj1.c.d=100
// 浅拷贝对第一层的属性进行了拷贝，所以obj.a不受影响
> obj.a = 9
// 但是obj.c.d是第二层级的属性，它受到了影响，它的值被改变了
> obj.c.d =100

3.深拷贝

3.1递归遍历

注意：递归遍历可能爆栈，一般不会出现这种情况，除非对象的深度达到10000+

// 判断数据类型的方法--更新于2019-03-28
function isType(data, type) {
  return Object.prototype.toString.call(data) === '[object ' + type + ']'
}
// extendEasy实现深拷贝；extendSuper在深拷贝的基础上实现多个继承类似（source, obj1, obj2, obj3 ...）
function extendSuper () {
  var arg = arguments
  for (let i = 1; i < arg.length; i++) {
    arg[0] = extendEasy(arg[0], arg[i])
  }
  return arg[0]
}

// 实现深拷贝
function extendEasy (source, obj) {
  for (let key in obj) {
// 原来使用instanceof判断类型会存在BUG
    if (isType('Object',obj[key])) {
      source[key] = {}
      source[key] = extendEasy(source[key], obj[key])
    }
    if (isType(' Array',obj[key])) {
      source[key] = []
      source[key] = extendEasy(source[key], obj[key])
    }
    source[key] = obj[key]
  }
  return source
}

3.2树遍历(推荐)

注意：下面代码中Object.isType的实现方式-->https://segmentfault.com/a/11...
深度和广度：pop跟push决定了深度优先，广度优先请用shift和push

/*
* @param target object 非必填，默认{}
* @param source object 必填
*
* */
function copyObject() {
  let root = {}
  const obj = arguments[arguments.length - 1]
  if(!Object.isType(obj, "Object") && !Object.isType(obj, "Array")) {
    throw "source not Object"
  }
  if(arguments.length >= 2 && (Object.isType(arguments[0], "Object") || Object.isType(arguments[0], "Array"))) {
    root = arguments[0]
  } else {
    if(Object.isType(arguments[0], "Array")) {
      root = []
    }
  }
  // 栈
  const arr = [
    {
      // key: undefined,
      parent: root,
      data: obj
    }
  ]
  while (arr.length) {
    // arr: pop跟push决定了深度优先，广度优先请用shift和push
    const o = arr.pop()
    // if(o.key === undefined) {
    //   o
    // }
    for (let item in o.data){
      if (Object.isType(o.data[item], "Array")){
        o.parent[item] = []
        arr.push({
          key: item,
          parent: o.parent[item],
          data: o.data[item]
        })
      }
      else if (Object.isType(o.data[item], "Object")) {
        o.parent[item] = {}
        arr.push({
          key: item,
          parent: o.parent[item],
          data: o.data[item]
        })
      }
      // 如果对其它类型支持请在这里拓展
      else {
        o.parent[item] = o.data[item]
      }
    }
  }
  return root
}