js 一分钟掌握可选链用法

前言

随着工作中遇到的场景越来越多，我们会发现大多时候数据结构无非就是对象以及数组，很多时候我们判断层层嵌套的属性时必须要确保上一级属性存在，可是这样往往代码看起来比较冗长，因此可选链这个小知识我们需要掌握。

使用场景

    const data1 = {
        detail: {
            name: 'name'
        }
    }

    const data2 = {}

    const name1 = data1.detail.name // 'name'

    const name2 = data2.detail.name // Uncaught TypeError: Cannot read properties of undefined (reading 'name')

name1一切都是正常的。

name2我们获取name，期望的值是undefined，但是它直接报错了，原因是因为data2上并不存在detail属性，因此detail应该是undefined，我们不能在undefined类型上去获取name属性。

那我们可以怎么做呢？在可选链出来之前我们是这么做的：

    const name2 = data2.detail && data2.detail.name // undefined

我们要先判断data2上的detail值，确保它存在才会去获取name属性。

如果data2.detail已经为undefined了，则&&运算符不会继续判断data2.detail.name。

但是这样看起来并不优雅，于是可选链就顺应需要出现了：

    const name2 = data2.detail?.name // undefined

?.会判断前面的对象是否存在，若它为underfined或者null，则直接返回underfined。

这样我们就不必在获取name时判断detail的存在了。

方法同样可以使用可选链

    const test1 = {
        getName: () => {
            return 'name1'
        }
    }

    const test2 = {}

    const name1 = test1.getName() // 'name1'

    const name2 = test2.getName() // Uncaught TypeError: test2.getName is not a function

    const name3 = test2.getName?.() // underfined

可选链默认值

我们前面知道了，可选链会在前面的对象不存在时返回undefined，实际上我们可以使用??运算符改变它的默认值，让它在undefined或者null时，得到一个备用的值。

    const data = {}

    console.log(data.detail?.name ?? '默认name') // '默认name'

值得注意的是，??不止是判断了可选链前面的对象detail，即便detail和name都存在，只要name的值也为undefined或者null，表达式也会使用默认值。

换一种说法，也就是??判断了前方表达式最终的值，只要是undefined或者null，表达式就会使用默认值。

    const data = {
        detail: {
            name: null
        }
    }

    console.log(data.detail?.name ?? '默认name') // '默认name'

尾言

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~