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 时才读取为运算符右边的值。
const nullValue = null; const emptyText = ""; // falsy const someNumber = 42; const valA = nullValue ?? "default for A"; const valB = emptyText ?? "default for B"; const valC = 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。当与函数调用一起使用时,如果给定的函数不存在,则返回未定义的值。
const user = { name: "John" }; // Fails with `Uncaught TypeError: Cannot read property 'city' of undefined` const city = user.address.city; // Works but verbose let city = "Not Set"; if (user.address !== undefined && user.address !== null) { city = user.address.city; } // Works and concise but requires a 3rd party library const city = _.get(user, "address.city", "Not Set"); // 🤗 const city = 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 function isPrime(p) { for (let i = 2n; i * i <= p; i++) { if (p % i === 0n) return false; } return true } // Takes a BigInt as an argument, returns nth prime number as BigInt function nthPrime(nth) { let maybePrime = 2n let prime = 0n while (nth >= 0n) { if (isPrime(maybePrime)) { nth-- prime = maybePrime } maybePrime++ } return prime } 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 使用这样的检查,例如:
var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('unable to locate global object'); }; var globals = getGlobal(); if (typeof globals.setTimeout !== 'function') { // no setTimeout in this environment! }
有了 globalThis 这个功能,就不再需要在整个环境中进行全局搜索:
if (typeof globalThis.setTimeout !== 'function') { // no setTimeout in this environment! }
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
延伸阅读
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/zhibo立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
如何把PHP项目部署到云服务器上,让别人看到你的成果。
版本介绍 服务器类型:阿里云服务器服务器系统:Ubuntu 16.04PHP版本:PHP7.0数据库 :Mysql 5.7.23Web服务器软件:Apache2 服务器PHP环境的搭建以及注意事项1、Apache2的安装: sudo apt-get install apache2 1 运行完成后在打开游览器输入IP地址,若出现欢迎界面即安装成功注意:网站根目录为/var/www/html2、PHP的安装 sudo apt-get install php7.0 1 运行完成后输入php -v查看PHP是否安装成功。注意:需要绕过Apache能够识别解析PHP文件必须安装一个mod,安装代码如下: sudo apt-get install libapache2-mod-php7.0 1 3、MySQL的安装 sudo apt-get install mysql-server mysql-client 1 安装过程中会提示设置root账号的登录密码,输入后选择OK继续安装注意:同样的,我们还需要让MySQL能够和PHP互动,安装PHP的MySQL插件: sudo apt-get instal...
- 下一篇
redis 分布式锁的 5个坑,真是又大又深
引言 最近项目上线的频率颇高,连着几天加班熬夜,身体有点吃不消精神也有些萎靡,无奈业务方催的紧,工期就在眼前只能硬着头皮上了。脑子浑浑噩噩的时候,写的就不能叫代码,可以直接叫做Bug。我就熬夜写了一个bug被骂惨了。 由于是做商城业务,要频繁的对商品库存进行扣减,应用是集群部署,为避免并发造成库存超买超卖等问题,采用 redis 分布式锁加以控制。本以为给扣库存的代码加上锁lock.tryLock就万事大吉了 /** * @author xiaofu * @description 扣减库存 * @date 2020/4/21 12:10 */ public String stockLock() { RLock lock = redissonClient.getLock("stockLock"); try { /** * 获取锁 */ if (lock.tryLock(10, TimeUnit.SECONDS)) { /** * 查询库存数 */ Integer stock = Integer.valueOf(stringRedisTemplate.opsForValue().get("...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果