#今日说码栏目# 深拷贝与浅拷贝

 1、深拷贝

深拷贝的定义：在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中中。

深拷贝作用在引用类型上！例如：Object对象，Array数组
深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突。

基本数据类型

var a = 1;
var b = a;
b = 2;
console.log(a); // 1
console.log(b); // 2

引用数据类型

var obj1 = {
    a:  1,
    b:  2,
    c:  3
}
var obj2 = obj1;
obj2.a = 5;
console.log(obj1.a);  // 5
console.log(obj2.a);  // 5

使用深拷贝的原因：我们希望在改变新的数组（或者原对象）的时候，不改变原数组（或者原对象）

深拷贝的四种方法

1、使用JSON.stringify() 使对象字符串化和  JSON.parse()  使字符串对象化  相互转换

①let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式

②let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象

 var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

可以看到没有发生引用问题，修改obj2的数据，并不会对obj1造成任何影响
但是使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined ， function， RegExp 等等类型的

2、通过for in实现

function deepCopy1(obj) {
  let o = {}
  for(let key in obj) {
    o[key] = obj[key]
  }
  return o
}
 
let obj = {
  a:1,
  b: undefined,
  c:function() {},
}
console.log(deepCopy1(obj))

 3、递归 （自身调用自身）

使用递归的方式实现数组、对象的深拷贝

function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

4.concat（数组的深拷贝）

使用concat合并数组，会返回一个新的数组。
对象是一个引用数据类型 普通的复制是一个浅拷贝

let arr_1 = [1, 2, false, 'a']
let arr_2 = [].concat(arr_1)

arr_1[1] = 3  //给下标为1的地址重新赋值为3

// arr_1中的数据更改，并不会影响arr_2
console.log(arr_1) // -> [1, 3, false, 'a']
console.log(arr_2) // -> [1, 2, false, 'a']

2、浅拷贝

浅拷贝的定义：自己创建一个新的对象，来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型，复制的就是基本类型的值给新对象；但如果属性是引用数据类型，复制的就是内存中的地址，如果其中一个对象改变了这个内存中的地址，肯定会影响到另一个对象。

浅拷贝的四种方法

1、Object.assign

Object.assign 是 对象的一个方法，该方法可以用于 JS 对象的合并等多个用途，其中一个用途就是可以进行浅拷贝。该方法的第一个参数是拷贝的目标对象，后面的参数是拷贝的来源对象（也可以是多个来源）。

const obj = {};
const source = {
  name: 'nordon',
  info: {
    age: 18
  }
};
 
Object.assign(obj, source);
console.log(obj); // {name: 'nordon', info: {…}}
source.info.age = 20;
console.log(obj);
console.log(source);

2、扩展运算符

const source = {
  name: 'nordon',
  info: {
    age: 18
  }
};
const obj = {...source};
 
Object.assign(obj, source);
source.info.age = 20;
console.log(obj);
console.log(source);

3、Array.prototype.concat

数组的 concat 方法其实也是浅拷贝，使用场景比较少，使用concat连接一个含有引用类型的数组时，需要注意修改原数组中的元素的属性，因为它会影响拷贝之后连接的数组

const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.concat();
newArr[2].name = 'wy';
console.log(arr); 
console.log(newArr);

4、Array.prototype.slice

数组的 slice 方法其实也是浅拷贝，使用场景比较少，同concat

const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.slice();
newArr[2].name = 'mike';