JS 新語法「可選鏈」「雙問號」已進入 Stage 3

你可能寫過這樣的代碼

var street = user.address && user.address.street;

有了這個新語法，你可以寫成

var street = user.address?.street

你可能還寫過這樣的代碼

var fooInput = myForm.querySelector('input[name=foo]')
var fooValue = fooInput ? fooInput.value : undefined

有了新語法后，你可以寫成

var fooValue = myForm.querySelector('input[name=foo]')?.value

但在實際使用中，還是會有些不便，比如

const result = response?.settings?.n || 100

你希望如果 response 或者 response.settings 或者 response.settings.n 不存在（值為 null 或者 undefined）時，result 保底值為 100。

但是上面代碼在 n 為 0 的時候，也會讓 result 變成 100，你實際上希望此時 result 為 0。

於是你只好把代碼寫成這樣

const result = response?.settings?.n === undefined ? 100 : response?.settings?.n

或者你封裝一下

const result = fetch(response?.settings?.n, 100)

現在，你可以用另一個新語法——「雙問號語法」——來簡化代碼：

const result = response?.settings?.n ?? 100

這個 ?? 的意思是，如果 ?? 左邊的值是 null 或者 undefined，那么就返回右邊的值。

有了這兩個語法，估計以后 JS 代碼中就會全是問號了！哈哈。

原文來自:https://zhuanlan.zhihu.com/p/75269809