写点什么

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

  • 2021 年 7 月 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 年 7 月 31 日 07:001221

评论

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

Flutter的staggered GridView详细使用

潘珉

flutter

翻译敏捷行业专业外文,不只是谷歌翻译

行叔

翻译 Scrum 敏捷开发 Agile

给学妹的 Java 学习路线

武培轩

Java 学习 程序员 程序媛

工厂模式(二)MyBatis中展示的简单的工厂模式

LSJ

mybatis 工厂模式

[GitHub] 跟我一起白嫖 GitHub Pages 做个人站点 ?

猴哥一一 cium

git GitHub GitHub Pages

软件开发生产率改进之我见(一)

清水

团队管理 软件工程 技术管理

重磅!Apache Flink 1.11 功能前瞻抢先看!

Apache Flink

大数据 flink 流计算 实时计算

听过很多道理,依然过不好这一生。

Neco.W

感悟 创业心态

学计算机你后悔了吗?

陈辰

学习 技术 大前端

实用贴丨正确的「递归」打开方式:让计算机像计算机一样去计算

博文视点Broadview

Python 递归

数仓系列 | Flink 窗口的应用与实现

Apache Flink

大数据 flink 流计算 实时计算

ARTS - Week One

shepherd

js algorithm

简单聊聊什么是苹果生态

李俊辰

Elasticsearch 实战

代码诗人

李想解读《高效能人士的七个习惯》

我心依然

习惯 高效能人士的七个习惯 李想 汽车之家

Kubectl exec 的工作原理解读

米开朗基杨

Kubernetes kubelet

2020年2月北京BGP机房网络质量评测报告

博睿数据

五个“为什么” —— 读《精益创业》

YoungZY

读书笔记

有价值的产品=设计思维+精益创业+敏捷方法

行叔

Scrum 敏捷开发 Agile 设计思维 精益创业

关于问题的问题 —— 读《你的灯亮着吗?》

YoungZY

读书笔记 读书

2020年2月北京BGP机房网络质量评测报告

博睿数据

APM 机房 评测 世纪互联

Zabbix实战指南

橙子冰

技术 运维 监控 运维自动化 zabbix

基于mysqldump聊一聊MySQL的备份和恢复

麦洛

MySQL

1分钟学习Java中数组快速复制

HQ数字卡

Java 数组

Golang热更新原理

我心依然

nginx Linux 信号 Go 语言

专业的力量

无量靠谱

淘宝 美团 专业 专业主义 大前研一

Lean UX 教你设计如何驱动产品

Yanel 说敏捷产品

产品 敏捷 设计

工厂模式 (一)简单的工厂模式概念以及示例代码

LSJ

[Git] Git 可以这么学

猴哥一一 cium

git

游戏夜读 | 如何避免乏味?两则

game1night

「开放」对协作效率的影响

Tony Wu

产品 产品设计

ShadowRealm 与微前端沙箱

ShadowRealm 与微前端沙箱

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