前端战五渣学JavaScript——深克隆（深拷贝）

直接进入正题

JavaScript数据类型

5种简单数据类型（也称为基本数据类型）:Undefined、Null、Boolean、Number和String；

1种复杂数据类型：Object；

基本数据类型（5种简单数据类型）：直接存储在栈（stack）中的数据

引用类型（复杂数据类型Object）：存储的是该对象在栈中引用，真实的数据存放在堆内存里

浅克隆

基础数据类型

（我我的以为。。。基础数据类型没有什么深克隆浅克隆之分，暂且目录先这么分吧）

由于数据类型的特性，在赋值的时候，基本数据类型和引用类型是不同的⬇️

// 基本数据类型
var a = '我是变量a的值';
var b = a;

console.log(a); // 我是变量a的值
console.log(b); // 我是变量a的值

b = '我是变量b的值';

console.log(a); // 我是变量a的值
console.log(b); // 我是变量b的值
复制代码

上面代码咱们声明了变量a为我是变量a的值，而后声明变量b，并把变量a赋值给变量b，输出，得出变量a和b输出的值是同样的
而后咱们单独更改了变量b的值，再输出的时候发现变量a和b输出的值不同了，能够证实他们两个的值是单独存在的，互相没有联系，就算var b = a，也只是新增了一个变量b和值。

复杂数据类型（引用类型）

// 引用类型
var obj1 = {
  a: 'a',
  b: 'b'
}
var obj2 = obj1;

console.log(obj1); // { a: 'a', b: 'b' }
console.log(obj2); // { a: 'a', b: 'b' }

obj2.b = 'bb';

console.log(obj1); // { a: 'a', b: 'bb' }
console.log(obj2); // { a: 'a', b: 'bb' }
复制代码

在上面的代码中能发现，在引用类型直接的赋值，声明变量obj1为一个对象，而后让讲变量obj1赋值给obj2，这时候输出的变量obj1和变量obj2的值是同样的
当咱们更改了obj2.b的值之后，输出结果发现obj1.b的值也跟着发生了变化
这就是咱们要说的，引用类型的赋值只是给了一个对内存中对象引用的一个指针，因此变量obj1和变量obj2是引用了同一个内存中的对象，因此当一个更改之后，另外一个也会跟着改变。

---

插播深克隆的形象图片，我本身画的，大概意思理解一下

---

深克隆

咱们要实现的深克隆，是一个彻底克隆出一个全新的对象在内存中

不完美深克隆——Object.assign()

Object.assign()方法用于将全部可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。————————《MDN web docs》

Object.assign(target, ...sources)

这是MDN文档中对Object.assign()这个方法的说明，其实就是这个方法能够穿入两个参数，第一个参数是目标函数，第二个参数是源对象，而后会把源对象的可枚举到的属性复制到目标函数中，而后返回目标对象，也就是更改了目标对象。举个例子，先来了解一下这个方法怎么用⬇️

// 声明目标对象和源对象
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
// 将源对象上可枚举的属性复制到目标对象上，有相同键值的覆盖
const returnedTarget = Object.assign(target, source);

console.log(source); // { b: 4, c: 5 }

console.log(target); // { a: 1, b: 4, c: 5 }

console.log(returnedTarget); // { a: 1, b: 4, c: 5 }
复制代码

就目前的形势，真的是把源对象的属性复制到目标对象上了，貌似是能够实现深克隆的，那咱们再来看下面的例子⬇️

// 声明目标对象和源对象
const target = {};
const source = {
  a: 1,
  b: {
    ba: 'ba',
    bb: 'bb'
  },
  c: function () {
    console.log('c')
  }
};
// 将源对象上可枚举的属性复制到目标对象上，有相同键值的覆盖
const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }
console.log(source); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }
console.log(returnedTarget); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }

target.b.ba = 'ba2';

console.log(target); // { a: 1, b: { ba: 'ba2', bb: 'bb' }, c: [Function: c] }
console.log(source); // { a: 1, b: { ba: 'ba2', bb: 'bb' }, c: [Function: c] }
console.log(returnedTarget); // { a: 1, b: { ba: 'ba2', bb: 'bb' }, c: [Function: c] }
复制代码

上面的代码想表达的意思就是，当咱们不涉及到第二层或者更深层的包含复杂数据类型，可见Object.assign()方法是基本可行的，可是若是对象中包含另外一层Object或者Array这样的引用类型，他们仍是保存的指针，而不是真的复制出一个新的Object或者Array
既然Object.assign()不是很完美，那咱们换个方法————序列化

不完美深克隆——JSON.stringify()和JSON.parse()

