JS的深浅复制详细

更新时间：2021年10月14日 14:57:53 作者：华为云开发者社区

这篇文章主要介绍JS的深浅复制，之所以会出现深浅拷贝的问题，实质上是由于JS对基本类型和引用类型的处理不同。下面感兴趣的小伙伴请跟小编一起来学习吧

1、浅复制的意思

浅复制是仅仅对数据存放在栈内的引用的复制，没有复制引用指向堆内的内容。多个数据的浅复制，这复制多个引用，这多个引用共同指向堆内的同一个内容。当一个浅复制数据做出修改，即堆内的引用指向的内容发生修改，这时，其他通过引用指向这里的数据也会随着改变。

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'

2、深复制的意思

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

3、使用深复制的原由

在平常开发中，有时会有数据的传递与接收，当拿到传过来的数据后，难免需要对数据进行加工和改造，为了不破坏原有数据结构，这时就可以使用深复制拷贝数据，然后处理生成的新的数据。深复制也可以防止修改多个引用后引用混乱的问题，减少BUG的产生机会。

4、可实现深复制的几种方法

实现方式一：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);  // 1
console.log(objA.a);  // 'a'

虽然JSON的序列化与反序列化可以实现深复制，但有几个缺点需要注意：

date日期对象被转成日期日期字符串
没法访问到原型
复制不了undefined的属性
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);  // 1
console.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);  // 1
console.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);  // 10
console.log(objA.c.c1);  // 'c1'

5、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);  // 10
console.log(objA.c.c1);  // 'c1'

到此这篇关于JS的深浅复制详细的文章就介绍到这了,更多相关JS的深浅复制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序WXSS样式文件教程
这篇文章主要为大家介绍了微信小程序WXSS样式文件教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
2022-04-04
微信小程序 template模板详解及实例
这篇文章主要介绍了微信小程序 template模板详解及实例的相关资料,需要的朋友可以参考下
2017-02-02
JS 基本概念详细介绍
这篇文章主要介绍JS 基本概念，对于初学者来说，Javascript 乍一看似乎很容易，因为它的类似于 C 的语法，但不管它的运行方式如何，对语言 (ESNext) 及其框架所做的不断变化可能会让初学者不知所措。下面我们就来看JS 初学者怎么入门吧
2021-10-10
微信小程序在Chrome浏览器上运行以及WebStorm的使用
这篇文章主要介绍了微信小程序在Chrome浏览器上运行以及WebStorm的使用的相关资料,需要的朋友可以参考下
2016-09-09
JS实现一个可以当镜子照的 Button
这篇文章主要介绍了JS实现一个可以当镜子照的 Button的方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
微信小程序 swiper组件详解及实例代码
这篇文章主要介绍了微信小程序 swiper组件详解及实例代码的相关资料,需要的朋友可以参考下
2016-10-10
手把手教你从0搭建前端脚手架详解
这篇文章主要介绍了手把手教你从0搭建前端脚手架详解,脚手架就是在启动的时候询问一些简单的问题，并且通过用户回答的结果去渲染对应的模板文件,需要的朋友可以参考下
2023-03-03
微信小程序 Buffer缓冲区的详解
这篇文章主要介绍了微信小程序 Buffer缓冲区的详解的相关资料,需要的朋友可以参考下
2017-07-07
Javascript继承(上)——对象构建介绍
Javascript中除了基本数据（Undefined、Null、Boolean、Number、String），其他都是对象（Object）
2012-11-11
javascript进阶篇深拷贝实现的四种方式
这篇文章主要为大家介绍了javascript进阶篇深拷贝实现的四种方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07