空值合并运算符和可选链

发布于 2021-12-27  154 次阅读


1. 可选链?.

在开始之前先来看一波什么是可选链吧

console.log( obj?.a?.b?.c?.d?.e )
obj?.f?.()
obj?.arr[0]

::: tip

你可能见过这样的代码,但是大部分是不知道的。

没错,他就是我们要讲的可选链。那么这个代表着什么呢,且听我为你娓娓道来。

:::

1.1 为什么会出现可选链

let obj = {
    a: null
}
/**
 * 假设obj是后端给我们的返回的数据
 * 正常情况下应该是 
obj = {
    a: {
        b: ...
    }
}
但是不知道什么原因,可能是用户越权访问了,或者是其他,
反正后端就是给了我们脏数据
 * */
// 正常情况下,我们可以这样使用的,
// 但是为了代码的鲁棒性
// console.log(obj.a.b)

// 我们被迫这样
console.log(obj && obj.a && obj.a.b)
// 或者这样
console.log(
    obj? 
        obj.a ? obj.a.b: 'hello'
        : 'world' )

/*
null
hello
*/

这样虽然,解决了问题,但是,毫无以为的是,这样的代码是不够优雅的,因为重复写了很多无用的代码。

这个时候我们的可选链就闪亮登场了。

console.log(obj?.a?.b)

obj依然是上述的样子。

::: note

可以看到使用了可选链的代码真的很好看,有木有。

:::

1.2 怎么使用可选链

talk is cheap, show me the code

let obj = {
    a:{
        b: 99
    },
    arr: [1,2,3,4,5],
    f: function(...args){
        console.log(...args)
    },

}

console.log(obj?.a?.b)
console.log(obj ?. arr ?.[1])
obj?.f?.('hello','world')
/*
99
2
hello world
*/

::: note

更多信息请查看 可选链操作符 - JavaScript | MDN (mozilla.org)

:::

2. 空值合并操作符??

  • 嗯,我感觉目前用处不大,可能还存在兼容性问题,直接上个代码了解一下算了吧
const { log } = console;
const o = {
    aa:1
}
const obj = {} 
log(o.aa ?? 'hello')
log(o.bb ?? 'hello')
log(obj.aa ?? 'hello')
log('----')
log(o.aa || 'hello')
log(o.bb || 'hello')
log(obj.aa || 'hello')
/*
1
hello
hello
----
1
hello
hello
*/

可以看到,??||的结果一样,官方文档也说了是为了解决||的某些不足才提出来的,具体看【文档空值合并运算符 - JavaScript | MDN (mozilla.org)】吧哈哈。


见其广知其深