js深拷贝和浅拷贝概念（js深拷贝和浅拷贝如何实现）



目录

一、前置知识详解

1.1.JavaScript数据类型

1.2.理解传值和传址

二、浅拷贝

2.1.浅拷贝的定义和原理

2.2.实现浅拷贝的方法

2.2.1.手写递归实现

2.2.2.利用展开语法实现浅拷贝

 2.2.3.Object.assign进行对象的合并

2.2.4.利用Array.prototype.,slice()

2.2.5.利用Array.prototype.contact()

三、深拷贝

3.1.深拷贝的定义及原理

3.2.深拷贝的实现方法

3.2.1.递归实现深拷贝

3.2.2.JSON.parse(JSON.stringify(待拷贝对象)

 3.2.3.jQuery 中的 $.extend() 第一个参数设置为true为深拷贝，为false为浅拷贝(要引入JQuery库)

3.2.4.引入loadsh,提供 cloneDeep 实现

---

在学习浅拷贝和深拷贝之前，我们有必要了解的前置知识

JavaScript的数据类型分为基本类型:Number,String,Boolean,Undefined,Null,Symbol,BigInt

                                          引用l类型:对象(Object),数组(Array),函数(Function)

基本类型数据保存在在栈内存中

引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中

传值：开辟新内存区域存储值

代码示例如下

传址：传递内存地址，而不开辟新空间

 

输出内容相同，obj和obj1指向了同一个内存地址。

浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝

如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址

即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址

2.2.1.手写递归实现

打印输出结果如下

2.2.2.利用展开语法实现浅拷贝

 2.2.3.Object.assign进行对象的合并

2.2.4.利用Array.prototype.,slice()

2.2.5.利用Array.prototype.contact()

  深拷贝开辟一个新的栈，两个对象属性完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

3.2.1.递归实现深拷贝

第一种方法

第二种方法，巧妙运用Object.entries(obj)遍历对象的属性和值

输出结果相同，如下:

3.2.2.JSON.parse(JSON.stringify(待拷贝对象)

 3.2.3.jQuery 中的 $.extend() 第一个参数设置为true为深拷贝，为false为浅拷贝(要引入JQuery库)

3.2.4.引入loadsh,提供 cloneDeep 实现

vue中使用loash库实现深拷贝的步骤

1. 安装loadsh    npm i --save lodash
2. 引入loadsh    import _ from 'lodash'
3. 直接调用loadsh库的方法 const newObj = _.cloneDeep(this.obj)

到此这篇js深拷贝和浅拷贝概念（js深拷贝和浅拷贝如何实现）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/31830.html