这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战
问题
面试官：es6新出了的几种运算符，你能讲讲吗？
面试者：额。。。
面试官：比如可选链操作符？
面试者：额。。。
面试官：好的，今天面试就到这里了。
面试者： 额。。。
以上场景纯属虚构，可能会有雷同，哈哈哈😂。
今天来学学es6新增的几种运算符，巩固一下。
运算符
可选链运算符
一个对象的属性，如果这个属性是对象，它还有子属性，访问这个子属性，比如
var obj = {a: {key: 'val'}}
console.log(obj.a.key) // val
如果属性不存在的时候，则有可能会报错。
var obj = {key: 'val'}
console.log(obj.a.key) // error: Cannot read properties of undefined (reading 'key')
如果要兼容这个情况，需要加上默认值兼容
var obj = {key: 'val'}
console.log((obj.a || {}).key) // undefined
如果层级过深，就不好阅读。
(((obj.a || {}).b || {}).c || {}).d
// 或者
obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d
可选链运算符就是用来改善这种写法。 它使用?.表示。
上面的例子可以用可选链运算符来改写
obj.a?.key
obj.a?.b?.c?.d
效果是一样的，是不是可读性增加，也节省了代码？
如果发现没有该属性的时候，则不会进行后面的点运算。
它也可以写在函数执行的时候。兼容该函数可能不是函数的情况。这种情况需要该函数名先定义好或者有值，不然还是会报错。
var fn
fn?.() // 不会报错
fn1?.() // 报错
可选链不能用在super关键字上，模版字符串，实例化构造函数, 赋值运算符的左侧等。
super?.fn() // error
new Fn?.a() // error
obj.a?.`${b}` // error
obj?.a = obj
指数运算符
以前我们算幂次方是这样算的
Math.pow(2,3) // 8
现在可以通过指数运算符来计算, 用**表示
2 ** 3 // 8
也可以连写
2** 3 ** 3 // 134217728
可能你会疑惑，为什么这么大，因为它是从右边计算的。 等同于2**(3 ** 3)。
空值合并运算符（也称Null判断运算符）
这个运算符是用??表示。只有当左侧的值是undefined或者null才会执行默认值。
结合例子来看看：
var a = '' ?? 'default'
console.log(a) // ''
var a = 0 ?? 'default'
console.log(a) // 0
var a = 123 ?? 'default'
console.log(a) // 123
var a = undefined ?? 'default'
console.log(a) // default
var a = undefined ?? 'default'
console.log(a) // default
如果和&&或者||混用的时候，需要加上()显示表明优先级，不然会报错。
var a = undefined ?? 'default' && 'a' // error
逻辑赋值运算符
有三种逻辑赋值运算符：
- 逻辑并赋值运算符(&&=)
- 逻辑或赋值运算符(||=)
- 空值合并赋值运算符(??=)
主要是对本身进行逻辑操作后，然后对它赋值后面的值。
通过例子来看一下：
var a,b,c
a &&= 1 // undefined
//等同于
a && (a = 1)
b ||= 1 // 1
//等同于
b || (b = 1)
c ??= 1 // 1
//等同于
c ?? (c = 1)
