可选链接运算符（看过不如用过）

可选链接运算符（看过不如用过）

什么是可选链接运算符 (?.)

在引用内容为空 (nullish ) (null 或者 undefined)， 我们又深度引用对象内部的值时使用？.不会引起错误。并会返回undefined。当引用内容为函数是也会返回undefined。

示例

let user;
//user?.name = undefined
if (user?.name) {
   console.log(user.name)
}

let getUser;
getUser?.() //undefined

什么场景用到了它

// ajax 数据返回深度较深
const list = ((data || {}).data || {}).data || {}

const list = data?.data?.data || {}

瞬间清爽，真的是从老油腻一下变成了年轻帅哥。年轻20岁～

我需要配置什么

• 升级babel版本，项目中如果使用babel6需要升级到babel7
• 项目中使用@babel/plugin-proposal-optional-chaining

 安装
 // npm 
 npm install --save-dev @babel/plugin-proposal-optional-chaining
 //yarn 
 yarn add @babel/plugin-proposal-optional-chaining --dev

// babel.config.js
{
   plugins:[
   ["@babel/plugin-proposal-optional-chaining"]
 ]
}

• 启动项目并体验

babel 转换的结果

// 转换前
user?.name?.name?.name

// 转换后
var _user, _user$name, _user$name$name;
(_user = user) === null || _user === void 0 ? void 0 : (_user$name = _user.name) === null || _user$name === void 0 ? void 0 : (_user$name$name = _user$name.name) === null || _user$name$name === void 0 ? void 0 : _user$name$name.name;

如果很注重代码的性能可以忽略这种写法,在vue3的源码中并没有采用可选链式操作。其中一个原因就是因为转换后的代码更加冗长。