ES6 解构赋值

3,531 阅读3分钟

解构赋值

数组解构

两边有相同结构,一一对应赋值,解构不成功自动赋值undefined,如[a,b] = [1,2],若左边数组多个变量c,c解构不成功被赋值undefined

参数默认值

  • [a= 10,b =5] = [2,3],若右侧不传值,会使用默认值,传值会把默认值覆盖
  • 右侧的值只有严格等于(===)undefined(直接写undefined或不写),左侧才会使用默认值,'undefined'和null都会覆盖默认值
  • 若默认值是一个表达式,那只有在用到默认值时才会执行表达式(惰性求值)
  • 默认值可以引用解构赋值的其他变量,但该变量必须是一件声明的变量
  • 常用于函数的形参

对象解构

特点

  • 两边结构相同

  • 对象属性无序

  • 变量名必须等于属性名

    • 如解构失败,变量名赋值undefined

内部机制

  • 对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
  • let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' }; 其中前一个foo是匹配的模式,后一个foo才是被赋值的变量
  • 对象的解构赋值是以上形式的简写
  • 利用该机制可将对象属性赋值给不同名的变量
  • 对象的解构赋值可以取到继承的属性,其原型的属性

默认值

  • 和数组解构相同,默认值生效的条件时对象的属性值严格等于undefined

嵌套结构

  • 由于没有数组的一一对应,可以有多个变量获取一个对象中不同嵌套层级的子对象
  • 如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

应用

  • 可提取已存在对象的属性方法

注意

1,对已经声明的变量进行解构赋值,应将整个解构赋值表达式用()括起,避免解构对象写在行首被解析为代码块

2,解构赋值左边的模式中可以不放置变量,没有效果,但不会报错

3,数组是特殊的对象,因此可以对数组进行对象属性的解构,如let {0 : first, [arr.length - 1] : last} = arr;取得数组的第1个数和最后一个数

4,函数的形参若是一个对象等于一个对象,表示后一个对象为前一个对象的默认值,若外部传入实参对象,只要不为undefined就会代替默认值赋给前一个对象,然后这两个对象再进行解构赋值,等于进行了两次解构赋值

5,其他数据类型的解构赋值

  • 字符串也可以解构赋值,此时字符串会被转换为一个类数组对象,甚至可以取得其length属性
  • 数值和布尔值也可以解构赋值,转换为其包装对象,可以获取其具有的属性,如toString
  • undefined和null因无法转换为对象,所以对其进行解构赋值会报错

建议尽量不要在模式(对象解构内部机制中有提到)中用圆括号()

  • 变量声明语句不能用
  • 函数参数不能用
  • 赋值语句的模式部分
  • 只有赋值语句的非模式部分可以用

应用

交换变量值,如 [a,b] = [b,a]

从数组或变量中取值

函数参数传值及设置默认值

提取json数据

基础决定未来,一步一个脚印