3.解构赋值

news2024/11/26 18:29:57

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。

3.1数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

1.基本语法:
（1）赋值运算符=左侧的[ ]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
（2）变量的顺序对应数组单元值的位置依次进行赋值操作
在这里插入图片描述
基本语法：典型应用交互2个变量

2.（1）变量多单元值少：

变量的数量大于单元值数量时，多余的变量将被赋值为undefined

（2）变量少单元值多

3.利用剩余参数解决变量少单元值多的情况：
在这里插入图片描述
4.防止有undefined传递单元值的情况，可以设置默认值：

允许初始化变量的默认值，且只有单元值为undefined时默认值才会生效

5.按需导入，忽略某些返回值:
在这里插入图片描述
6.支持多维数组的结构:

3.2对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

一、基本语法
1.赋值运算符 = 左侧的{ }用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量
2.对象属性的值将被赋值给与其属性名相同的变量
3.注意解构的变量名不要和外面的变量名冲突否则报错
4.对象中找不到与变量名一致的属性时变量值为undefined
【例如】

<script>
    const obj = {
        uname: 'Kai',
        age: 18
    }
    // 解构的语法
    const { uname, age } = obj
    console.log(uname) // Kai
    console.log(age) // 18
</script>

二、给新的变量名赋值
可以从一个对象中提取变量并同时修改新的变量名
在这里插入图片描述
冒号表示 “什么值：赋值给谁”

三、数组对象解构
在这里插入图片描述
四、多级对象解构

3.3遍历数组forEach方法(重点)

forEach()方法用于调用数组的每个元素，并将元素传递给回调函数
●主要使用场景: 遍历数组的每个元素
●语法:

被遍历的数组.forEach(function (当前数组元素,当前元素索引号) {
	// 函数体
})

【例如】

const arr = ['red', 'blue', 'pink']
arr.forEach(function (item, index) {
   console.log(item) // 依次打印数组每一个元素
   console.log(index) // 索引号
})

注意:
1.forEach主要是遍历数组，更适合于遍历数组对象
2.参数当前数组元素是必须要写的，索引号可选

3.4筛选数组filter 方法(重点)

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
●主要使用场景: 筛选数组符合条件的元素，并返回筛选之后元素的新数组
●语法：
在这里插入图片描述
【例如】

<script>
	// 筛选数组中大于等于20的元素
	const arr = [10, 20, 30]
	const str = arr.filter(function (item, index) {
	   return item >= 20
	})
	// const str = arr.filter(item => item >= 20)
	console.log(str)  // [20,30]
</script>