空值合并运算符和可选链

Posted 2021-10-31 一腔诗意醉了酒

js的一些骚操作，纯粹闹着玩，开开眼界吧

---

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)】吧哈哈。

• 原文发表于【CSJerry的个人博客】