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

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"从 ES2015（ES6）之后，每年，JS 都会在其新标准里添加一些有意思的新特性。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们可以看一下已经进入 Stage 4 阶段的提案，这些提案到时候都会进入 ES2021 的标准。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（Stage 4 是啥？）TC39 在把提案转换为最后的标准之前，这些提案都会经历 State 1～4 四个阶段。只有到 Stage 4 的提案会被标记为“已完成”，并在将来进入到下一个 ES 标准里。有兴趣的话，可以点击这里查看目前每个 Stage 都有哪些提案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"特性一览"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"String.prototype.replaceAll"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"大家应该都使用过 "},{"type":"codeinline","content":[{"type":"text","text":"String.prototype.replace"}]},{"type":"text","text":" 来替换字符串中的某些匹配给定正则表达式的部分。但是，如果我们所使用的匹配规则不是一个正则表达式，而是一个普通的字符串，只有 "},{"type":"text","marks":[{"type":"strong"}],"text":"第一个"},{"type":"text","text":" 匹配的才会被替换。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const str = 'I like frontend. I like JavaScript.';\nconst newStr = str.replace('like', 'love');\nnewStr;\n\/\/ \"I love frontend. I like JavaScript.\"\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你需要替换所有的 "},{"type":"codeinline","content":[{"type":"text","text":"\"like\""}]},{"type":"text","text":"，那我们只能用正则表达式 "},{"type":"codeinline","content":[{"type":"text","text":"\/like\/g"}]},{"type":"text","text":" 来进行匹配。有"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"了 "},{"type":"codeinline","content":[{"type":"text","text":"String.prototype.replaceAll"}]},{"type":"text","text":" 这个 API，我们就可以轻松替换掉所有的字符串啦。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const str = 'I like frontend. I like JavaScript.';\nconst newStr = str.replaceAll('like', 'love');\nnewStr;\n\/\/ \"I love frontend. I love JavaScript.\"\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实这个 API 在一些浏览器的最新版本已经得到了实现，只是还未进入标准。比如在 Edge、Opera 或者 Node.js 中我们就暂时无法使用这个 API。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"Promise.any"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Promise"}]},{"type":"text","text":" 在过去的几年里，已经更新过了若干的新的 API。除了 ES6 的 "},{"type":"codeinline","content":[{"type":"text","text":"Promise.all"}]},{"type":"text","text":"、"},{"type":"codeinline","content":[{"type":"text","text":"Promise.race"}]},{"type":"text","text":" 之外，还有去年发布的 ES2020 中的 "},{"type":"codeinline","content":[{"type":"text","text":"Promise.allSettled"}]},{"type":"text","text":"。现在，我们来看一个新的 API："},{"type":"codeinline","content":[{"type":"text","text":"Promise.any"}]},{"type":"text","text":"。从字面意思来看，相信聪明的你应该能大致猜出这个 API 的作用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"与 "},{"type":"codeinline","content":[{"type":"text","text":"Promise.all"}]},{"type":"text","text":" 类似，"},{"type":"codeinline","content":[{"type":"text","text":"Promise.any"}]},{"type":"text","text":" 也接受一个 "},{"type":"codeinline","content":[{"type":"text","text":"Promise"}]},{"type":"text","text":" 的数组。当其中任何一个 "},{"type":"codeinline","content":[{"type":"text","text":"Promise"}]},{"type":"text","text":" 完成（fullfill）时，就返回那个已经有完成值的 "},{"type":"codeinline","content":[{"type":"text","text":"Promise"}]},{"type":"text","text":"。如果所有的 "},{"type":"codeinline","content":[{"type":"text","text":"Promise"}]},{"type":"text","text":" 都拒绝（reject），则返回一个拒绝的 "},{"type":"codeinline","content":[{"type":"text","text":"Promise"}]},{"type":"text","text":"，该 "},{"type":"codeinline","content":[{"type":"text","text":"Promise"}]},{"type":"text","text":" 的返回值是一个 "},{"type":"codeinline","content":[{"type":"text","text":"AggregateError"}]},{"type":"text","text":" 对象。我们可以把 "},{"type":"codeinline","content":[{"type":"text","text":"Promise.any"}]},{"type":"text","text":" 理解成 "},{"type":"codeinline","content":[{"type":"text","text":"Promise.all"}]},{"type":"text","text":" 的相反操作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"Promise.any(promises).then(\n  (first) => {\n    \/\/ 任何一个 Promise 完成了\n  },\n  (error) => {\n    \/\/ 所有的 Promise 都拒绝了\n  }\n);"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"逻辑赋值操作符"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们知道，下面的代码："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let a = 0;\na = a + 2;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以简写为："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let a = 0;\na += 2;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那么这个新的标准中，逻辑表达式的操作符（"},{"type":"codeinline","content":[{"type":"text","text":"&&"}]},{"type":"text","text":"、"},{"type":"codeinline","content":[{"type":"text","text":"||"}]},{"type":"text","text":"、"},{"type":"codeinline","content":[{"type":"text","text":"??"}]},{"type":"text","text":"）也可以简写啦。（关于 ES2020 标准的 "},{"type":"codeinline","content":[{"type":"text","text":"??"}]},{"type":"text","text":" 操作符，后文会稍微补充一下）。我们看一下示例代码："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 等同于 a = a || b\na ||= b;\n\/\/ 等同于 c = c && d\nc &&= d;\n\/\/ 等同于 e = e ?? f\n\/\/ 咦，?? 这是啥\ne ??= f;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在这里，补充一下去年发布的标准中的新的逻辑操作符 "},{"type":"codeinline","content":[{"type":"text","text":"??"}]},{"type":"text","text":" 的用法。大家可能遇到过，如果一个变量是空，需要给它赋值为一个默认值的情况。新手同学可能会这么写："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let count = realCount || '无法获取'"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是，以上的代码会有一个 bug。如果 "},{"type":"codeinline","content":[{"type":"text","text":"realCount"}]},{"type":"text","text":" 的值是 "},{"type":"codeinline","content":[{"type":"text","text":"0"}]},{"type":"text","text":"，则会被当作取不到其值，会取到 "},{"type":"codeinline","content":[{"type":"text","text":"'无法获取'"}]},{"type":"text","text":" 这个字符串。而如果我们使用了 "},{"type":"codeinline","content":[{"type":"text","text":"??"}]},{"type":"text","text":"，只有当操作符左边的值是 "},{"type":"codeinline","content":[{"type":"text","text":"null"}]},{"type":"text","text":" 或者 "},{"type":"codeinline","content":[{"type":"text","text":"undefined"}]},{"type":"text","text":" 的时候，才会取操作符右边的值："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"let count = realCount ?? '无法获取'\n"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"数字分隔符"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你要写一个很长的数字的时候："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let x = 233333333"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"数字太长会导致可读性很差。使用了数字分隔符 "},{"type":"codeinline","content":[{"type":"text","text":"_"}]},{"type":"text","text":" （下划线），就可以让数字读的更清晰："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let x = 2_3333_3333\n\/\/ x 的值等同于 233333333，只是这样可读性更强，不用一位一位数了"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"WeakRef"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"WeakRef"}]},{"type":"text","text":" 是一个 Class，一个 "},{"type":"codeinline","content":[{"type":"text","text":"WeakRef"}]},{"type":"text","text":" 对象可以让你拿到一个对象的弱引用。这样，就可以不用阻止垃圾回收这个对象了。我们可以使用其构造函数来创建一个 "},{"type":"codeinline","content":[{"type":"text","text":"WeakRef"}]},{"type":"text","text":" 对象"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ someObj 不会因为 ref 引用了这个对象，而不会被垃圾回收\nlet ref = new WeakRef(someObj);"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那我们在使用上述代码中的 "},{"type":"codeinline","content":[{"type":"text","text":"someObj"}]},{"type":"text","text":" 对象时，就可以用 "},{"type":"codeinline","content":[{"type":"text","text":"WeakRef.prototype.deref()"}]},{"type":"text","text":" 来取道。但是，在被引用对象被垃圾回收之后，这个函数就会返回 "},{"type":"codeinline","content":[{"type":"text","text":"undefined"}]},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 如果 someObj 被垃圾回收了，则 obj 就会是 undefined\nlet obj = ref.deref();"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"Intl.ListFormat"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Intl.ListFormat"}]},{"type":"text","text":" 是一个构造函数，用来处理和多语言相关的对象格式化操作。来通过一个例子了解一下。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const list = ['Apple', 'Orange', 'Banana']\nnew Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list);\n\/\/ \"Apple, Orange and Banana\"\nnew Intl.ListFormat('zh-cn', { style: 'short', type: 'conjunction' }).format(list);\n\/\/ 会根据语言来返回相应的格式化操作\n\/\/ \"Apple、Orange和Banana\""}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个 API 支持多国语言，具体的 API 可以参考 这里。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"Intl.DateTimeFormat"}]},{"type":"text","text":" API 中的 "},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"date"}]},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"Style"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"timeStyle"}]},{"type":"text","text":" 的配置项"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Intl.DateTimeFormat"}]},{"type":"text","text":" 是一个用来处理多语言下的时间日期格式化的函数。ES2021 中给这个函数添加了两个新的参数："},{"type":"codeinline","content":[{"type":"text","text":"dateStyle"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"timeStyle"}]},{"type":"text","text":"。下面我们来通过例子来看一下这两个参数的用法："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let o = new Intl.DateTimeFormat(\"en\" , {\n  timeStyle: \"short\"\n});\nconsole.log(o.format(Date.now())); \/\/ \"13:31\"\nlet o = new Intl.DateTimeFormat(\"en\" , {\n  dateStyle: \"short\"\n});\nconsole.log(o.format(Date.now())); \/\/ \"21.03.2012\"\n\/\/ 可以通过同时传入 timeStyle 和 dateStyle 这两个参数来获取更完整的格式化时间的字符串\nlet o = new Intl.DateTimeFormat(\"en\" , {\n  timeStyle: \"medium\",\n  dateStyle: \"short\"\n});\nconsole.log(o.format(Date.now())); \/\/ \"21.03.2012, 13:31\"\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"读完是不是心动了？这些 API 在最新版的 Chrome 都已经得到了支持，赶紧尝尝鲜吧。如果要在生产环境中使用，记得处理兼容性问题哦。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"头图：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：陈宇清"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：https:\/\/mp.weixin.qq.com\/s\/O78fK2Yh_XQE1y23QSQxRg"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：“学不动了！”系列之 ES2021 抢先尝"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"来源：微医大前端技术 - 微信公众号 [ID：wed_fed]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"转载：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}]}]}