空值合并運算符和可選鍊1. 可選鍊?.2. 空值合并操作符??

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

這樣雖然，解決了問題，但是，毫無以為的是，這樣的代碼是不夠優雅的，因為重複寫了很多無用的代碼。

這個時候我們的可選鍊就閃亮登場了。

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的個人部落格】