IT干货|你可能不知道的 6 个 babel 语法

2018-02-01

Loki Yan

有啥特性

pipeline

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

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

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

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

nullish coalescing

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

适用于配默认值。

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>
;
近期开课hot
logo

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-stripe.png/image/layout/pay-alipay.png

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 8, 11 York st, Wynyard, Sydney CBD
Business Hub, 155 Waymouth St, Adelaide SA 5000

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2024 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572