运算符扩展

134 阅读2分钟

ES6运算符以扩展不多,有如下几个:指数运算符**、链判断运算符?.、Null判断运算符??、逻辑赋值运算符||=&&=??=

1.指数运算符**

该运算符连用时使用的时采用的是右结合而非常用的左结合。

image.png

该运算符也衍生出了一个新的赋值运算符:**=

image.png

a**=3==a=a*a*a

2.链判断运算符?.

当要判断某个对象的内部属性时,往往还要判断其上级对象,此时为了判断的完整和安全,需采用&&||来联合判断,写法为:(a && a.b && a.b.c) || d,改写法当层级较多时就变得臃肿,并且很多部分变得重复。所以ES6引出了?.来解决这类问题。以上写法可以简写成:a ?. b ?. c || d,该方法从前往后,每次都判断是否为null或者undefined,如果是就不再继续往下,返回undefined

注意:该运算符后面不能跟十进制数据,否则会造成判定错误。例如a?.5 就会被当成a ? .5,运算符的.会被当成数值的小数点部分。

3.Null判断运算符??

当读取对象属性时,若此时属性值为null或者undefined,有时候就需要为其设置默认值,以前常用的时||运算符来实现,但是存在一定的问题,就是当属性值为空字符串或者false0的时候也会返回默认值,就不符合要求,所以ES6引进了Null判断运算符??来解决该问题。使用方法为:const a = b ?? c,他的作用类似于||,但是只有当属性值为null或者undefined时才会返回默认值。??本质是逻辑运算,当多个逻辑运算一起使用时,需要用括号()来规定优先级顺序。

4.逻辑赋值运算符||=&&=??=

这三个运算符为:先进行相应的逻辑运算,再视运算结果进心赋值运算。

  • a ||= b == a || (a = b)
  • a &&= b == a && (a = b)
  • a ??= b == a ?? (a = b)