即将发布的ES2021中有哪些有趣的功能

本文转载自微信公众号“前端先锋”（jingchengyideng）。

简述

ES2021(ES12)将于 2021 年中发布。在本文中，你将将会了解五个最有趣的功能：String.prototype.replaceAll()，数字分隔符，逻辑赋值运算符，Promise.any()，WeakRef 和Finalizers。

本文所描述的五个功能目前都处于第 4 阶段。这意味着它们已经完成，并将要在 JavaScript 引擎中实现了。这意味着你不会浪费时间去学习一些可能永远也不会出现的东西。

这些功能不久将会发布。如果有兴趣，可以到官方 Ecma TC39 GitHub (https://github.com/tc39/proposals) 去了解有关其他提案的更多信息。这个 Github 库跟踪了所有提案以及其当前所处的阶段。

String.prototype.replaceAll()

先从一个小功能 replaceAll() 开始，这是对 JavaScript 语言的一个补充。当你要替换字符串中多次出现的匹配模式时，目前可以用 replace() 方法，但问题是它只能替换第一次出现的那个。

这并不意味着 replace() 不能替换所有出现的匹配模式，只不过你必须用正则表达式才行。如果你可以接受那就没事儿了。不过对于很多 js 程序员来说，正则表达式并不是他们的菜(实际上是懒得学!)。

如果你就是这样的 js 程序员，肯定喜欢新的 replaceAll() 方法。它的工作方式与 replace() 类似，区别在于 replaceAll() 可以不用正则表达式就能替换所有出现的模式。

replaceAll() 也能接受正则表达式，你完全可以用它代替 replace() 。

 
 
 
 
    
  
  
  
  
  1. // 声明一个字符串
    2. 
  
  
  
  
  2. let str = 'There are those who like cats, there those who like watching cats and there are those who have cats.'
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. // 用 dogs 替换所有的“cats”：
    5. 
  
  
  
  
  5. strstr = str.replaceAll('cats', 'dogs')
    6. 
  
  
  
  
  6. console.log(str)
    7. 
  
  
  
  
  7. // Output:
    8. 
  
  
  
  
  8. // 'There are those who like dogs, there those who like watching dogs and there are those who have dogs.'
    9. 
  
  
  
  
  9. 
  
  
  
  
  10. // 用 replace() 的写法：
    11. 
  
  
  
  
  11. strstr = str.replace(/cats/g, 'dogs')
    12. 
  
  
  
  
  12. console.log(str)
    13. 
  
  
  
  
  13. // Output:
    14. 
  
  
  
  
  14. // 'There are those who like dogs, there those who like watching dogs and there are those have dogs.'
    15.

数字分隔符

这是 JavaScript ES2021的一个非常小的功能，可以让你在处理大量数字时更好过一点。数字分隔符提供了一种能使大数字更易于阅读和使用的简单方法。语法也很简单：一个下划线 _。

 
 
 
 
    
  
  
  
  
  1. // 不带数字分隔符的 Number 
    2. 
  
  
  
  
  2. const num = 3685134689
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. // 带数字分隔符的 Number 
    5. 
  
  
  
  
  5. const num = 3_685_134_689
    6.

不过数字分隔符只是在视觉上提供一些帮助。在使用时不会对数值本身产生任何影响。

 
 
 
 
    
  
  
  
  
  1. // 带数字分隔符的 Number 
    2. 
  
  
  
  
  2. const num = 3_685_134_689
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. // 输出:
    5. 
  
  
  
  
  5. console.log(num)
    6. 
  
  
  
  
  6. // Output:
    7. 
  
  
  
  
  7. // 3685134689
    8.

逻辑赋值运算符

JavaScript 允许在布尔上下文中使用逻辑运算符。例如在 if ... else语句和三目运算符中检测是 true 还是 false。ES2021 的逻辑赋值运算符将逻辑运算符与赋值表达式(=)组合在了一起。

在 JavaScript 中已经有了一些赋值运算符，例如：加法赋值(+=)，减法赋值(-=)，乘法赋值(*=)等。在 ES2021 中又增加了对逻辑运算符 &&，|| 和 ??([空值合并)的支持。

 
 
 
 
    
  
  
  
  
  1. //////////////////
    2. 
  
  
  
  
  2. // 逻辑与赋值运算符 (&&=)
    3. 
  
  
  
  
  3. //////////////////
    4. 
  
  
  
  
  4. x &&= y
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. // 以上代码相当于:
    7. 
  
  
  
  
  7. xx = x && d
    8. 
  
  
  
  
  8. // 或者:
    9. 
  
  
  
  
  9. if (x) {
    10. 
  
  
  
  
  10.   x = y
    11. 
  
  
  
  
  11. }
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 例1:
    14. 
  
  
  
  
  14. let x = 3 
    15. 
  
  
  
  
  15. let y = 0 
    16. 
  
  
  
  
  16. x &&= y
    17. 
  
  
  
  
  17. console.log(x)
    18. 
  
  
  
  
  18. // Output:
    19. 
  
  
  
  
  19. // 0
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. // 例 2:
    22. 
  
  
  
  
  22. let x = 0 
    23. 
  
  
  
  
  23. let y = 9 
    24. 
  
  
  
  
  24. x &&= y
    25. 
  
  
  
  
  25. console.log(x)
    26. 
  
  
  
  
  26. // Output:
    27. 
  
  
  
  
  27. // 0
    28. 
  
  
  
  
  28. 
  
  
  
  
  29. // 例 3:
    30. 
  
  
  
  
  30. let x = 3 // Truthy value.
    31. 
  
  
  
  
  31. let y = 15 // Truthy value.
    32. 
  
  
  
  
  32. x &&= y
    33. 
  
  
  
  
  33. console.log(x)
    34. 
  
  
  
  
  34. // Output:
    35. 
  
  
  
  
  35. // 15
    36. 
  
  
  
  
  36. 
  
  
  
  
  37. 
  
  
  
  
  38. //////////////////
    39. 
  
  
  
  
  39. // 逻辑或赋值运算符 (||=):
    40. 
  
  
  
  
  40. x ||= y
    41. 
  
  
  
  
  41. 
  
  
  
  
  42. // 相当于:
    43. 
  
  
  
  
  43. xx = x || y
    44. 
  
  
  
  
  44. // 或者:
    45. 
  
  
  
  
  45. if (!x) {
    46. 
  
  
  
  
  46.   x = y
    47. 
  
  
  
  
  47. }
    48. 
  
  
  
  
  48. 
  
  
  
  
  49. // 例 1:
    50. 
  
  
  
  
  50. let x = 3
    51. 
  
  
  
  
  51. let y = 0
    52. 
  
  
  
  
  52. x ||= y
    53. 
  
  
  
  
  53. 
  
  
  
  
  54. console.log(x)
    55. 
  
  
  
  
  55. // Output:
    56. 
  
  
  
  
  56. // 3
    57. 
  
  
  
  
  57. 
  
  
  
  
  58. // 例 2:
    59. 
  
  
  
  
  59. let x = 0 
    60. 
  
  
  
  
  60. let y = 9 
    61. 
  
  
  
  
  61. x ||= y
    62. 
  
  
  
  
  62. 
  
  
  
  
  63. console.log(x)
    64. 
  
  
  
  
  64. // Output:
    65. 
  
  
  
  
  65. // 9
    66. 
  
  
  
  
  66. 
  
  
  
  
  67. // 例 3:
    68. 
  
  
  
  
  68. let x = 3 
    69. 
  
  
  
  
  69. let y = 15
    70. 
  
  
  
  
  70. x ||= y
    71. 
  
  
  
  
  71. 
  
  
  
  
  72. console.log(x)
    73. 
  
  
  
  
  73. // Output:
    74. 
  
  
  
  
  74. // 3
    75. 
  
  
  
  
  75. 
  
  
  
  
  76. 
  
  
  
  
  77. /////////////////////////
    78. 
  
  
  
  
  78. // 空值合并赋值运算符 (??=):
    79. 
  
  
  
  
  79. /////////////////////////
    80. 
  
  
  
  
  80. x ??= y
    81. 
  
  
  
  
  81. 
  
  
  
  
  82. // 相当于:
    83. 
  
  
  
  
  83. xx = x ?? y
    84. 
  
  
  
  
  84. // 或者:
    85. 
  
  
  
  
  85. if (x == null || x == undefined) {
    86. 
  
  
  
  
  86.     x = y
    87. 
  
  
  
  
  87. }
    88. 
  
  
  
  
  88. 
  
  
  
  
  89. // 例 1:
    90. 
  
  
  
  
  90. let x = null 
    91. 
  
  
  
  
  91. let y = 'Hello' 
    92. 
  
  
  
  
  92. x ??= y
    93. 
  
  
  
  
  93. console.log(x)
    94. 
  
  
  
  
  94. // Output:
    95. 
  
  
  
  
  95. // 'Hello'
    96. 
  
  
  
  
  96. 
  
  
  
  
  97. // 例 2:
    98. 
  
  
  
  
  98. let x = 'Jay' 
    99. 
  
  
  
  
  99. let y = 'Hello' 
    100. 
  
  
  
  
  100. x ??= y
    101. 
  
  
  
  
  101. console.log(x)
    102. 
  
  
  
  
  102. // Output:
    103. 
  
  
  
  
  103. // 'Jay'
    104. 
  
  
  
  
  104. 
  
  
  
  
  105. // 例 3:
    106. 
  
  
  
  
  106. let x = 'Jay'
    107. 
  
  
  
  
  107. let y = null 
    108. 
  
  
  
  
  108. x ??= y
    109. 
  
  
  
  
  109. console.log(x)
    110. 
  
  
  
  
  110. // Output:
    111. 
  
  
  
  
  111. // 'Jay'
    112. 
  
  
  
  
  112. 
  
  
  
  
  113. // 例 4:
    114. 
  
  
  
  
  114. let x = undefined 
    115. 
  
  
  
  
  115. let y = 'Jock' 
    116. 
  
  
  
  
  116. x ??= y
    117. 
  
  
  
  
  117. 
  
  
  
  
  118. console.log(x)
    119. 
  
  
  
  
  119. // Output:
    120. 
  
  
  
  
  120. // 'Jock'
    121.

看一下上面的例子。首先是 x && = y。仅当 x 为真时，才将 y 赋值给 x。其次是 x || = y，仅当 x 为假时，才将 y 赋值给 x。如果 x 是真，而 y 是假，则不会进行赋值。

如果 x 和 y 都是假，也会发生同样的情况。最后是 x ?? = y。仅当 x 为 null 或 undefined 时，才将 y 分配给 x。如果 x 既不是 null 也不是 undefined 则不会进行赋值，如果 y 为 null 或 undefined 也一样。

Promise.any()

在 ES6 中引入了 Promise.race() 和 Promise.all() 方法，ES2020 加入了 Promise.allSettled()。ES2021 又增加了一个使 Promise 处理更加容易的方法：Promise.any() 。

Promise.any() 方法接受多个 promise，并在完成其中任何一个的情况下返回 promise。其返回的是 Promise.any() 完成的第一个 promise。如果所有 promise 均被拒绝，则 Promise.any() 将返回 AggregateError，其中包含拒绝的原因。

 
 
 
 
    
  
  
  
  
  1. // 例 1: 全部被完成:
    2. 
  
  
  
  
  2. // 创建 promises:
    3. 
  
  
  
  
  3. const promise1 = new Promise((resolve, reject) => {
    4. 
  
  
  
  
  4.   setTimeout(() => {
    5. 
  
  
  
  
  5.     resolve('promise1 is resolved.')
    6. 
  
  
  
  
  6.   }, Math.floor(Math.random() * 1000))
    7. 
  
  
  
  
  7. })
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. const promise2 = new Promise((resolve, reject) => {
    10. 
  
  
  
  
  10.   setTimeout(() => {
    11. 
  
  
  
  
  11.     resolve('promise2 is resolved.')
    12. 
  
  
  
  
  12.   }, Math.floor(Math.random() * 1000))
    13. 
  
  
  
  
  13. })
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. const promise3 = new Promise((resolve, reject) => {
    16. 
  
  
  
  
  16.   setTimeout(() => {
    17. 
  
  
  
  
  17.     resolve('promise3 is resolved.')
    18. 
  
  
  
  
  18.   }, Math.floor(Math.random() * 1000))
    19. 
  
  
  
  
  19. })
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. ;(async function() {
    22. 
  
  
  
  
  22.   // Await the result of Promise.any():
    23. 
  
  
  
  
  23.   const result = await Promise.any([promise1, promise2, promise3])
    24. 
  
  
  
  
  24.   console.log(result)
    25. 
  
  
  
  
  25.   // Output:
    26. 
  
  
  
  
  26.   // 'promise1 is resolved.', 'promise2 is resolved.' or 'promise3 is resolved.'
    27. 
  
  
  
  
  27. })()
    28. 
  
  
  
  
  28. 
  
  
  
  
  29. 
  
  
  
  
  30. // 例 2: 部分完成:
    31. 
  
  
  
  
  31. const promise1 = new Promise((resolve, reject) => {
    32. 
  
  
  
  
  32.   setTimeout(() => {
    33. 
  
  
  
  
  33.     resolve('promise1 is resolved.')
    34. 
  
  
  
  
  34.   }, Math.floor(Math.random() * 1000))
    35. 
  
  
  
  
  35. })
    36. 
  
  
  
  
  36. 
  
  
  
  
  37. const promise2 = new Promise((resolve, reject) => {
    38. 
  
  
  
  
  38.   setTimeout(() => {
    39. 
  
  
  
  
  39.     reject('promise2 was rejected.')
    40. 
  
  
  
  
  40.   }, Math.floor(Math.random() * 1000))
    41. 
  
  
  
  
  41. })
    42. 
  
  
  
  
  42. 
  
  
  
  
  43. ;(async function() {
    44. 
  
  
  
  
  44.   // Await the result of Promise.any():
    45. 
  
  
  
  
  45.   const result = await Promise.any([promise1, promise2])
    46. 
  
  
  
  
  46.   console.log(result)
    47. 
  
  
  
  
  47.   // Output:
    48. 
  
  
  
  
  48.   // 'promise1 is resolved.'
    49. 
  
  
  
  
  49. })()
    50. 
  
  
  
  
  50. 
  
  
  
  
  51. 
  
  
  
  
  52. // 例 3: 均被拒绝:
    53. 
  
  
  
  
  53. const promise1 = new Promise((resolve, reject) => {
    54. 
  
  
  
  
  54.   setTimeout(() => {
    55. 
  
  
  
  
  55.     reject('promise1 was rejected.')
    56. 
  
  
  
  
  56.   }, Math.floor(Math.random() * 1000))
    57. 
  
  
  
  
  57. })
    58. 
  
  
  
  
  58. 
  
  
  
  
  59. const promise2 = new Promise((resolve, reject) => {
    60. 
  
  
  
  
  60.   setTimeout(() => {
    61. 
  
  
  
  
  61.     reject('promise2 was rejected.')
    62. 
  
  
  
  
  62.   }, Math.floor(Math.random() * 1000))
    63. 
  
  
  
  
  63. })
    64. 
  
  
  
  
  64. 
  
  
  
  
  65. ;(async function() {
    66. 
  
  
  
  
  66.   // Use try...catch to catch the AggregateError:
    67. 
  
  
  
  
  67.   try {
    68. 
  
  
  
  
  68.     // Await the result of Promise.any():
    69. 
  
  
  
  
  69.     const result = await Promise.any([promise1, promise2])
    70. 
  
  
  
  
  70.   }
    71. 
  
  
  
  
  71. 
  
  
  
  
  72.   catch (err) {
    73. 
  
  
  
  
  73.     console.log(err.errors)
    74. 
  
  
  
  
  74.     // Output:
    75. 
  
  
  
  
  75.     // [ 'promise1 was rejected.', 'promise2 was rejected.' ]
    76. 
  
  
  
  
  76.   }
    77. 
  
  
  
  
  77. })()
    78.

弱引用：WeakRef

最后一个抢眼的功能是 WeakRefs。在 JavaScript 中，当你创建了一个创建对象的引用时，这个引用可以防止对象被 gc 回收，也就是说 JavaScript 无法删除对象并释放其内存。只要对该对象的引用一直存在，就可以使这个对象永远存在。

ES2021 了新的类 WeakRefs。允许创建对象的弱引用。这样就能够在跟踪现有对象时不会阻止对其进行垃圾回收。对于缓存和对象映射非常有用。

必须用 new关键字创建新的 WeakRef ，并把某些对象作为参数放入括号中。当你想读取引用(被引用的对象)时，可以通过在弱引用上调用 deref() 来实现。下面是一个非常简单的例子。

 
 
 
 
    
  
  
  
  
  1. const myWeakRef = new WeakRef({
    2. 
  
  
  
  
  2.   name: 'Cache',
    3. 
  
  
  
  
  3.   size: 'unlimited'
    4. 
  
  
  
  
  4. })
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. console.log(myWeakRef.deref())
    7. 
  
  
  
  
  7. // Output:
    8. 
  
  
  
  
  8. // { name: 'Cache', size: 'unlimited' }
    9. 
  
  
  
  
  9. 
  
  
  
  
  10. console.log(myWeakRef.deref().name)
    11. 
  
  
  
  
  11. // Output:
    12. 
  
  
  
  
  12. // 'Cache'
    13. 
  
  
  
  
  13. 
  
  
  
  
  14. console.log(myWeakRef.deref().size)
    15. 
  
  
  
  
  15. // Output:
    16. 
  
  
  
  
  16. // 'unlimited'
    17.

Finalizers 和 FinalizationRegistry

与 WeakRef 紧密相连的还有另一个功能，名为 finalizers 或 FinalizationRegistry。这个功能允许你注册一个回调函数，这个回调函数将会在对象被 gc 回收时调用。

 
 
 
 
    
  
  
  
  
  1. // 创建 FinalizationRegistry:
    2. 
  
  
  
  
  2. const reg = new FinalizationRegistry((val) => {
    3. 
  
  
  
  
  3.   console.log(val)
    4. 
  
  
  
  
  4. })
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. ;(() => {
    7. 
  
  
  
  
  7.   // 创建新对象:
    8. 
  
  
  
  
  8.   const obj = {}
    9. 
  
  
  
  
  9. 
  
  
  
  
  10.   //为 “obj” 对象注册 finalizer：
    11. 
  
  
  
  
  11.   //第一个参数：要为其注册 finalizer 的对象。
    12. 
  
  
  
  
  12.   //第二个参数：上面定义的回调函数的值。
    13. 
  
  
  
  
  13.   reg.register(obj, 'obj has been garbage-collected.')
    14. 
  
  
  
  
  14. })()
    15. 
  
  
  
  
  15. // 当 "obj" 被gc回收时输出：
    16. 
  
  
  
  
  16. // 'obj has been garbage-collected.'
    17.

官方建议不要轻易使用 WeakRef 和 finalizer。其中一个原因是它们可能不可预测，另一个是它们并没有真正帮 gc 完成工作，实际上可能会gc的工作更加困难。你可以在它的提案(https://github.com/tc39/proposal-weakrefs#a-note-of-caution)中详细了解其原因。

总结

与以前的 JavaScript 规范(例如 ES6 和 ES2020)相比，看上去 ES2021的更新不多，但是这些有趣的功能值得我们关注。

当前标题：即将发布的ES2021中有哪些有趣的功能
网站地址：http://www.shufengxianlan.com/qtweb/news39/369539.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

定制开发知识

分类信息网站

广安做网站　　 　成都企业网站维护　　 　二枢服务器托管　　 　四川国泰民安消防　　 　光华机房服务器托管　　 　成都小程序开发　　 　钢筋机械设备　　 　温江电信机房　　 　重庆联通机房托管　　 　主动防护网　　 　成都包装设计公司　　 　全网营销网站推广　　 　重庆网站建设公司　　 　明安消防器材　　 　ios开发　　 　服务器托管　　 　奢侈品网站建设方案　　 　成都app制作　　 　做网站的公司　　 　德阳电信服务器托管