可選鏈操作符是一個新的js api费韭，它允許讀取一個被連接對象的深層次的屬性的值而無需明確校驗鏈條上每一個引用的有效性蓬衡。目前處于Stage 3提案階段矾睦，暫時不可以直接使用，可以通過babel編譯器使用箱歧。
可選鏈操作符(?.)
語法
obj?.prop
obj?.[expr]
func?.(args)
使用介紹
比如，我們有一個對象obj一膨，現(xiàn)在要訪問它的深層屬性baz呀邢。
const obj = {
foo: {
bar: {
baz: 42,
fun: ()=>{}
},
},
};
// 不使用?.
let baz = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz;
// 使用?.
let baz = obj?.foo?.bar?.baz; // 結(jié)果：42
函數(shù)調(diào)用和表達式
// 函數(shù)調(diào)用
obj.fn?.()
// 表達式
obj?.['prop' + 'Name]
使用
我們可以通過babel編譯器來使用可以鏈操作符。
babel
yarn add @babel/plugin-proposal-optional-chaining --dev
添加.babelrc文件
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
在create-react-app使用
默認(rèn)情況下create-react-app豹绪，不允許修改babel配置价淌，這里我們需要安裝兩個附加模塊以允許補充默認(rèn)配置。
yarn add customize-cra react-app-rewired --dev
添加config-overrides.js文件
const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());
修改package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
}
eslint
安裝babel編譯器后瞒津，就可以使用?.操作符了蝉衣。但是如果你使用eslint的話，你就需要安裝babel-eslint來識別這種新語法巷蚪。
yarn add babel-eslint --dev
添加.eslintrc文件
{
"parser": "babel-eslint",
"rules": {
"strict": 0
}
}
在vscode中使用
vscode的js驗證器目前并不能識別?.操作符病毡，所以會有錯誤警告：
QQ截圖20191122173835.png
解決錯誤警告：
安裝vscode擴展ESLint，在擴展商店搜素并安裝ESLint屁柏。
修改vscode配置（.vscode/settings.json）：
{
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"javascript.validate.enable": false, // 主要是這個啦膜，關(guān)閉vscode的js驗證器
"[javascript]": {
"editor.formatOnSave": false,
},
"[javascriptreact]": {
"editor.formatOnSave": false,
},
}
最后
愉快的使用?.操作符。
