ES syntax sugar – Babel’s optional chain and double question mark syntax

preface

ES, called ECMAScript, is a language standard of JavasSript. A proposal to the TC39 Committee is required for ECMAScript to publish new syntactic specifications. Anyone can submit a proposal to the TC39 Committee. TC39 is made up of various parties, including many browser vendors, and the proposal goes through five stages, with changes approved by the TC39 Committee at each Stage (Portal: TC39), as follows: Stage 0: strawman — submission of the original idea. Stage 1: Proposal — A formal proposal document initiated by at least one TC39 member that includes API examples. Stage 2: Draft — An initial version of the functional specification that contains two experimental implementations of the functional specification. Stage 4: Finished – The proposal is ready for ECMAScript, but it may take longer to get to the browser or Nodejs.

Optional chaining

General scenario

data() {
    return {
      obj: {
        userInfo: {
          name: "hzq".tel: "1234567778".other: { name: "hzq2".title: "Name"}},title: "Ha ha"}}},// Get the name attribute value of the other object inside the object
mounted(){
	console.log(this.obj && this.obj.useInfo && this.obj.userInfo.other && this.obj.userInfo.other.name)
}
Copy the code

Obj. UserInfo and obj. Userinfo.other are not null or undefined before fetching obj. Userinfo.other. With syntactic chains, Vaughan can dispense with this bloat.

Usage scenarios

let body = {
    value: {
        a: '123321'}}let flag = body ? body.value : undefined
/ / equivalent to
letresult = body? .valueconsole.log(result);

/ / the actual
let select = {
    value: {
        a: null}}letentirely = select? .value? .a ||100
If select and select.value and select.value. A are null or undefined, entirely = 100
console.log(entirely)
// If a = 0 then Entirely = 100

let over = select.value.a === null ? 100: select? .value? .aCopy the code

If either body or SELECT is null or undefined, it returns undefined without further execution, avoiding the risk of syntax errors. It can be for arrays as well as objects:

function getLeadingActor(movie) {
  if (movie.actors && movie.actors.length > 0) {
    return movie.actors[0].name
  }
  / / equivalent to
  returnmovie.actors? .0]? .name }Copy the code

Double question marks — Nullish coalescing

Usage scenario: Retain the default value

let res = {
  data: {
    content: null.// or false, or 0,
    content1: false.content2: 0}}// Add default values
consttableList = res? .data? .content || [4.5.6]  / / (4 and 6)
/ / but we found that for | |, return false or 0, will choose the latter
consttableList = res? .data? .content1 || [4.5.6]  / / (4 and 6)
consttableList = res? .data? .content2 || [4.5.6]  / / (4 and 6)
Copy the code

When the interface returns data, the content is likely to be null, undefined, or not return content at all, so we need to add default values.

consttableList = res? .data? .content ?? [4.5.6]  / / (4 and 6)
consttableList = res? .data? .content1 ?? [4.5.6]  //false
consttableList = res? .data? .content2 ?? [4.5.6]  / / 0
Copy the code

Projects using

At present, the construction after VUe3.0 can directly use optional chain and double question mark. The babel-plugin-proposal-optional-chaining plugin helps us to translate the optional chain into code

  1. Check if the babel-core version of the package.json project is 7.x

To make it easier for you to upgrade to Babel 7, there is a tool availablebabel-upgradeFor existing projects, upgrade to version 7 or higher with a single command. Run the command:npm babel-upgrade --write --installNote: For example, the following commands appear during installation:Execute the following code:npm install --save @babel/runtime-corejs2If no problem, continue:

  1. Install dependencies:

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

Then. Babelrc or babel.config.js injects this plugin:Note: if the editor is vscode, it needs to be configured in vscode setting:javascript.validate.enable": falseThat’s all configured! ~ If you want to use double question marks then inject this code:Welcome to my blog:Juejin. Cn/user / 246754…

Github address: github.com/NurTuam

Lots of support! I will continue to update ❤️