浅谈三个点语法和深浅拷贝的认识

落日映苍穹つ 2023-01-02 04:30 98阅读 0赞

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

typora-root-url: images  
typora-copy-images-to: images

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

# 深拷贝的实现: #

# 深浅拷贝的基本认识 #

深浅拷贝问题其实就是基本类型和引用类型数据拷贝的问题。因为基本类型的数据大小是固定的，所以他保存在栈内存中；而引用类型的数据大小不固定，因而保存在堆内存中，单引用类型在栈内存中只保存一个指向堆内存的指针。

**浅拷贝**：对于浅拷贝来说，如果拷贝基本类型，那么就等于赋值一样，会直接拷贝其本身；但如果拷贝的是引用类型，就只会拷贝一层，如果 原对象发生改变，那么拷贝对象也会发生改变。

**深拷贝**：深拷贝的话就会拷贝多层，嵌套的对象也会被拷贝出来，相当于开辟一个新的内存地址用于存放拷贝的对象。

首先创造一个对象

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-syv1X2Oh-1609764692703)(/1.png)\]][img-syv1X2Oh-1609764692703_1.png]

## **第一种：ES6的Object.assign()方法** ##

针对于对象只有一层的，不能实现真正的深拷贝。对象有多层的不能使用此方法。

Object.assign(\{\},obj)的意思是先建立一个空对象\{\}，接着把`obj`中所有的属性复制过去，所以`obj1会长得跟`obj`一样，这时候再修改`obj1.`也不会影响`obj。

Object.assign()
        let obj1 = {};
        Object.assign(obj1, obj);
        obj1.name = "小辣椒";
        console.log(obj, obj1);

输出结果:![在这里插入图片描述][20210104205529831.png_pic_center]

## \*\*第二种：JSON实现深拷贝 ##

用`JSON.stringify`把对象转成字符串，再用`JSON.parse`把字符串转成新的对象。但这个方法缺点就是会造成方法的丢失

let obj1 = JSON.stringify(obj);
        obj1 = JSON.parse(obj1);
        // console.log(obj1);
        obj1.age = 22;
        console.log(obj, obj1);

输出结果：![在这里插入图片描述][20210104205551949.png_pic_center]

## 第三种：for-in遍历实现深拷贝 ##

let obj1 = {};
        for (var attr in obj) {
          obj1[attr] = obj[attr]
        }
        // console.log(obj1);
        obj1.age = 33;
        console.log(obj, obj1);

输出结果：![在这里插入图片描述][20210104205719118.png_pic_center]

## 第四种：三个点语法 ##

### 1、实现深拷贝 ###

let obj1 = { ...obj };
        obj1.name = '小番茄';
        console.log(obj, obj1);

输出结果：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hNZm1272-1609764692715)(/05.png)\]][img-hNZm1272-1609764692715_05.png]

### 2、三个点实现数组的合并 ###

let arr1 = [2, 3, 4];
        let arr2 = [5, 6, 7];
        let arr3 = [...arr1, ...arr2];
        console.log(arr3);

输出结果：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vFE2wxUt-1609764692717)(/06.png)\]][img-vFE2wxUt-1609764692717_06.png]

### 3、实现对象的合并 ###

let obj2 = { name: '小甜甜' };
        let obj3 = { age: 18 };
        let obj4 = { ...obj2, ...obj3 };
        console.log(obj4);

输出结果：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G9YXRJEZ-1609764692718)(/07.png)\]][img-G9YXRJEZ-1609764692718_07.png]

### 4、函数参数的使用 ###

#### 传递的实参可以是一个数组 ####

function fn(a, b, c) {
          console.log(a, b, c);
        }
        let arr5 = [11, 22, 33];
        fn(...arr5)

输出结果:![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YS3zRHHR-1609764692719)(/08.png)\]][img-YS3zRHHR-1609764692719_08.png]

#### 假如传递的参数是一个对象 ####

function fn(name, age) {
          console.log(name, age);
        }
        var obj = {
          name: '小甜甜',
          age: 18
        }
        fn(...obj)

输出结果：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6xcECbkJ-1609764692721)(/10.png)\]][img-6xcECbkJ-1609764692721_10.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A6M03GlJ-1609764692722)(/1.jpg)\]][img-A6M03GlJ-1609764692722_1.jpg]

**其实是三个点语法不支持这种以对象的形式传递参数**

### 5、将函数传递参数变成数组 ###

输出结果是一个数组

function fn1(...arr) {
          console.log(arr);
        }
        fn1('zs', 18)

输出结果：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qj9XFVWO-1609764692723)(/09.png)\]][img-qj9XFVWO-1609764692723_09.png]

[img-syv1X2Oh-1609764692703_1.png]: /images/20221120/699a36e5e7e54f799b7555c6ff0d9849.png
[20210104205529831.png_pic_center]: /images/20221120/493f7b556456461a885046bd30df76f4.png
[20210104205551949.png_pic_center]: /images/20221120/32c12e1c1b7c479c892742533316281d.png
[20210104205719118.png_pic_center]: /images/20221120/3a707b4a9d854e20820dceddb555f459.png
[img-hNZm1272-1609764692715_05.png]: /images/20221120/216b6bcd0357439f8af779b2b7e37e7a.png
[img-vFE2wxUt-1609764692717_06.png]: /images/20221120/2afa67cf03e44eb0af4c6a29c5e16e98.png
[img-G9YXRJEZ-1609764692718_07.png]: /images/20221120/28a6a9527d20474cb230f1ae95cf0fbf.png
[img-YS3zRHHR-1609764692719_08.png]: /images/20221120/e70caf3afd3b42c19850eb05c25ae226.png
[img-6xcECbkJ-1609764692721_10.png]: /images/20221120/5f7513a8ff964a5d9d738a4fdbb4fe88.png
[img-A6M03GlJ-1609764692722_1.jpg]: /images/20221120/a727b324b00243e8b0606652f112b4b5.png
[img-qj9XFVWO-1609764692723_09.png]: /images/20221120/5c11a622ee674734a1a4dfb087a52bb1.png