空值合并运算符和可选链

旧城等待， 2023-10-02 11:25 18阅读 0赞

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)][- 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)][- JavaScript _ MDN _mozilla.org 1]】吧哈哈。

*  原文发表于【[CSJerry的个人博客][CSJerry]】

[- JavaScript _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
[- JavaScript _ MDN _mozilla.org 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
[CSJerry]: https://dcs.pet/pages/0ea7b7/