摘要：之所以会呈现深浅拷贝的问题，本质上是因为JS对根本类型和援用类型的解决不同。

本文分享自华为云社区《js的深浅复制，一看就明确》，作者： 鑫2020。

浅复制的意思

浅复制是仅仅对数据寄存在栈内的援用的复制，没有复制援用指向堆内的内容。多个数据的浅复制，这复制多个援用，这多个援用独特指向堆内的同一个内容。当一个浅复制数据做出批改，即堆内的援用指向的内容产生批改，这时，其余通过援用指向这里的数据也会随着扭转。

let obj = {    a:1,    b:2,    c:{        c1:10,        c2:20    }}let objA = obj;objA.a = 'a';console.log(obj.a);  // 'a'console.log(objA.a);  // 'a'

深复制的意思

深复制是指连同堆的内容一块复制，生成一个新的对象。多个深复制将是多个不同的对象，也就有不同的援用，也就指向不同的堆内容。

应用深复制的原由

在平时开发中，有时会有数据的传递与接管，当拿到传过来的数据后，不免须要对数据进行加工和革新，为了不毁坏原有数据结构，这时就能够应用深复制拷贝数据，而后解决生成的新的数据。深复制也能够避免批改多个援用后援用凌乱的问题，缩小BUG的产生机会。

可实现深复制的几种办法

实现形式一：JSON的序列化与反序列化

let obj = {    a:1,    b:2,    c:{        c1:10,        c2:20    }}let objA = JSON.parse(JSON.stringify(obj));//JSON的序列化与反序列化objA.a = 'a';console.log(obj.a);  // 1console.log(objA.a);  // 'a'

尽管JSON的序列化与反序列化能够实现深复制，但有几个毛病须要留神：
1、date日期对象被转成日期日期字符串
2、没法拜访到原型
3、复制不了undefined的属性
4、NAN和无穷被转为NULL

let d1 = new Date();let obj = {    d1,    d2: undefined,    d3:NaN}let objD = JSON.parse(JSON.stringify(obj));console.log(obj) console.log(objD)

实现形式二：Object.assign()

let obj = {    a:1,    b:2,    c:{        c1:10,        c2:20    }}let objA = Object.assign(obj);objA.a = 'a';console.log(obj.a);  // 1console.log(objA.a);  // 'a'

尽管Object.assign()能够实现深复制，但对于更深层次的对象援用也是仅仅浅复制。

let obj = {    a:1,    b:2,    c:{        c1:10,        c2:20    }}let objA = Object.assign(obj);objA.c.c1 = 'c1'; //Object.assign()仅仅是一层深复制。console.log(obj.c.c1);  // 'c1'console.log(objA.c.c1);  // 'c1'

实现形式三：扩大运算符

let obj = {    a:1,    b:2,    c:{        c1:10,        c2:20    }}let objA = {...obj};;objA.a = 'a';console.log(obj.a);  // 1console.log(objA.a);  // 'a'

尽管扩大运算符"…"能够实现深复制，但对于更深层次的对象援用也是仅仅浅复制。

let obj = {    a:1,    b:2,    c:{        c1:10,        c2:20    }}let objA = {...obj};objA.c.c1 = 'c1'; //扩大运算符"..."同Object.assign()一样，仅仅是一层深复制，不能多层深复制。console.log(obj.c.c1);  // 'c1'console.log(objA.c.c1);  // 'c1'

实现形式四：应用递归

想要实现深复制，且实现多层深复制则能够应用递归循环复制。

let obj = {    a:1,    b:2,    c:{        c1:10,        c2:20    }}const ReCopy = function (paramter) {        let target = null;        let isObject = paramter.constructor === Object;        let isArray = paramter.constructor === Array;        if (isObject || isArray) {            target = Array.isArray(paramter) ? [] : {};            for (let i in paramter) {                target[i] = ReCopy(paramter[i]);            }        } else {            target = paramter;        }        return target;    }let objA = ReCopy(obj);objA.c.c1 = 'c1';console.log(obj.c.c1);  // 10console.log(objA.c.c1);  // 'c1'

ladash深拷贝

lodash深复制是更业余的深复制形式。

  • 装置lodash

先初始化，生成package.json文件，而后应用一下命令装置。
npm i -S lodash

  • 引入lodash
    var _ = require('lodash');
  • 应用lodash
let obj = {    a:1,    b:2,    c:{        c1:10,        c2:20    }}let objA = _.cloneDeep(obj);objA.c.c1 = 'c1'; console.log(obj.c.c1);  // 10console.log(objA.c.c1);  // 'c1'

点击关注，第一工夫理解华为云陈腐技术~