Null 合体演算子とオプションの連鎖

js の一部のコケティッシュな操作は純粋に楽しむためのものです、目を開いてください

---

1. オプションのチェーニング?.

始める前に、オプションのチェーンとは何かを見てみましょう。

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

：：： ヒント

おそらくこのようなコードを見たことがあるでしょうが、ほとんどは知りません。

そうです、彼はこれからお話しするオプションのチェーンです。では、これは何を表しているのでしょうか。それを説明しましょう。

:::

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それは依然として上記と同じです。

：：： 注記

オプションのチェーンを使用したコードは非常に見栄えが良いことがわかりますね。

:::

1.2 オプションのチェーンの使用方法

話は安い、コードを見せて

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
*/

：：： 注記

詳細については、「オプションの連鎖演算子」を参照してください- JavaScript | MDN (mozilla.org)

:::

2. Null合体演算子??

• そうですね、現時点ではあまり役に立たないと思いますし、互換性の問題もまだあるかもしれません。コードを参照して調べてください。

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
*/

結果は と同じであることが分かりますし??、||公式ドキュメントにも||いくつかの問題を解決するために提案されていると書かれていました 詳細は [ドキュメントnull 値合体演算子 - JavaScript | MDN (mozilla.org) ] を参照してください (笑) 。

• 原文は [ CSJerry の個人ブログ]に掲載されました。