004-深拷贝&浅拷贝

1、值类型 & 引用类型

值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。
引用类型：复杂数据类型，在存储时，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。
在 js 中，值类型有：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)

2、概念

浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝。
深拷贝将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变，这就是深拷贝。

const obj1 = {
  name: 'zhangsan',
  age: 19,
  info: {
    height: '100cm',
    weight: '30kg',
  },
};

const obj2 = { ...obj1 }; // 浅拷贝
obj2.info.height = '30cm';

console.log(obj1.info.height); // 30cm

3、深拷贝

💡 Tips：对象拷贝时，如果 value 存在 引用类型，不想让拷贝对象的修改影响到原对象，需采用深拷贝

3.1 递归遍历

function deepClone(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] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

3.2 JSON.parse(JSON.stringify())

💡 Tips：不适用对象 value 存在函数的场景

function deepCloneJson(obj) {
  let objJson = JSON.stringify(obj);
  let objClone = JSON.parse(objJson);
  return objClone;
}

3.3 $.extend

💡 Tips：jquery 中的方法

function deepCloneExtend(arr) {
  let arrClone = [];
  arrClone = $.extend(true, [], arr);
  return arrClone;
}

3.4 _.cloneDeep

💡 Tips：lodash 中的方法

import { cloneDeep } from 'lodash';
const obj1 = {
  name: 'zhangsan',
  age: 19,
  info: {
    height: '100cm',
    weight: '30kg',
  },
};
const obj2 = cloneDeep(obj1);

4、浅拷贝

💡 Tips：对象拷贝时，如果 value 不存在 引用类型，可以采用浅拷贝

4.1 扩展运算符

const obj1 = {
  name: 'zhangsan',
  age: 19,
};
const obj2 = { ...obj1 };

4.2 Object.assign

const obj1 = {
  name: 'zhangsan',
  age: 19,
};
const obj2 = Object.assign({}, obj1);