javaScript中的深拷贝和浅拷贝（总结）

在JavaScript中，对于Object和Array这类引用类型值，当从一个变量向另一个变量复制引用类型值时，这个值的副本其实是一个指针，两个变量指向同一个堆对象，改变其中一个变量，另一个也会受到影响。

这种拷贝分为两种情况：拷贝引用和拷贝实例，也就是我们说的浅拷贝和深拷贝

1.浅拷贝（shallow copy）

数组的浅拷贝：
可以使用数组的concat、slice方法，ES6的扩展运算符（…）返回一个新数组的方式来实现.

var arr = ["1",2,true,undefined,null,{a:1},[1]]
var arr1 = arr.concat()
var arr2 = arr.slice()
var arr3 = [...arr]

对象的浅拷贝：可以使用Object.assign(targetObj,source1,source2,…)或ES6的扩展运算符（…）

var obj = {a:1,b:{c:2}}
var obj2 = Object.assign({},obj)
var obj1 = {...obj}

Object.assign() 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。

自己实现一个浅拷贝：

function shallowClone(source) {
  const targetObj = source.constructor === Array ? [] : {};
  for (let keys in source) {
    if (source.hasOwnProperty(keys)) {
      targetObj[keys] = source[keys];  //直接赋值即可，基本类型值会拷贝实例，引用类型值会拷贝引用
    }
  }
  return targetObj;
}

2.深拷贝（deep copy）

实现深拷贝的方法：

1. JSON.parse(JSON.stringify(obj))

let obj = { s:Symbol("s"),a: undefined, b: [ 2, 3,{c:/\d+/g,g:[9]}], d: function () { console.log("111") } ,f:{e:new Date()},}
let r2 = JSON.parse(JSON.stringify(obj))
console.log(r2)

如果对象的属性是 undefined、函数、symbol ，该属性会被 JSON.stringify() 过滤掉，导致拷贝时会缺少属性。

2. 利用递归对每一层都重新创建对象并赋值从而实现深拷贝

        //深拷贝
        function deepClone(source) {
            // let targetObj = source.constructor === Array ? [] : {}
            let targetObj = new source.constructor()
            for (let keys in source) {
                if (source.hasOwnProperty(keys)) {
                    if (source[keys] && typeof source[keys] === 'object') {
                        if (source[keys].constructor == RegExp) {
                            targetObj[keys] = new RegExp(source[keys])
                        } else if (source[keys].constructor == Date) {
                            targetObj[keys] = new Date(source[keys])
                        } else {  //[] {}
                            // targetObj[keys] = source[keys].constructor === Array ? [] : {}
                            targetObj[keys] = new source[keys].constructor()
                            targetObj[keys] = deepClone(source[keys])
                        }
                    } else {  //如果是基本类型值(undefined,boolean,null,number,string)或函数、Symbol
                        targetObj[keys] = source[keys]
                    }
                }
            }
            return targetObj
        }
        // let arr = [true, 2, { a: 444 }, function () { console.log("hello") }, new Date(), /\d+/g]
        // let r = deepClone(arr)
        // console.log("r", r)

        let obj = { s:Symbol("s"), a: undefined, b: [ 2, 3,{c:/\d+/g,g:[9]}], d: function () { console.log("111") } ,f:{e:new Date()},}
        let result = deepClone(obj)
        console.log("result", result)

参考文章：
https://www.cnblogs.com/dabingqi/p/8502932.html
https://segmentfault.com/a/1190000008637489
感谢！