JS 浅拷贝和深拷贝详解(巨详细)

小鱼儿 2023-10-12 09:01 28阅读 0赞

**目录**

一、前置知识详解

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 实现

--------------------

## 一、前置知识详解 ##

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

### 1.1.JavaScript数据类型 ###

> JavaScript的数据类型分为基本类型:Number,String,Boolean,Undefined,Null,Symbol,BigInt
> 
> 引用l类型:*对象(Object),数组(Array),函数(Function)*
> 
> 基本类型数据保存在在栈内存中
> 
> 引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中

### 1.2.理解传值和传址 ###

**传值：开辟新[内存][Link 1]区域存储值**

代码示例如下

let a = 3;
                let b = a;
                console.log(a, b);  // 3 3
                b = 5;  
                console.log(a, b);  // 3 5

![2935dd5eb97f498eb2bf045d1929309b.png][]

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

let obj = {
                    name: 'zs',
                    age: 20,
                };
                let obj1 = obj;
                console.log(obj, obj1);
                obj1.name = 'lisi';
                console.log(obj, obj1);

![3171e0ce46f94ca3a1ede046ab01bff7.png][]

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

![97450eaa1a324e05993d3853b6443bfd.png][]

## 二、浅拷贝 ##

### 2.1.浅拷贝的定义和原理 ###

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

> 如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址
> 
> 即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址

### 2.2.实现浅拷贝的方法 ###

#### **2.2.1.手写递归实现** ####

// 手写实现浅拷贝
                function shallowClone(obj) {
                    let newObj = {};
                    for (let i in obj) {
                        // 只要是obj的属性，直接复制一份给newObj
                        if (obj.hasOwnProperty(i)) {
                            newObj[i] = obj[i];
                        }
                    }
                    return newObj;
                }
                const person = {
                    name: 'zs',
                    hobby: ['排球', '网球', '篮球'],
                };
                const person1 = shallowClone(person);
                console.log(person);
                console.log(person1);
                person1.name = 'lisi';
                person1.hobby[0] = '足球';
                console.log(person);
                console.log(person1);

打印输出结果如下

![225e4a0caa1842daa9656d0f73948dd1.png][]

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

let obj = {
                    name: 'zs',
                    lessons: ['hobby', 'suxexu', 'kligh'],
                };
                let hd1 = { ...obj };
                hd1.name = 'lisi';
                hd1.lessons[0] = 'math';
                console.log(obj);
                console.log(hd1);

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

let obj = {
                    name: 'zs',
                    lessons: ['hobby', 'suxexu', 'kligh'],
                };
                let newObj = Object.assign({}, obj);
                newObj.lessons[0] = 'math';
                console.log(obj);
                console.log(newObj);

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

const arr = [1, 2, { name: 'nordon' }];
                const newArr = arr.slice();
                newArr[2].name = 'wy';
                console.log(arr);
                console.log(newArr);

#### **2.2.5.利用Array.prototype.contact()** ####

const arr = [1, 2, { name: 'nordon' }];
                const newArr = arr.concat();
                newArr[2].name = 'wy';
                console.log(arr);
                console.log(newArr);

## 三、深拷贝 ##

### 3.1.深拷贝的定义及原理 ###

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

### 3.2.深拷贝的实现方法 ###

#### **3.2.1.递归实现深拷贝** ####

第一种方法

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

输出结果相同，如下:

![72ea7614f46744559ec51ffbe187e3df.png][]

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

const obj = {
                    name: 'zs',
                    hobby: ['排球', '网球', '乒乓球'],
                };
                const newObj = JSON.parse(JSON.stringify(obj));
                newObj.name = 'lisi';
                newObj.hobby[0] = '篮球';
                console.log(obj);
                console.log(newObj);

####  **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)

[Link 1]: https://so.csdn.net/so/search?q=%E5%86%85%E5%AD%98&spm=1001.2101.3001.7020
[2935dd5eb97f498eb2bf045d1929309b.png]: https://img-blog.csdnimg.cn/2935dd5eb97f498eb2bf045d1929309b.png
[3171e0ce46f94ca3a1ede046ab01bff7.png]: https://img-blog.csdnimg.cn/3171e0ce46f94ca3a1ede046ab01bff7.png
[97450eaa1a324e05993d3853b6443bfd.png]: https://img-blog.csdnimg.cn/97450eaa1a324e05993d3853b6443bfd.png
[225e4a0caa1842daa9656d0f73948dd1.png]: https://img-blog.csdnimg.cn/225e4a0caa1842daa9656d0f73948dd1.png
[72ea7614f46744559ec51ffbe187e3df.png]: https://img-blog.csdnimg.cn/72ea7614f46744559ec51ffbe187e3df.png
[lodash]: https://so.csdn.net/so/search?q=lodash&spm=1001.2101.3001.7020