1.es2020语法之可选链操作符?.

//A.js
let name = obj.scope.name
let age = arr[0].age

以上代码,当对象obj不存在scope,数组没有[0]索引时,浏览器会报错Cannot read property 'XXX' of undefined。基于以上情况,我们可以在项目里看到大量类似如下代码

//B.js
let name = obj.scope && obj.scope.name
let age = arr[0] && arr[0].age

虽然这里解决了我们容错的问题，但我们也经常碰到如下取值规则

let name = arr[0].obj.scope.userInfo.name

此时我们再想用刚才提到的容错机制去处理就要书写类似以下代码

let name = arr[0] && arr[0].obj && arr[0].obj.scope && arr[0].obj.scope.userInfo && arr[0].obj.scope.userInfo.name

此处代码易读性比较差，当项目中类似的代码较多时维护难度也自然增加。 至此引出es2020链式操作符?.

当我们需要解决上述A.js的问题时候可以直接通过以下代码进行处理

//A.js
let name = obj?.scope?.name
let age = arr[0]?.age

解决B.js的问题可以通过以下代码解决问题

//B.js
let name = arr[0]?.obj?.scope?.userInfo?.name

当数组或者对象中某一属性不存在或值为null或undefined时,会直接返回undefined

2.es2020语法之空值合并操作符??

空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

let obj = {
  name: "xx",
  details: { age: 18 }
};
let name = customer?.sex ?? "juejin";
console.log(name); // “juejin”

3.以上俩处语法集成在项目中时运行报错

此处以vue项目为例,基于?.语法需要安装 @babel/plugin-proposal-optional-chaining插件。基于语法??需要安装 @babel/plugin-proposal-nullish-coalescing-operator插件进行编译,并且在项目babel.config.js中进行如下配置即可

第一篇文章,水一下,练习下markdown书写规范