什么是可選鏈？
可選鏈 (Optional Chaining) 是一種新的 JavaScript 語言特性目派，它允許你對可能為 undefined 或 null 的屬性進行訪問而不會觸發(fā) TypeError鹦筹。這個特性可以優(yōu)雅地處理由于數(shù)據(jù)缺失或錯誤導(dǎo)致的錯誤，從而寫出更健壯的代碼址貌。
在可選鏈操作符 (?.) 前加上一個對象的屬性名铐拐，如果該屬性存在，則會返回該屬性值练对。如果該屬性不存在遍蟋，將返回 undefined。
例如螟凭，假設(shè)有一個對象 user 和它的一個子屬性 address虚青，你需要獲取該屬性的子屬性 street，你可以使用可選鏈來處理：
let street = user?.address?.street;
如果 user 或 address 不存在螺男，則 street 變量將設(shè)置為 undefined棒厘，而不是拋出 TypeError。這可以避免許多冗長的空檢查或條件語句下隧，使代碼更加簡潔易讀奢人。
可選鏈操作符還可以用于函數(shù)調(diào)用：
user?.logIn?.();
如果 user 或 logIn 方法不存在，則該調(diào)用會被短路淆院，不會執(zhí)行任何操作何乎。
可選鏈是 ECMAScript 2020（ES2020）引入的新特性，因此它可能還不被所有的瀏覽器和運行環(huán)境支持土辩。但是支救，你可以使用 Babel、TypeScript 或者 polyfill 來在舊的瀏覽器和 Node.js 版本中使用它拷淘。
配置修改
- 新增或修改babel.config.js各墨，主要是增加插件：@babel/plugin-proposal-optional-chaining
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: ["> 1%", "last 2 versions", "not ie <= 11"]
}
}
]
],
plugins: [
[
"@babel/plugin-proposal-optional-chaining"
]
};
- 初始化插件的npm包，使用npm或yarn下載
npm install --save-dev @babel/plugin-proposal-optional-chaining
yarn add @babel/plugin-proposal-optional-chaining --dev
