解构赋值

245 阅读2分钟

解构赋值

  • 解构赋值: 可以将数组中的值或对象的属性取出,赋值给其他变量
  • 解构: 其实就是把一个事物的结构进行拆解

一、数组解构

基本语法:

  1. 右侧数组的将被赋值给左侧的变量
  2. 变量的顺序对应数组值的位置依次进行赋值操作
  • image.png

典型应用:

  • 交换2个变量
  • image.png
  • 注意: 当代码以() [] 开头时需要在前面加上分号。

变量和值不匹配的情况:

  1. 变量多值少的情况:
  • image.png
  • 变量的数量大于值数量时,多余的变量将被赋值为 undefined
  1. 防止有undefined传递值的情况,可以设置默认值:
  • image.png
  1. 变量少值多的情况:
  • image.png
  • 按照顺序依次赋值,多余的省略了。 4.利用剩余参数解决变量少值多的情况:
  • image.png
  • 将后面多余的值全放在...tel里。
  1. 按需导入,忽略某些值:
  • image.png
  • 忽略的值对应位置变量名填空,但要用 逗号隔开。
  1. 支持多维的数组解构:
  • image.png
  • image.png

二、对象解构

  • 可以将对象的属性取出,赋值给其他变量

基本语法:

  • 右侧对象的属性值将被赋值给左侧的变量
  • image.png

注意:

  • 对象的属性名一定要和变量名相同
  • 变量名如果没有和对象属性名相同的则默认是 undefined
  • 注意解构的变量名不要和外面的变量名冲突否则报错

1.更改解构变量名:

  • 可以从一个对象中提取变量并同时修改新的变量名
  • image.png

2.对象数组解构

  • image.png

3.多级对象解构

  • image.png

三、函数参数的解构

1.在函数内部解构

  • image.png

2.在形参的位置,可以直接解构

  • image.png

3.在形参的位置,解构,并且重命名

  • image.png