报名参加CloudWeGo黑客松,奖金直推双丰收! 了解详情
写点什么

“学不动了!”系列之 ES2021 抢先尝

  • 2021-07-31
  • 本文字数:2548 字

    阅读完需:约 8 分钟

“学不动了!”系列之 ES2021 抢先尝

从 ES2015(ES6)之后,每年,JS 都会在其新标准里添加一些有意思的新特性。


我们可以看一下已经进入 Stage 4 阶段的提案,这些提案到时候都会进入 ES2021 的标准。


(Stage 4 是啥?)TC39 在把提案转换为最后的标准之前,这些提案都会经历 State 1~4 四个阶段。只有到 Stage 4 的提案会被标记为“已完成”,并在将来进入到下一个 ES 标准里。有兴趣的话,可以点击这里查看目前每个 Stage 都有哪些提案。


特性一览

String.prototype.replaceAll


大家应该都使用过 String.prototype.replace 来替换字符串中的某些匹配给定正则表达式的部分。但是,如果我们所使用的匹配规则不是一个正则表达式,而是一个普通的字符串,只有 第一个 匹配的才会被替换。


const str = 'I like frontend. I like JavaScript.';const newStr = str.replace('like', 'love');newStr;// "I love frontend. I like JavaScript."
复制代码


如果你需要替换所有的 "like",那我们只能用正则表达式 /like/g 来进行匹配。有

了 String.prototype.replaceAll 这个 API,我们就可以轻松替换掉所有的字符串啦。


const str = 'I like frontend. I like JavaScript.';const newStr = str.replaceAll('like', 'love');newStr;// "I love frontend. I love JavaScript."
复制代码


其实这个 API 在一些浏览器的最新版本已经得到了实现,只是还未进入标准。比如在 Edge、Opera 或者 Node.js 中我们就暂时无法使用这个 API。


Promise.any


Promise 在过去的几年里,已经更新过了若干的新的 API。除了 ES6 的 Promise.allPromise.race 之外,还有去年发布的 ES2020 中的 Promise.allSettled。现在,我们来看一个新的 API:Promise.any。从字面意思来看,相信聪明的你应该能大致猜出这个 API 的作用。


与 Promise.all 类似,Promise.any 也接受一个 Promise 的数组。当其中任何一个 Promise 完成(fullfill)时,就返回那个已经有完成值的 Promise。如果所有的 Promise 都拒绝(reject),则返回一个拒绝的 Promise,该 Promise 的返回值是一个 AggregateError 对象。我们可以把 Promise.any 理解成 Promise.all 的相反操作。


