三个在项目中使用冷门又好用的ES新特性

bebel7实现的一些提案中的特性,冷门但是非常好用。

简介

pipeline

语法是 |>,它的左边是一个表达式,右边是一个函数。管道运算符把左边表达式的值,传入右边的函数进行求值。

x |> f
// 等同于
f(x)

nullish coalescing

函数版的 ||,适用于配默认值

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

optional chaining(optional chaining)

Optional Chaining 是 JavaScript 的一个新特性,它允许我们在尝试访问对象的属性之前检查对象是否存在。其他语言也有类似的东西,例如,C# 的 Null Conditional 操作符,与 Optional Chaining 非常类似,可以更安全的检测性的获取对象属性。
严格来说这货不算冷门,他不仅已经通过了ES提案,还在typescript中得到了实现。

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

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

function bind

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)

如何使用

Step1:

首先我们需要添加相应的babel插件对新语法支持。

  • @babel/plugin-proposal-optional-chaining
  • @babel/plugin-proposal-pipeline-operator

Step2:

如果项目中使用了eslint的话,我们可以关闭掉vscode编辑器的js检查以获得更好的编程体验

{
 "javascript.validate.enable": false
}