【实战】如何在你的项目中使用新的ES规范
【实战】如何在你的项目中使用新的ES规范
很多文章都在教我们 ES6/7/8/9/11/12 相关的规范，但如何在我们的项目中使用这些 ES 规范？有什么需要注意的点？
本文结合 ES11 中非常有用的两个特性，空值合并操作符（??）和可选链操作符( ?. )来看看怎么在项目中使用相关语法。
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 和 ?developer/article/2064068/undefined 的时候才认为真的是空。以下为使用方式：
let user = {
u1: 0,
u2: false,
u3: null,
u4: ?developer/article/2064068/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 和 ?developer/article/2064068/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 或者 ?developer/article/2064068/undefined) 的情况下不会引起错误，该表达式短路返回值是 ?developer/article/2064068/undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 ?developer/article/2064068/undefined。
这个有点类似于 lodash 工具库中的 get 方法
let user = {
age: 18
}
let u1 = user.childer.name // TypeError: Cannot read property 'name' of ?developer/article/2064068/undefined
// es11 语法
let u1 = user.childer?.name // ?developer/article/2064068/undefined
浏览器兼容性问题
虽然 ES 新的特性十分好用，但需要注意的是它们的兼容性问题。比如，可选链目前的兼容性[1]如下:
解决方法就是讲 ES 新特性的语法转换成 ES5 的语法。
使用 Babel 进行转换
Babel 是一个 JavaScript 编译器。它的输入是下一代 JavaScript 语法书写的代码，输出浏览器兼容的 JavaScript 代码。
我们可以通过 Babel 中的转换插件来进行语法转换。比如我们上面两个语法可以通过以下两个插件进行转换。
空值合并操作符。@babel/plugin-proposal-nullish-coalescing-operator[2]
使用：
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[3]，还有其他的都可以在 @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 编译器将其转换成浏览器兼容的代码。
参考资料
[1]兼容性: https://caniuse.com/?search=optional%20chaining
[2]@babel/plugin-proposal-nullish-coalescing-operator: https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator
[3]@babel/plugin-proposal-optional-chaining: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining