写点什么

“学不动了!”系列之 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:001891

评论

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

使用Spring Validation优雅地校验参数

Java课代表

springboot

揭秘淘宝平台广告策略,拆解最佳投放实践

华为云开发者联盟

数据分析 广告 用户增长 淘宝 电商

信创舆情一线--50多家科技公司源代码泄露

统小信uos

2行代码搞定一个定时器!

简爱W

Java中的模板设计模式,太实用了!

BUZHIDAO

Java

视频丨包不同的沙雕敏捷之砸锅卖铁买兰博

华为云开发者联盟

程序员 运维 敏捷 敏捷开发 技术人

该学一学了!零基础入门Docker

程序员的时光

Docker

轻量级BI应用-Superset实践

Jackchang234987

BI 数据产品

百万并发「零拷贝」技术系列之经典案例Netty

码农神说

Java Netty 零拷贝

要都练基本功

架构师

架构师训练营week08 作业

GunShotPanda

JVM详解之:HotSpot VM中的Intrinsic methods

程序那些事

Java JVM GC

判断两个链表是否合并

Acker飏

Developer 转型记:一个开发平台的“魔力”

华为云开发者联盟

华为 AI 开发者 开发者工具 华为云

一图看懂华为云DevCloud如何应对敏捷开发的测试挑战

华为云开发者联盟

微服务 敏捷开发 测试 云服务 华为云

第8周回顾

慵秋

架构师训练营第8周学习总结

TH

架构师训练营week08 学习总结

GunShotPanda

第八周总结

Acker飏

BFC "苦"前端久矣!

catcoolion

CSS 大前端

判了!中科大博士写游戏外挂赚了12万获刑,被抓才知道帮团队赚了300万……

程序员生活志

游戏开发 游戏 游戏外挂 新闻

MySQL的索引基础知识

guoguo 👻

单向链表合并算法

走过路过飞过

架构师培训 -08总结 数据结构算法,网络通信协议,非阻塞网络 I/O,数据库原理

刘敏

【解构系统设计面试】什么是系统设计?以及如何设计一个新鲜事系统?

罗远航

系统设计

Java SSM 框架常见面试题

老大哥

Java

知识点梳理:聊聊iOS SDK数据采集那点事儿

易观大数据

求组队,PK华为HMS全球应用创新大赛!

InfoQ_e92167c73263

android

第八周总结

LEAF

面试官问:僵尸进程和孤儿进程有了解过吗

Java小咖秀

Linux 学习 面试 进程 经验

一次线上JVM Young GC调优,搞懂了这么多东西!

南方有乔木兮

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