blog 你可能不知道的 6 个 babel 语法

由于要整理基于 babel@7 的 babel preset "babel-preset-umi"，故而对 babel 插件进行了一遍完整的梳理。期间发现一些之前不熟悉或是新引入的语法，个人觉得挺有用，介绍如下。虽然基本都处于 stage 1 和 stage 0 阶段，但不影响使用。

有啥特性

pipeline

语法是 |>，类似其他语言，比如 Elm、LiveScript、OCaml 等，还有 UNIX 管道。

// Before
let result = exclaim(capitalize(doubleSay("hello")));

// After
let result = "hello"
  |> doubleSay
  |> capitalize
  |> exclaim;

还可以和 await 混用，以及传递额外参数，详见提案的例子。

nullish coalescing

语法是 ??。和 || 操作符类似，但只判断左边的值是否为 null 和 undefined，不判断 ""、0、NaN、false 等，详见提案。

适用于配默认值。

var foo = object.foo ?? "default";

optional chaining

记得以前好像叫 guard operator，我更喜欢这个名字。用于防御性地检测对象、函数等，详见提案。

比如：获取对象属性。

// before
var street = user && user.address && user.address.street;

// after
var street = user?.address?.street;

获取函数执行结果的子属性。

// before
var fooInput = myForm.querySelector('input[name=foo]');
var fooValue = fooInput ? fooInput.value : undefined;

// after
var fooValue = myForm.querySelector('input[name=foo]')?.value;

判断函数存在再执行。

a?.()

optional catch binding

catch 没有用到 error 对象时可以不用写。

// before
try {
} catch(e) {}

// after
try {
} catch {}

function bind

Function bind 的新语法，可以 bind，也可以直接 call。

obj::func
// is equivalent to
func.bind(obj)

::obj.func
// is equivalent to
obj.func.bind(obj)

obj::func(val)
// is equivalent to
func.call(obj, val)

::obj.func(val)
// is equivalent to
obj.func.call(obj, val)

有个挺好的用法是可以直接用于类数组，比如：

var urls = document.querySelectorAll('a')
  ::map(node => node.href)

do expression

简单的判断场景可以用三元操作符，复杂场景用 do expression 会比较合适。

let x = 100;
let y = 20;

let a = do {
  if(x > 10) {
    if(y > 20) {
      'big x, big y';
    } else {
      'big x, small y';
    }
  } else {
    if(y > 10) {
      'small x, big y';
    } else {
      'small x, small y';
    }
  }
};

另一个场景是可以用于 JSX：

var Component = props =>
  <div className='myComponent'>
    {do {
      if(color === 'blue') { <BlueComponent/>; }
      else if(color === 'red') { <RedComponent/>; }
      else if(color === 'green') { <GreenComponent/>; }
    }}
  </div>
;

怎么使用

可以直接用 babel@7-beta，也可以用 umi 或者 roadhog@2。

（完）

Nov 12 '17 09:11 sorrycc

👍 发自网易邮箱大师

Nov 12 '17 09:11 yangbin1994

大爱 optional chaining，所以之前迫不及待升上了 beta 7

Nov 13 '17 00:11 lijialiang

?. 方式在使用kotlin的时候深感好用，想不到就加入stage了，赞

Nov 13 '17 01:11 ws456999

var urls = document.querySelectorAll('a') ::map(node => node.href)

这里笔误了吗？求指导

var urls = document.querySelectorAll('a')
  ::Array.prototype.map(node => node.href)

Nov 24 '17 07:11 yangbin1994

@sorrycc，将babel版本升级到最新的7.0.0-beta.32，nullish coalescing一直报错，求解

Nov 27 '17 15:11 codezyc

你好，请教下，给ant pro结合应该怎么用呢？只升级roadhog会报错 Module build failed: Error: [BABEL] /xxx/xxx/demo/src/index.js: Plugin/Preset files are not allowed to export objects, only functions. at Array.map (native) 需要手动升级babel，更改相关配置吗？最新pro new 生成的项目package里面babel-polyfill是6.26.0的。