js的可选链操作符的介绍与使用

上面是接手别人项目的时候中的一段代码，我看到红色框内的代码第一眼还以为是三目运算符，后来越看越不对劲，这咋还多了点东西又少了点东西呢？后来我去网上了解的才知道这里面让我奇怪的东西叫做可选链操作符。

请看下面一段代码

let obj = {}
let name1 = obj.name.name;
console.log(name1)//输出结果是什么？

结果如下：

在undefined上找不到name，大家应该经常会遇到在一个undefined上找不到某个属性之类的错误，而可选链操作符可以帮助我们解决这个错误，再看一下下面的写法

 

let obj = {}
let name1 = obj?.name?.name;
console.log(name1)//这次又会输出什么？

输出结果：

 为什么呢？

我来一步一步解释这段代码name1=obj?.name?.name;

一、name1=obj?表示obj是不是undefined或者null，不是的话代码就会往后面执行，是的话就不执行了

二、现在代码执行到了.name，而这里的.name就是obj.name，如果你的对象不叫obj而是xxx那么就是xxx.name，好了到了.name?就表示obj.name是不是undefined或者null，如果不是就继续往下执行到第二个.name，如果是代码就不往下执行了。在这里obj没有name属性所以就不往下执行了，因为obj.name是undefined，所以name1也就是undefined。

那如果我们想执行对象中的函数呢改怎么做呢？

let obj = {
    fn(){
        console.log('我是obj中的函数')
    }
}
obj?.fn?.()

还是跟前面一样，先判断有没有obj，然后判断有没有fn，有的话通过.()的形式调用fn函数。

这个写法真的很方便，以前我们写函数的执行可能是这样写的 obj.fn&&obj.fn()通过&&运算符先判断有没有obj.fn有的话再执行obj.fn函数。现在这种可选链操作符可以简化我们的写法，大家可以多熟悉一下这种写法。

最后说一下第一张图的红色方框的代码，现在大家就应该知道了是什么意思了。

先判断state.current存不存在，若存在则判断state.current.id存不存在，若存在则返回true否则返回false。这是三目运算符和可选链操作符的结合使用。