js中的解构赋值使用总结

╰+哭是因爲堅強的太久メ 2023-10-03 12:26 22阅读 0赞

**目录**

前言：

1.解构赋值是什么？

2.使用：作为交换变量

3.使用：对象/数组解构

4.使用：传参

5.使用：数组去重

6 问题：解构赋值是深拷贝还是浅拷贝？

7.解构赋值的详细说明和基础用法

8.使用总结（注意点）

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

### 前言： ###

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

> **本文前半部分介绍解构赋值在实际工作中的各种使用方法，后半部分介绍在使用过程中容易产生的疑问和解答。如果你对此很陌生，可先直接浏览本文最后部分，那里详细的介绍了什么是解构赋值，和最基础的用法。**

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

注：本文中所有的代码可直接复制，并正常运行。

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

### 1.解构赋值是什么？ ###

> **解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。**

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

### 2.使用：作为交换变量 ###

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

> **之前想要交换两个变量的值，可能需要借助第三个变量。但是，使用解构赋值可以提高约50%的逼格。**

不要误会，虽然好像是俩数组，但是这是人家的格式而已，实打实的给你交换了

let x = '我是x', y = 123; 
    
    [x, y] = [y, x]; 
    
    console.log(x)  // 控制台打印：123

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

### 3.使用：对象/数组解构 ###

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

> 前端使用最多，也是最常见的。如后端返回一堆数据，我只想要里面的某些数据，如data，那么我就可以用解构的方法。
> 
> 所谓的解构赋值，简单理解就是照着葫芦画瓢，人家是对象你就用个对象来解构，学着要解构的对象就完事。

注意第二行代码，这就是解构的格式：

const obj = {age:111,data:[1,2,3,4],name:'小王'}
      const {data} = obj //解构data
      console.log(data); //控制台结果：[1,2,3,4]

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

###  ###

### 4. 使用：传参 ###

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

**典型应用场景：发送请求时传参数**

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

> **属于相对较难的部分，是一个超级重点，务必掌握！**
> 
> **灵活性比较高，根据业务实际需求，来使用解构赋值**

//假设后台要求传一个对象进去,要一个id和一个数组
     let obj = {id:2000}
     let arr = [1,2,3]
     let newObj = {id:2001,name:'小王'}
     
    console.log([...arr])//...是展开的意思，就是把里面的每个值拿出来
    //  console.log({...obj,...newObj}); //newObj里面的id覆盖掉obj里的id
    // getXXX({...obj,arr}) 假装getXXX是封装的接口api,这句代码结果是：{id:2000,[1,2,3]}

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

###  ###

### 5.使用：数组去重 ###

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

**一句代码即可完成。**

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

let arr = [1,2,1,1,1,3] //定义数组
     let newArr = [...new Set(arr)]; // [...]意思是解构并展开为数组，new Set（）是去重
     console.log(newArr); //结果：【1,2,3】

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

###  ###

### 6 问题：解构赋值是深拷贝还是浅拷贝？ ###

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

**6.1 解释一下什么是深浅拷贝：**

> 数据存在堆中，引用地址存在栈中。深浅拷贝的区别就是，浅拷贝是拷贝的引用地址，深拷贝则是完全开辟新的内存空间，相当于在堆里新建数据。

*  深拷贝：修改新变量的值不会影响原有变量的值。默认情况下基本数据类型（number，string，null，undefined，boolean）都是深拷贝。
 *  浅拷贝：修改新变量的值会影响原有的变量的值。默认情况下引用类型（object）都是浅拷贝。

**6.2 答案：**

> **是浅拷贝。**但是如果解构的是那种一维数组且里面的数据是简单类型，和那种对象里面是简单类型的是深拷贝。其他情况都是浅拷贝。

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

###  ###

### 7.解构赋值的详细说明和基础用法 ###

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

**7.1 是什么？**

> 解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

**7.2分类**

> **分为数组解构和对象解构**

**7.3 数组解构的用法**

> 数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示：

**7.4 对象解构的用法**

> 对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法，如下代码所示：

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

### 8.使用总结（注意点） ###

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

**8.1 使用数组结构时的注意点：**

> 1.  赋值运算符 `=` 左侧的 `[]` 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
> 2.  变量的顺序对应数组单元值的位置依次进行赋值操作
> 3.  变量的数量大于单元值数量时，多余的变量将被赋值为 `undefined`
> 4.  变量的数量小于单元值数量时，可以通过 `...` 获取剩余单元值，但只能置于最末位
> 5.  允许初始化变量的默认值，且只有单元值为 `undefined` 时默认值才会生效
> 
> 注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

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

**8.2 使用对象解构的注意点：**

> 1.  赋值运算符 `=` 左侧的 `{}` 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
> 2.  对象属性的值将被赋值给与属性名相同的变量
> 3.  对象中找不到与变量名一致的属性时变量值为 `undefined`
> 4.  允许初始化变量的默认值，属性不存在或单元值为 `undefined` 时默认值才会生效
> 
> 注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

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

**8.3 通过实际的代码举例数组解构：**

let arr = ['张飞', '关羽', '赵云', '马超', '黄忠', '张辽', '许褚', '贾诩'];
    
    		// 解构赋值
    		// let [a, b, c, d, e, f, g, h] = ['张飞', '关羽', '赵云', '马超', '黄忠', '张辽', '许褚', '贾诩'];
    
    		// console.log( a, b, c, d, e, f, g, h );
    
    
    		// 其他形式
    		// 变量少值多
    		// let [a, b, c] = ['张飞', '关羽', '赵云', '马超', '黄忠'];
    
    		// 变量多值少
    		// let [a, b, c, d, e, f] = ['张飞', '关羽', '赵云', '马超', '黄忠'];
    	
    
    		// 按需取值
    		// let [, a, b, , , c] = ['张飞', '关羽', '赵云', '马超', '黄忠', '张辽', '许褚', '贾诩'];
    
    		// 剩余值
    		// let [a, b, ...c] = ['张飞', '关羽', '赵云', '马超', '黄忠', '张辽', '许褚', '贾诩'];
    		
    		// 复杂形式
    		let [, a, b, [, c]] = ['张飞', '关羽', '赵云', ['吕布', '张辽', '曹操']];
    
    
    		console.log(a, b, c);

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

**8.4 通过实际的代码举例对象解构：**

let obj = {
    			uname :'张飞',
    			age : 22,
    			sex : '男',
    			index : 99,
    			score : 123,
    		}
    
    		let uname = '关羽';
    
    
    		// 解构赋值
    		// 如果变量名冲突，换一个变量名
    		let {uname : userName, score} = {
    			uname :'张飞',
    			age : 22,
    			sex : '男',
    			index : 99,
    			score : 123,
    		}
    
    
    		console.log(userName, score);