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

科技前沿 • 2025-05-09 14:45 • 阅读 46

大家好，我是讯享网，很高兴认识大家。

 <p id="main-toc"><strong>目录</strong></p>

讯享网

一、前置知识详解

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库实现深拷贝的步骤

安装loadsh npm i –save lodash
引入loadsh import _ from ‘lodash’
直接调用loadsh库的方法 const newObj = _.cloneDeep(this.obj)

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

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.递归实现深拷贝

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

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

3.2.4.引入loadsh,提供 cloneDeep 实现

相关推荐