序列化（Serialization）意味着将对象或某种其余类型的数据结构转换为可存储格式（例如，文件或者buffer）
在JavaScript中，你能够经过调用JSON.stringify()函数将某个值序列化为JSON格式的字符串。
CSS值能够经过调用CSSStyleDeclaration.getPropertyValue()函数来序列化。
————————————《MDN web docs》

咱们如今说说一个最简单的伪深克隆（不是官方词语），能够达到大部分功能，可是依然会有欠缺，这就是经过JSON.stringify()和JSON.parse()方法对对象进行序列化和反序列化。依然是上面的例子⬇️

// 声明源对象
let source = {
  a: 1,
  b: {
    ba: 'ba',
    bb: 'bb'
  },
  c: function () {
    console.log('c')
  }
};
// 经过序列化而后再反序列化源对象来赋值目标对象
let target = JSON.parse(JSON.stringify(source))

console.log(source); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }
console.log(target); // { a: 1, b: { ba: 'ba', bb: 'bb' } }

target.b.ba = 'ba2';

console.log(source); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }
console.log(target); // { a: 1, b: { ba: 'ba2', bb: 'bb' } }
复制代码

上面经过序列化和反序列化的方法克隆了源对象到目标对象，不只第一层属性同样，第二层的对象也不单单是指向同一个对象，这看似完美的方法却有几点缺陷

1. 他没法实现对函数 、RegExp等特殊对象的克隆
2. 会抛弃对象的constructor,全部的构造函数会指向Object
3. 对象有循环引用,会报错

如下例子借鉴《面试官:请你实现一个深克隆》 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

// 构造函数
function person(pname) {
  this.name = pname;
}

const Messi = new person('Messi');

// 函数
function say() {
  console.log('hi');
};

const oldObj = {
  a: say,
  b: new Array(1),
  c: new RegExp('ab+c', 'i'),
  d: Messi
};

const newObj = JSON.parse(JSON.stringify(oldObj));

// 没法复制函数
console.log(newObj.a, oldObj.a); // undefined [Function: say]
// 稀疏数组复制错误
console.log(newObj.b[0], oldObj.b[0]); // null undefined
// 没法复制正则对象
console.log(newObj.c, oldObj.c); // {} /ab+c/i
// 构造函数指向错误
console.log(newObj.d.constructor, oldObj.d.constructor); // [Function: Object] [Function: person]
复制代码

咱们能够看到在对函数、正则对象、稀疏数组等对象克隆时会发生意外，构造函数指向也会发生错误。

const oldObj = {};

oldObj.a = oldObj;

const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.a, oldObj.a); // TypeError: Converting circular structure to JSON
复制代码

对象的循环引用会抛出错误.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

实现深克隆（代码有问题，仅供参考思路）

看来咱们想经过已有的方法是实现不了深克隆的，因此咱们须要本身手写方法来实现深克隆，咱们要记住的思路就是两点

1. 判断数据类型，分别处理
2. 递归

/** * 常量 * @type {string} */
const TYPE_OBJECT = '[object Object]';
const TYPE_ARRAY = '[object Array]';
/** * 判断对象的类型 * @param obj 来源对象 * @returns {string} 对象类型 */
function typeToString(obj) {
  return Object.prototype.toString.call(obj)
}

/** * 深克隆对象 * @param oldObj 源对象 * @returns {Object} 返回克隆后的对象 */
function deepClone(oldObj) {
  let newObj;
  if ( oldObj === null ) {
    return null
  }
  if ( typeof oldObj !== 'object') {
    return oldObj
  }
  switch (typeToString(oldObj)) {
    case TYPE_OBJECT:
      newObj = {}
      break;
    case TYPE_ARRAY:
      newObj = [];
      break;
  }
  for (let i in oldObj) {
    newObj[i] = deepClone(oldObj[i]);
  }
  return newObj
}
复制代码

以上是我本身手写实现的深克隆
请勿抄袭，写的只是个小demo，不能用在生产环境，判断的数据类型有限，而且没有处理对象继承的constructor指向问题，也没有解决循环引用的问题
看一下大概思路就好了

最佳实践————Lodash的_.cloneDeep

Lodash是什么？Lodash是一个一致性、模块化、高性能的JavaScript实用工具库，实用方法请参考个人另外一篇博客
掘金：《lodash入门》 简书：《lodash入门》
还有还有😝😝😝😝😝😝

阅读量上万了，开心~

使用

import _ from 'lodash';

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
复制代码

使用就是这么使用，看了眼源码是怎么实现，能够说lodash在深克隆方法的实现上真是全之又全，判断的项目测20来项，不只有数据类型的判断，还有浮点数的判断，多少位的浮点数的判断，反正就是不少判断，以及边界考虑。

OH MY GOD，用它！！

PS：这篇没有加入动漫元素😢😢😢

---

我是前端战五渣，一个前端界的小学生。