如何在你的项目中使用新的ES规范

JavaScript 和 ECMAScript 的关系

JavaScript 是一种高级的、编译型的编程语言。而 ECMAScript 是一种规范。

JavaScript 是基于 ECMAScript 规范的脚本语言。ECMAScript（以下简称 ES）在 2015 年发布了 ES6（ECMAScript 2015），而且 TC39 委员会决定每年发布一个 ECMAScript 的版本，也就是我们看到的 ES6/7/8/9/11/12。

ES11 中两个非常有用的特性

空值合并操作符（??）

Nullish coalescing Operator(空值处理)只有 null 和 undefined 的时候才认为真的是空。
以下为使用方式：

let user = {

    u1: 0,

    u2: false,

    u3: null,

    u4: undefined

    u5: '',

}

let u1 = user.u1 || '用户1'  // 用户1

let u2 = user.u2 || '用户2'  // 用户2

let u3 = user.u3 || '用户3'  // 用户3

let u4 = user.u4 || '用户4'  // 用户4

let u5 = user.u5 || '用户5'  // 用户5

// es11语法【只有 null  和 undefined 的时候才认为真的是空】

let u1 = user.u1 ?? '用户1'  // 0

let u2 = user.u2 ?? '用户2'  // false

let u3 = user.u3 ?? '用户3'  // 用户3

let u4 = user.u4 ?? '用户4'  // 用户4

let u5 = user.u5 ?? '用户5'  // ''

应用的场景：后端返回的数据中 null 和 0 表示的意义可能是不一样的，null 表示为空，展示成 /。0 还是有数值，展示为 0。

let a = 0;

console.log(a ?? '/'); // 0

a = null;

console.log(a ?? '/'); // '/'

Optional chaining（可选链）

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

这个有点类似于 lodash 工具库中的 get 方法

let user = {

    age: 18

}

let u1 = user.childer.name // TypeError: Cannot read property 'name' of undefined

// es11 语法

let u1 = user.childer?.name // undefined

浏览器兼容性问题

虽然 ES 新的特性十分好用，但需要注意的是它们的兼容性问题。
比如，可选链目前的兼容性如下:

解决方法就是讲 ES 新特性的语法转换成 ES5 的语法。

使用 Babel 进行转换

Babel 是一个 JavaScript 编译器。它的输入是下一代 JavaScript 语法书写的代码，输出浏览器兼容的 JavaScript 代码。

我们可以通过 Babel 中的转换插件来进行语法转换。比如我们上面两个语法可以通过以下两个插件进行转换。

空值合并操作符。@babel/plugin-proposal-nullish-coalescing-operator

使用：

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator

在配置文件中：

{

  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]

}

就可以做到以下的转换，输入：

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

输出：

var _object$foo;


var foo =

  (_object$foo = object.foo) !== null && _object$foo !== void 0

    ? _object$foo

    : "default";

同理，可选链操作符可以看 @babel/plugin-proposal-optional-chaining，还有其他的都可以在 @babel/preset-env 目录中找到。

测试

在 Firefox 中，下载比较老的版本。

const foo = null ?? 'default string';

console.log(foo);

// expected output: "default string"


const baz = 0 ?? 42;

console.log(baz);

运行上面的代码，报错：

项目中使用，成功。说明 polyfil 成功了。

总结

JavaScript 是基于 ECMAScript 规范的脚本语言。ECMAScript 规范的发展给前端开发带来了很多的便利，但我们在使用的时候应该使用 Babel 这种 JavaScript 编译器将其转换成浏览器兼容的代码。