js問號點操作符【?. ??】(可選鏈 雙問號)

配置使用可選鏈?. 和 雙問號?? 語法

一、什么是可選鏈

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

當訪問多層對象屬性(比如 res.data.list)時，如果屬性res.data為空，則會報引用錯誤
為此我們不得不這么處理：

let dataList = res && res.data && res.data.list

看着非常不美觀，今天介紹的新語法就是為了解決這種問題的 (可選鏈操作符?.)

有了可選鏈，就可以對一個為null或者undefined屬性安全引用：

let dataList = res?.data?.list

二、什么是雙問號

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

value1 ?? value2

??在value1和value2之間，只有當value1為null或者 undefined時取value2，否則取value1（0,false,""被認為是有意義的，所以還是取value1）

const obj = {}
const c_or_d = obj.c ?? 'd'
console.log(c_or_d) // 'd'

console.log(0 ?? 1) // 0

console.log("" ?? "foo") // ""

 

如何使用

首先檢查你的項目依賴中的babel版本，如果你的babel版本<7，那么很遺憾，你得先解決babel版本升級的問題。
如果是babel7以上的版本，可以添加以下2個devDependencies依賴：

@babel/plugin-proposal-optional-chaining // 可選鏈
@babel/plugin-proposal-nullish-coalescing-operator // 雙問號

后在.babelrc或者babel.config.js中這加入2個插件(plugins屬性放在JSON頂層)：

{
 "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

之后就可以愉快地使用了！