ECMAScript 2020 的新功能
JavaScript
是很受欢迎的前端开发语言之一，而 ECMAScript
在推进 JavaScript 发展上有着不可磨灭的贡献。2015 年 6 月正式发布的 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript 2020 即将到来，让我们先来看看有哪些新功能吧。
ECMAScript 和 JavaScript
JavaScript 作为前端最受欢迎的语言之一，每次更新新特性或者性能优化都会引发前端开发者的关注。那么 ES 和 JS 有什么区别呢？这个问题要回溯到 1996 年 11 月，JavaScript 的创造者 Netscape 公司希望能将这门语言制定成国际标准，于是将 JavaScript 提交至国际标准化组织 ECMA。次年，ECMA 发布了 262 号标准文件的第一版，规定了浏览器脚本语言的标准，并将这门语言称为 ECMAScript，这个版本就是 1.0 版。
可以说，ECMAScript 这一标准从始至终就是针对 JavaScript 语言制定的，那为什么不直接叫做 JavaScript 呢？主要有两点原因：
首先是版权原因，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，而且 JavaScript 也早已被 Netscape 公司注册为商标。
其次，称之为 ECMAScript 也是希望体现这门语言的规范是由 ECMA 制定，而不是 Netscape，这样也能更好地保证这门语言的开放性和中立性。
综上所述，ECMAScript 和 JavaScript 的关系就很好理清了，ES 是 JS 的规范，而 JS 是 ES 的一种实现方法。
ES 2020 的新功能
动态 import ()
静态 import 语法最早于 ES 2015 引入，用于导入由另一个模块导出的变量。该语法称为静态语法，因为开发者无法在运行时动态导入模块，但静态导入可以在编译时进行优化。此外，还有一个类似函数的动态 import()，它不需要依赖 type="module"
的 script 标签。如果合理地使用动态导入，则可以通过按需加载依赖项减少分发包的大小。
新的动态 import 语法看起来像一个函数，但并不是函数，不过动态 import 语法也支持 await。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
空值合并运算符
大家都知道，使用短循环设置默认值的方法有一个小缺陷，由于它实际上不是在检查空值，而是在检查结果的虚假性，因此它会破坏值为 false 或 0 的结果，因为两者均被视为虚假性的结果。ES2020 引入了一个新的运算符 ??
，该运算符的工作原理与短循环类似，但仅当初始值为 null 或 undefined 时才读取为运算符右边的值。
复制代码
constnullValue =null; constemptyText ="";// falsy constsomeNumber =42; constvalA = nullValue ??"default for A"; constvalB = emptyText ??"default for B"; constvalC = someNumber ??0; console.log(valA);// "default for A" console.log(valB);// "" (as the empty string is not null or undefined) console.log(valC);// 42
可选链接
新的 optional chaining 运算符旨在在处理嵌套对象和检查可能的代码时使代码更短 undefineds。可选的链接运算符 ?.
允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。运算符的功能与 .chaining
运算符相似，不同之处在于，如果引用为空（null 或 undefined），则表达式会短路，返回值为 undefined
。当与函数调用一起使用时，如果给定的函数不存在，则返回未定义的值。
复制代码
constuser = { name:"John"};
// Fails with `Uncaught TypeError: Cannot read property 'city' of undefined`
constcity = user.address.city;
// Works but verbose
letcity ="Not Set";
if(user.address !== undefined && user.address !==null) {
city = user.address.city;
}
// Works and concise but requires a 3rd party library
constcity = _.get(user,"address.city","Not Set");
// ?
constcity = user?.address?.city ??"Not Set";
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
BigInt
BigInt 是一个内置的对象，它提供了一种方法来表示大于 2⁵³-1 的整数，这是 JavaScript 可以可靠地用 number 原语表示的最大数，并由 number 表示。MAX_SAFE_INTEGER 常量。BigInt 可用于任意大整数。
这是一个计算素数的例子：
复制代码
// Returns true if passed BigInt is a prime number
functionisPrime(p){
for(leti =2n; i * i <= p; i++) {
if(p % i ===0n)returnfalse;
}
returntrue
}
// Takes a BigInt as an argument, returns nth prime number as BigInt
functionnthPrime(nth){
letmaybePrime =2n
letprime =0n
while(nth >=0n) {
if(isPrime(maybePrime)) {
nth--
prime = maybePrime
}
maybePrime++
}
returnprime
}
nthPrime(20n)
// ↪ 73n
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt
globalThis
在 JavaScript 中，总会有一个包含了所有内容的很大的对象，但在传统意义上来说，如果你尝试在浏览器中打开它则是会报错的。有的时候全局可以正常访问的节点在浏览器中却可以访问，反之有些可以全局访问的节点在浏览器中却无法访问，而新的 globalThis 属性解决了这个问题。
在此之前 globalThis，获取环境全局对象的唯一可靠的跨平台方法是 Function(‘return this’)()。但是，这会导致在某些设置中违反 CSP，因此 es6-shim 使用这样的检查，例如：
复制代码
vargetGlobal =function(){
if(typeofself !=='undefined') {returnself; }
if(typeofwindow!=='undefined') {returnwindow; }
if(typeofglobal !=='undefined') {returnglobal; }
thrownewError('unable to locate global object');
};
varglobals = getGlobal();
if(typeofglobals.setTimeout !=='function') {
// no setTimeout in this environment!
}
有了 globalThis 这个功能，就不再需要在整个环境中进行全局搜索：
复制代码
if(typeofglobalThis.setTimeout !=='function') {
//nosetTimeoutinthisenvironment!
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
延伸阅读
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
About The Author
bjmayor
程序员，码农，php,python,ios,android,go，产品经理，创业。