携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情 >>

可选链"?."

首先，可选链是一种访问嵌套对象属性的安全方式，即使中间的属性不存在也不会出现错误。

那么什么是属性不存在呢？

举个例子吧：例如此时我们代码里面有一个user对象，里面存储了我们用户的地址，以及街道地址。

let user = {
    address:{
        city:'重庆';
        street:'渝北';
    }
}

这个时候，我们去获取user.address不会报错，获取user.address.street也不会报错。

但是如果，对象里面没有address这个属性的时候，那么当我们调用user.address.street的时候，就会报错。

let user = {};
alert(user.address.street);//报错

在很多的实际开发当中，我们并不希望得到的一个报错，我们更希望是一个undefined（表示没有该属性）。这个时候我们就需要用到可选链这个小家伙。

可选链

?.:当可选链前面的值为undefined或者null时，它就会停止运算，并且返回undefined。

举个例子：

let user = {};
alert(user.address.street);//报错（1）
alert(user.address?.street);//undefined（2）

在这段代码中，（1）输出一个报错，但是（2）输出一个undefined。这是因为在执行（2）的时候，遇到？.的时候，判断address是否存在，很明显user是一个空对象，所以属性address并不存在，最后输出undefined。

注意：

?.：只会对它前面的值成为可选值，也就是只会判断前面的值是否存在；它不会对后面的值产生影响。
不要过渡的使用可选链，因为使用可选链会将可能出错的地方给掩盖掉（只输出一个undefined）,这将会导致后面我们调试更加困难。
可选链前面的变量必须要先声明，不然将会报错。

短路效应

前面我们说过，可选链只会对其前面的值起作用，对后面的值没有影响。

如果可选链前面的值为undefined或者null的时候，会直接跳过后面的值，直接输出undefined，这就是短路效应。

扩展

可选链不是一个运算符，它是一个特殊的语法结构，它还可以有其他的变体：

?.():

let userSayHi = {
    sayHi:function(){
        alert('hi');
    }
};
let userTest = {};

userSayHi.sayHi?.();//hi
userTest.sayHi?.();//undefined

这里首先会检查对象里面有没有sayHi这个属性。在userTest这里没有该属性，所以直接输出undefined.

?.[]:

let userSayHi = {
    sayHi:function(){
        alert('hi');
    }
};
let userTest = {};

userSayHi.sayHi?.['sayHi']();//hi
userTest.sayHi?.['sayHi']();//undefined

这里的原理同上。

最后：

一个小知识点：我们可以使用可选链来安全的读取或者删除，但是却不能写入，也就是可选链不能在赋值语句的左侧。这将会报错。

JavaScript中的可选链

可选链"?."

可选链

短路效应

扩展