彻底搞明白浅拷贝与深拷贝区别和方法总结

概要：

首要要转换一个观点，拷贝不是单纯的以为是一个变量发生了改变而影响到另一个变量是否改变。其中还与变量的类型有关。基础类型互不影响，引用类型相互影响。（其中原理了解类型在堆栈中的位置）

那么了解下有哪些类型：
基本类型：字符串（string）、数值（number）、布尔值（boolean）、undefined、null ；
引用类型：对象（Object）、数组（Array）、函数（Function）；

一、浅拷贝

浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

浅拷贝有哪些方法？

1、展开运算符…

  let a = { name: "111",parents: {m: "du"}}
  let b = {...a}
  b.name = "222"
  b.parents.m = "zy"
  console.log(a);//{"name": "111","parents": {"m": "zy"}}
  console.log(b);//{"name": "222","parents": {"m": "zy"}}

为什么这里name没变，而parents对象里的m发生了改变。这里因为展开运算符是浅拷贝，基础类型互不干扰，而parents是引用类型里的Obj，影响了初始值。

2、Object.assign()

  let a = { name: "111",parents: {m: "du"}}
  let b = Object.assign({}, a)
  b.name = "222"
  b.parents.m = "zy"
  console.log(a);//{"name": "111","parents": {"m": "zy"}}
  console.log(b);//{"name": "222","parents": {"m": "zy"}}

3、函数库lodash的_.clone方法

  let _ = require('lodash');
  let a = { name: "111",parents: {m: "du"}}
  let b = _.clone(obj1);
  b.name = "222"
  b.parents.m = "zy"
  console.log(a);//{"name": "111","parents": {"m": "zy"}}
  console.log(b);//{"name": "222","parents": {"m": "zy"}}

4、Array.prototype.concat()

  let arr = [1, 3, {username: 'du'}];
  let arr2 = arr.concat();
  arr2[0] = 5    
  arr2[2].username = 'zy';
  console.log(arr); //[ 1, 3, { username: 'zy' } ]
  console.log(arr2); //[ 5, 3, { username: 'zy' } ]

5、Array.prototype.slice()

  let arr = [1, 3, {username: 'du'}];
  let arr2 = arr.slice();
  arr2[0] = 5    
  arr2[2].username = 'zy';
  console.log(arr); //[ 1, 3, { username: 'zy' } ]
  console.log(arr2); //[ 5, 3, { username: 'zy' } ]

二、深拷贝

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

深拷贝有哪些方法？

1、JSON.parse(JSON.stringify())

  let arr = [1, 3, {username: 'du'}];
  let arr2 = JSON.parse(JSON.stringify(arr));
  arr2[0] = 5    
  arr2[2].username = 'zy';
  console.log(arr); //[ 1, 3, { username: 'du' } ]
  console.log(arr2); //[ 5, 3, { username: 'zy' } ]

2、函数库lodash的_.cloneDeep方法

  let _ = require('lodash');
  let a = { name: "111",parents: {m: "du"}}
  let b = _.cloneDeep(obj1);
  b.name = "222"
  b.parents.m = "zy"
  console.log(a);//{"name": "111","parents": {"m": "du"}}
  console.log(b);//{"name": "222","parents": {"m": "zy"}}

3、jQuery.extend()方法

  let $ = require('lodash');
  let a = { name: "111",parents: {m: "du"}}
  let b =$.extend(true, {}, a);
  b.name = "222"
  b.parents.m = "zy"
  console.log(a);//{"name": "111","parents": {"m": "du"}}
  console.log(b);//{"name": "222","parents": {"m": "zy"}}

4、递归函数

 let a = { name: "111",parents: {m: "du"}}
 let b = extend(a)
 b.name = "222"
 b.parents.m = "zy"
 console.log(a);//{"name": "111","parents": {"m": "du"}}
 console.log(b);//{"name": "222","parents": {"m": "zy"}}

 function extend(data) {
    if (typeof data === 'object' && data) {
        let val = typeof data.length === 'number' ? [] : {}
        for(let i in data) {
            val[i] = extend(data[i])
        }
        return val
    } else {
        return data
    }
}

三、区别

此外还有一个赋值方法（=）

  //如果是引用类型
  let a = { name: "111",parents: {m: "du"}}
  let b = a
  b.name = "222"
  b.parents.m = "zy"
  console.log(a);//{"name": "222","parents": {"m": "zy"}}
  console.log(b);//{"name": "222","parents": {"m": "zy"}}

  //如果是基本类型
  let a = 111
  let b = a
  b = 333
  console.log(a);//111
  console.log(b);//333

浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。

深拷贝：从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝,拷贝前后的两个对象互不影响。

通过三个例子进行说明：

// 对象赋值
let obj1 = {
    name : 'du',
    arr : [1,[2,3],4],
};
let obj2 = obj1;
obj2.name = "zy";
obj2.arr[1] =[5,6,7] ;
console.log('obj1',obj1) // obj1 { name: 'zy', arr: [ 1, [ 5, 6, 7 ], 4 ] }
console.log('obj2',obj2) // obj2 { name: 'zy', arr: [ 1, [ 5, 6, 7 ], 4 ] }

// 浅拷贝
let obj1 = {
    name : 'du',
    arr : [1,[2,3],4],
};
let obj3=shallowClone(obj1)
obj3.name = "zy";
obj3.arr[1] = [5,6,7] ; // 新旧对象还是共享同一块内存
// 这是个浅拷贝的方法
function shallowClone(source) {
    var target = {};
    for(var i in source) {
        if (source.hasOwnProperty(i)) {
            target[i] = source[i];
        }
    }
    return target;
}
console.log('obj1',obj1) // obj1 { name: 'du', arr: [ 1, [ 5, 6, 7 ], 4 ] }
console.log('obj3',obj3) // obj3 { name: 'zy', arr: [ 1, [ 5, 6, 7 ], 4 ] }

// 深拷贝
let obj1 = {
    name : 'du',
    arr : [1,[2,3],4],
};
let obj4=deepClone(obj1)
obj4.name = "zy";
obj4.arr[1] = [5,6,7] ; // 新对象跟原对象不共享内存
// 这是个深拷贝的方法
function deepClone(obj) {
    if (obj === null) return obj; 
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (typeof obj !== "object") return obj;
    let cloneObj = new obj.constructor();
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        // 实现一个递归拷贝
        cloneObj[key] = deepClone(obj[key]);
      }
    }
    return cloneObj;
}
console.log('obj1',obj1) // obj1 { name: 'du', arr: [ 1, [ 2, 3 ], 4 ] }
console.log('obj4',obj4) // obj4 { name: 'zy', arr: [ 1, [ 5, 6, 7 ], 4 ] }