实用的js深拷贝与浅拷贝

一、前言

    1、深拷贝：对象所有属性以及子属性的完全clone，clone后，改变源对象属性，不会影响clone后对象的属性。

    2、浅拷贝：对象最外层属性的clone，如果最外层属性值是object类型，则获得源对象属性的引用地址；clone后，如果改变源对象中最外层的属性值，不会对clone对象的属性造成影响，但是如果改变源对象引用地址的属性后，会对clone对象引用的属性值造成影响。

    具体场景详见正文！

二、正文

    1、深拷贝的实现方式--借鉴于Vue-Router源码的深拷贝

//js方式实现深拷贝
function clone (value) {
  //如果是Array类型
  if (Array.isArray(value)) {
    return value.map(clone)
  }
  //判断是否为对象
  else if (value && typeof value === 'object') {
    const res = {}
    for (const key in value) {
      res[key] = clone(value[key])
    }
    return res
  }
  //如果是值则直接return
  else {
    return value
  }
}

    2、深拷贝的实现方式（2）--JSON对象（序列化json时，需要特别注意属性值的类型不能为new操作符、关键字等）

//此种clone方式，只适用于json格式的深拷贝，需要注意的是对象的属性不能是包含new操作符、以及关键字，具体限制请参照JSON对象的具体说明
let obj = {
    data:[1,3,4],
    msg:'123'
}
//cloneObj是数据的深拷贝，此种方式简单粗暴
let cloneObj = JSON.parse(JSON.stringify(obj));

    3、浅拷贝的简单实现（es6）

 //浅克隆1个对象，但不会克隆obj的prototype,如果属性值是个对象，则获得对象的引用地址
  function clone(obj) {
            return Object.assign({},obj)
  }

三、总结

    以上为自己在代码开发中所使用的较为便捷的深、浅拷贝方式，也借鉴了许多网上和书籍的资料，还请大家多多支持！