ES6——运算符扩展

100 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第14天,点击查看活动详情

ES6中添加了一些运算符,使我们的开发更加方便,下面来看下这些运算的使用。

指数运算符(**)

ES6中新增的运算符**,也就是指数运算符,下面来看它的简单用法:

2 ** 3 // 8

上述中2 ** 3也就是代表2的3次方,也就是8,当然指数运算符可以多个一起连用,当其一起连用时,是从右边开始计算的,也就是说指数运算符是右结合,而不是左结合,指数运算符也可以和等号一起使用,如下例子所示:

2 ** 3 ** 2 // 512

let b = 3;
b **= 2; // 9

上述例子中,2 ** 3 ** 2运算相当于2 ** (3 ** 2),也就是从右边开始计算,先执行3 ** 2得到9,然后再执行2 ** 9,也就是512。第二个例子中,指数运算符与等号连用,相当于b = b ** 2,也是b = b * b,也就是3的平方9。

链判断运算符(?.)

开发中,我们在读取对象中的某个属性时,为了避免报错,首先会先判断一下对象是否存在,然后再取其属性,例如,obj&&obj.a这种写法,但如果要读取的属性嵌套太深,那么就会一直判断前一层对象是否存在,例如,obj&&obj.a&&obj.a.b&&obj.a.b.name,这种写法就比较冗余,现在ES6中新增了?.链判断运算符,用来简化这种写法,其主要有3种写法,如下:

  • obj?.props
  • obj?.[props]
  • fun?.(...args)

其使用方法如下:

obj?.a?.b?.name
obj.back?.() //判断obj上back方法是否存在

这种写法在执行的时候,会先判断?.运算符左侧的对象是否是null或undefined,如果是后续就不再执行,反之就继续往下执行。

Null判断运算符(??)

开发时经常会遇到一种场景,当获取一个对象中的某个属性时,如果这个属性是null或者undefined,那么就需要为其指定一个默认值,以前我们一般使用||来进行实现,例如,const b = a.b || 2,但这样如果||左侧的值是false也会返回2,而??运算符只有当其左侧的值是null或者undefined时,才会返回其右侧的值,如下代码:

const data = {}
data.value ?? 1 // 1