如何在你的项目中使用新的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 编译器将其转换成浏览器兼容的代码。


作者:Gopal
链接:https://juejin.cn/post/7018174628090609701

0 个评论

要回复文章请先登录注册