Promise.any(promises).then(  (first) => {    // 任何一个 Promise 完成了  },  (error) => {    // 所有的 Promise 都拒绝了  });
复制代码


逻辑赋值操作符


我们知道,下面的代码:


let a = 0;a = a + 2;
复制代码


可以简写为:


let a = 0;a += 2;
复制代码


那么这个新的标准中,逻辑表达式的操作符(&&||??)也可以简写啦。(关于 ES2020 标准的 ?? 操作符,后文会稍微补充一下)。我们看一下示例代码:


// 等同于 a = a || ba ||= b;// 等同于 c = c && dc &&= d;// 等同于 e = e ?? f// 咦,?? 这是啥e ??= f;
复制代码


在这里,补充一下去年发布的标准中的新的逻辑操作符 ?? 的用法。大家可能遇到过,如果一个变量是空,需要给它赋值为一个默认值的情况。新手同学可能会这么写:


let count = realCount || '无法获取'
复制代码


但是,以上的代码会有一个 bug。如果 realCount 的值是 0,则会被当作取不到其值,会取到 '无法获取' 这个字符串。而如果我们使用了 ??,只有当操作符左边的值是 null 或者 undefined 的时候,才会取操作符右边的值:

let count = realCount ?? '无法获取'
复制代码

数字分隔符


如果你要写一个很长的数字的时候:


let x = 233333333
复制代码


数字太长会导致可读性很差。使用了数字分隔符 _ (下划线),就可以让数字读的更清晰:


let x = 2_3333_3333// x 的值等同于 233333333,只是这样可读性更强,不用一位一位数了
复制代码


WeakRef


WeakRef 是一个 Class,一个 WeakRef 对象可以让你拿到一个对象的弱引用。这样,就可以不用阻止垃圾回收这个对象了。我们可以使用其构造函数来创建一个 WeakRef 对象


// someObj 不会因为 ref 引用了这个对象,而不会被垃圾回收let ref = new WeakRef(someObj);
复制代码


那我们在使用上述代码中的 someObj 对象时,就可以用 WeakRef.prototype.deref() 来取道。但是,在被引用对象被垃圾回收之后,这个函数就会返回 undefined


// 如果 someObj 被垃圾回收了,则 obj 就会是 undefinedlet obj = ref.deref();
复制代码

Intl.ListFormat


Intl.ListFormat 是一个构造函数,用来处理和多语言相关的对象格式化操作。来通过一个例子了解一下。


const list = ['Apple', 'Orange', 'Banana']new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list);// "Apple, Orange and Banana"new Intl.ListFormat('zh-cn', { style: 'short', type: 'conjunction' }).format(list);// 会根据语言来返回相应的格式化操作// "Apple、Orange和Banana"
复制代码


这个 API 支持多国语言,具体的 API 可以参考 这里。


Intl.DateTimeFormat API 中的 dateStyle 和 timeStyle 的配置项


Intl.DateTimeFormat 是一个用来处理多语言下的时间日期格式化的函数。ES2021 中给这个函数添加了两个新的参数:dateStyle 和 timeStyle。下面我们来通过例子来看一下这两个参数的用法:


let o = new Intl.DateTimeFormat("en" , {  timeStyle: "short"});console.log(o.format(Date.now())); // "13:31"let o = new Intl.DateTimeFormat("en" , {  dateStyle: "short"});console.log(o.format(Date.now())); // "21.03.2012"// 可以通过同时传入 timeStyle 和 dateStyle 这两个参数来获取更完整的格式化时间的字符串let o = new Intl.DateTimeFormat("en" , {  timeStyle: "medium",  dateStyle: "short"});console.log(o.format(Date.now())); // "21.03.2012, 13:31"
复制代码


读完是不是心动了?这些 API 在最新版的 Chrome 都已经得到了支持,赶紧尝尝鲜吧。如果要在生产环境中使用,记得处理兼容性问题哦。



头图:Unsplash

作者:陈宇清

原文:https://mp.weixin.qq.com/s/O78fK2Yh_XQE1y23QSQxRg

原文:“学不动了!”系列之 ES2021 抢先尝

来源:微医大前端技术 - 微信公众号 [ID:wed_fed]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021-07-31 07:001929

评论

发布
暂无评论
发现更多内容

架构实战营-毕业设计

笑春风

模块四

Winston

架构训练营模块四作业

老实人Honey

架构训练营

【架构设计模块四】:设计千万级学生管理系统的考试试卷存储方案

Ryoma

iOS官方瘦身方案ODR(二):换肤系统改造|践行 On-Demand Resources

LabLawliet

ios 独立开发者 apple 优化技巧 8月日更

番外3. Python OpenCV 中如何绘制各种图形?

梦想橡皮擦

8月日更

网络攻防学习笔记 Day99

穿过生命散发芬芳

态势感知 网络攻防 8月日更

架构实战营 - 模块 4 - 设计千万级学生管理系统的考试试卷存储方案

雪中亮

架构实战营 #架构实战营

高亮架构训练营毕业设计-设计电商秒杀系统

高亮

架构训练营

printf函数的常用格式化输出

Changing Lin

8月日更

架构实战营模块4作业

子豪sirius

架构实战营

初识宽度优先搜索

泽睿

模块四作业

king

架构实战营-模块4

Cingk

商城异地多活架构

arctec

架构实战营-毕业设计项目

༺NPE༻

prometheus介绍与安装

Rubble

Prometheus 8月日更

毕业设计:设计电商秒杀系统

Johnny

架构实战营

架构实战营基于redis哨兵模式的考试数据存储设计

慕溶枫

#架构实战营

架构实战营-毕业总结

笑春风

软件测试基础面试常问问题

程序员阿沐

面试 软件测试 自动化测试 经验分享 测试工程师

毕业设计

青鸟飞鱼

从0开始的TypeScriptの一:启航

空城机

typescript 大前端 8月日更

二叉树遍历和分治

泽睿

算法 遍历 分治

值值得收藏,揭秘 MySQL 多版本并发控制实现原理

架构精进之路

MySQL MVCC 8月日更

架构实战营第四周作业——考试试卷存储

发酵的死神

架构实战营

电商秒杀系统设计方案

Lane

FastApi-08-路径参数校验

Python研究所

FastApi 8月日更

读尽天下源码,心中自然无码

程序员阿杜

8月日更

毕业总结

梦寐凯旋

#架构实战营

架构实战营总结

Lane

“学不动了!”系列之 ES2021 抢先尝_语言 & 开发_微医大前端技术_InfoQ精选文章