ES的语法糖-babel的可选链和双问号语法

前言

ES全称为ECMAScript，是JavasSript的一种语言标准。ECMAScript发布新语法规范需向TC39委员会提案，任何人都可以向其会提案。TC39由包括许多浏览器厂商在内的各方组成，提案需要经历五个阶段，每个阶段的变动都需要由TC39委员会批准(传送门：TC39)，如下： Stage 0: strawman——最初想法的提交。 Stage 1: proposal（提案）——由TC39至少一名成员倡导的正式提案文件，该文件包括API事例。 Stage 2: draft（草案）——功能规范的初始版本，该版本包含功能规范的两个实验实现。 Stage 3: candidate（候选）——提案规范通过审查并从厂商那里收集反馈 * Stage 4: finished（完成）——提案准备加入ECMAScript，但是到浏览器或者Nodejs中可能需要更长的时间。

可选链 —— Optional chaining

一般场景

data() {
    return {
      obj: {
        userInfo: {
          name: "hzq",
          tel: "1234567778",
          other: { name: "hzq2", title: "名字" }
        },
        title: "哈哈"
      },
   }
 }
//获取对象内部的other对象的name属性值值
mounted(){
	console.log(this.obj && this.obj.useInfo && this.obj.userInfo.other && this.obj.userInfo.other.name)
}

在取到obj.userInfo.other.name之前，要确保obj.userInfo和obj.userInfo.other不是null或者undefined，否则会报错：Cannot read property 'name' of undefined 有了语法链，沃恩就可以摒弃这种臃肿的写法了。

使用场景

let body = {
    value: {
        a: '123321'
    }
}
let flag = body ? body.value : undefined
// 相当于
let result = body?.value
console.log(result);

//  实际
let select = {
    value: {
        a: null
    }
}
let entirely = select?.value?.a || 100
// 这句话的意思是如果 select和select.value和select.value.a 都为null或undefined时 entirely等于100
console.log(entirely)
// 如果 a = 0的话 entirely也要等于100 只能像下面这样写了

let over = select.value.a === null ? 100 : select?.value?.a

如果body或select其一是null或undefined的话,它就直接返回undefined,不往后执行了，避免了语法报错的风险。它不仅可以针对对象，还可以针对数组：

function getLeadingActor(movie) {
  if (movie.actors && movie.actors.length > 0) {
    return movie.actors[0].name
  }
  //相当于
  return movie.actors?.[0]?.name
}

双问号 —— nullish coalescing

使用场景: 取默认值

let res = {
  data: {
    content: null, // or false, or 0,
    content1: false,
    content2: 0
  }
}
// 加上默认值
const tableList = res?.data?.content || [4,5,6]  //[4,5,6]
// 但我们发现，对于||，返回false或者0，也会取后者
const tableList = res?.data?.content1 || [4,5,6]  //[4,5,6]
const tableList = res?.data?.content2 || [4,5,6]  //[4,5,6]

当遇到接口返回的数据中，content很可能为null 或者 undefined，或压根没返回content，因此我们判断时需要加上默认值。

const tableList = res?.data?.content ?? [4,5,6]  //[4,5,6]
const tableList = res?.data?.content1 ?? [4,5,6]  //false
const tableList = res?.data?.content2 ?? [4,5,6]  //0

项目使用

目前vue3.0后的搭建可以直接使用可选链和双问号。旧项目的话需要借助插件解析可选链和双问号写法： babel-plugin-proposal-optional-chaining 插件可以帮助我们将可选链式的代码转化

1. 检查项目package.json的babel-core版本是否是7.x

为了让你更方便的升级到babel 7，官方提供了一个工具babel-upgrade，对于已有的项目，只需要运行一行命令就可以升级到7版本以上了。 运行命令：npm babel-upgrade --write --install 注： 如·安装过程中出现以下命令： 请执行以下代码： npm install --save @babel/runtime-corejs2 如没问题，那继续：

2. 安装依赖：

npm install --save-dev @babel/plugin-proposal-optional-chaining -S

然后.babelrc或者babel.config.js中这注入这个插件： 注：编辑器是vscode的话，需要在vscode的setting中配置： javascript.validate.enable": false 这就配置好啦！~ 想使用双问号的同学那就注入这段代码： 欢迎关注我的博客： juejin.cn/user/246754…

github地址： github.com/NurTuam

多多支持！本人会持续更新哒 ❤️