第2191期ECMAScript2021新特征

Posted 前端早读课

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第2191期ECMAScript2021新特征相关的知识，希望对你有一定的参考价值。

前言

今日前端早读课文章由凹凸实验室@五米授权分享。

正文从这开始~~

ECMAScript 2021版本预计在2021年6月发布，根据每年的新特性都会经历四个阶段，而第四阶段也就是最后一个阶段，本文即将介绍的即提案4中的相关新特性，意味着这些新特性将很大程度的出现在下一个版本中。

新特性总结如下：

  • String.prototype.replaceAll( )

  • 私有方法 Private Methods 与私有访问者 Private Accessors

  • Promise.any 与 AggregateError

  • WeakRefs 弱引用

  • 逻辑运算符和赋值表达式

String.prototype.replaceAll( )

完全匹配替换字符串

目前，javascript字符串有replace方法可以用来做一个字符串替换，

 
   
   
 
    
  
    
    
  
  1. const str = "Backbencher sits at the Back"
    2. 
  
    
    
  
  2. const newStr = str.replace("Back", "Front")
    3. 
  
    
    
  
  3. console.log(newStr) // "Frontbencher sits at the Back"
    4.

如果是要完全匹配我们只能用正则表达式，如下

 
   
   
 
    
  
    
    
  
  1. const str = "Backbencher sits at the Back"
    2. 
  
    
    
  
  2. const newStr = str.replace(/Back/g, "Front")
    3. 
  
    
    
  
  3. console.log(newStr) // "Frontbencher sits at the Front"
    4.

使用replaceAll

 
   
   
 
    
  
    
    
  
  1. const str = "Backbencher sits at the Back"
    2. 
  
    
    
  
  2. const newStr = str.replaceAll("Back", "Front")
    3. 
  
    
    
  
  3. console.log(newStr) // "Frontbencher sits at the Front"
    4.

私有方法 Private Methods

私有方法

私有方法只能在定义它的类内部访问，专用方法名称以开头 #

 
   
   
 
    
  
    
    
  
  1. class Person {
    2. 
  
    
    
  

    3. 
  
    
    
  
  3.  // Private method
    4. 
  
    
    
  
  4.  #setType() {
    5. 
  
    
    
  
  5.  console.log("I am Private");
    6. 
  
    
    
  
  6.  }
    7. 
  
    
    
  

    8. 
  
    
    
  
  8.  // Public method
    9. 
  
    
    
  
  9.  show() {
    10. 
  
    
    
  
  10.  this.#setType();
    11. 
  
    
    
  
  11.  }
    12. 
  
    
    
  

    13. 
  
    
    
  
  13. }
    14. 
  
    
    
  

    15. 
  
    
    
  
  15. const personObj = new Person()
    16. 
  
    
    
  
  16. personObj.show() // "I am Private"
    17. 
  
    
    
  
  17. personObj.setType() // TypeError: personObj.setType is not a function
    18.

由于setType()是私有方法，所以personObj.setType返回undefined，用undefined作函数会 引发TypeError。

私有访问者 Private Accessors

私有访问者

可以通过 #在函数名称前添加访问器函数来使其私有

 
   
   
 
    
  
    
    
  
  1. class Person {
    2. 
  
    
    
  
  2.  // Public accessor
    3. 
  
    
    
  
  3.  get name() { return "Backbencher" }
    4. 
  
    
    
  
  4.  set name(value) {}
    5. 
  
    
    
  

    6. 
  
    
    
  
  6.  // Private accessor
    7. 
  
    
    
  
  7.  get #age() { return 42 }
    8. 
  
    
    
  
  8.  set #age(value) {}
    9. 
  
    
    
  
  9. }
    10.

在上面的代码get和set关键字中，创建name了一个accessor属性。使name看起来像一个函数，也可以像普通属性一样读取它, 而age则是私有。

 
   
   
 
    
  
    
    
  
  1. const obj = new Person()
    2. 
  
    
    
  
  2. console.log(obj.name) // "Backbencher"
    3. 
  
    
    
  
  3. console.log(obj.age) // undefined
    4.

Promise.any 与 AggregateError

当Promise列表中的任意一个promise成功resolve则返回第一个resolve的结果状态， 如果所有的promise均reject，则抛出异常表示所有请求失败

 
   
   
 
    
  
    
    
  
  1. Promise.any([
    2. 
  
    
    
  
  2.  new Promise((resolve, reject) => setTimeout(reject, 200, 'Third')),
    3. 
  
    
    
  
  3.  new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second')),
    4. 
  
    
    
  
  4.  new Promise((resolve, reject) => setTimeout(resolve, 2000, 'First')),
    5. 
  
    
    
  
  5. ])
    6. 
  
    
    
  
  6. .then(value => console.log(`Result: ${value}`)) // Result: Second
    7. 
  
    
    
  
  7. .catch (err => console.log(err))
    8.

另一种情况

 
   
   
 
    
  
    
    
  
  1. Promise.any([
    2. 
  
    
    
  
  2.  Promise.reject('Error 1'),
    3. 
  
    
    
  
  3.  Promise.reject('Error 2'),
    4. 
  
    
    
  
  4.  Promise.reject('Error 3')
    5. 
  
    
    
  
  5. ])
    6. 
  
    
    
  
  6. .then(value => console.log(`请求结果: ${value}`))
    7. 
  
    
    
  
  7. .catch (err => console.log(err)) //AggregateError: All promises were rejected
    8.

Promise.any与Promise.race十分容易混淆，务必注意区分，Promise.race 一旦某个promise触发了resolve或者reject，就直接返回了该状态结果，并不在乎其成功或者失败。

WeakRefs

使用WeakRefs的Class类创建对对象的弱引用

当我们通过（const、let、var）创建一个变量时，垃圾收集器GC将永远不会从内存中删除该变量，只要它的引用仍然存在可访问。而WeakRef对象包含对对象的弱引用，对对象的弱引用是不会阻止垃圾收集器GC恢复该对象的引用，则GC可以在任何时候删除它,目前，可以通过WeakMap()或者WeakSet()来使用WeakRefs。

举个例子：想要跟踪特定的对象调用某一特定方法的次数，超过1000条则做对应提示

 
   
   
 
    
  
    
    
  
  1. let map = new Map()
    2. 
  
    
    
  
  2. function doSomething(obj){
    3. 
  
    
    
  
  3.  ...
    4. 
  
    
    
  
  4. }
    5. 
  
    
    
  
  5. function useObject(obj){
    6. 
  
    
    
  
  6.  doSomething(obj)
    7. 
  
    
    
  
  7.  let called = map.get(obj) || 0
    8. 
  
    
    
  
  8.  called ++ 
    9. 
  
    
    
  
  9.  if(called>1000){
    10. 
  
    
    
  
  10.  console.log('当前调用次数已经超过1000次了')
    11. 
  
    
    
  
  11.  }
    12. 
  
    
    
  
  12.  map.set(obj, called)
    13. 
  
    
    
  
  13. }
    14.

如上虽然可以实现我们的功能，但是会发生内存溢出,因为传递给doSomething函数的每个对象都永久保存在map中，并且不会被GC回收，因此我们可以使用WeakMap

 
   
   
 
    
  
    
    
  
  1. let wmap = new WeakMap()
    2. 
  
    
    
  
  2. function doSomething(obj){
    3. 
  
    
    
  
  3.  ...
    4. 
  
    
    
  
  4. }
    5. 
  
    
    
  
  5. function useObject(obj){
    6. 
  
    
    
  
  6.  doSomething(obj)
    7. 
  
    
    
  
  7.  let called = wmap.get(obj) || 0
    8. 
  
    
    
  
  8.  called ++
    9. 
  
    
    
  
  9.  if(called>1000){
    10. 
  
    
    
  
  10.  console.log('当前调用次数已经超过1000次了')
    11. 
  
    
    
  
  11.  }
    12. 
  
    
    
  
  12.  wmap.set(obj, called)
    13. 
  
    
    
  
  13. }
    14.

因为是弱引用，所以WeakMap、WeakSet的键值对是不可枚举的 WeakSet和WeakMap相似，但是每个对象在WeakSet中的每个对象只可能出现一次，WeakSet中所有对象都是唯一的

 
   
   
 
    
  
    
    
  
  1. let ws = new WeakSet()
    2. 
  
    
    
  
  2. let foo = {}
    3. 
  
    
    
  
  3. let bar = {}
    4. 
  
    
    
  

    5. 
  
    
    
  
  5. ws.add(foo)
    6. 
  
    
    
  
  6. ws.add(bar)
    7. 
  
    
    
  

    8. 
  
    
    
  
  8. ws.has(foo) //true
    9. 
  
    
    
  
  9. ws.has(bar) //true
    10. 
  
    
    
  

    11. 
  
    
    
  
  11. ws.delete(foo) //删除foo对象
    12. 
  
    
    
  
  12. ws.has(foo) //false 已删除
    13. 
  
    
    
  
  13. ws.has(bar) //仍存在
    14.

WeakSet与Set相比有以下两个区别

  • WeakSet只能是对象集合，而不能是任何类型的任意值

  • WeakSet弱引用，集合中对象引用为弱引用，如果没有其他对WeakSet对象的引用，则会被GC回收

最后，WeakRef实例有一个方法deref，返回引用的原始对象，如果原始对象被回收，则返回undefined

 
   
   
 
    
  
    
    
  
  1. const cache = new Map()
    2. 
  
    
    
  
  2. const setValue = (key, obj) => {
    3. 
  
    
    
  
  3.  cache.set(key, new WeakRef(obj))
    4. 
  
    
    
  
  4. }
    5. 
  
    
    
  
  5. const getValue = (key) => {
    6. 
  
    
    
  
  6.  const ref = cache.get(key)
    7. 
  
    
    
  
  7.  if (ref) {
    8. 
  
    
    
  
  8.  return ref.deref()
    9. 
  
    
    
  
  9.  }
    10. 
  
    
    
  
  10. }
    11. 
  
    
    
  
  11. const fibonacciCached = (number) => {
    12. 
  
    
    
  
  12.  const cached = getValue(number)
    13. 
  
    
    
  
  13.  if (cached) return cached
    14. 
  
    
    
  
  14.  const sum = calculateFibonacci(number)
    15. 
  
    
    
  
  15.  setValue(number, sum)
    16. 
  
    
    
  
  16.  return sum
    17. 
  
    
    
  
  17. }
    18.

对于缓存远程数据来说，这可能不是一个好主意，因为远程数据可能会不可预测地从内存中删除。在这种情况下，最好使用LRU之类的缓存。

逻辑运算符和赋值表达式

 
   
   
 
    
  
    
    
  
  1. a ||= b
    2. 
  
    
    
  
  2. //等价于
    3. 
  
    
    
  
  3. a = a || (a = b)
    4. 
  
    
    
  

    5. 
  
    
    
  
  5. a &&= b
    6. 
  
    
    
  
  6. //等价于
    7. 
  
    
    
  
  7. a = a && (a = b)
    8. 
  
    
    
  

    9. 
  
    
    
  
  9. a ??= b
    10. 
  
    
    
  
  10. //等价于
    11. 
  
    
    
  
  11. a = a ?? (a = b)
    12.

??= 可用来初始化缺失的属性

 
   
   
 
    
  
    
    
  
  1. const pages = [
    2. 
  
    
    
  
  2.  {
    3. 
  
    
    
  
  3.  title:'主要场景',
    4. 
  
    
    
  
  4.  path:'/'
    5. 
  
    
    
  
  5.  },
    6. 
  
    
    
  
  6.  {
    7. 
  
    
    
  
  7.  path:'/a'
    8. 
  
    
    
  
  8.  },
    9. 
  
    
    
  
  9.  {
    10. 
  
    
    
  
  10.  path:'/b'
    11. 
  
    
    
  
  11.  },
    12. 
  
    
    
  
  12. ]
    13. 
  
    
    
  

    14. 
  
    
    
  
  14. for (const page of pages){
    15. 
  
    
    
  
  15.  page.title ??= '默认标题'
    16. 
  
    
    
  
  16. }
    17. 
  
    
    
  

    18. 
  
    
    
  
  18. console.table(pages)
    19. 
  
    
    
  
  19. //(index) title path
    20. 
  
    
    
  
  20. //0 "主要场景" "/"
    21. 
  
    
    
  
  21. //1 "默认标题" "/a"
    22. 
  
    
    
  
  22. //2 "默认标题" "/b"
    23.

小结：

  • a ||= b：当a值不存在时，将b变量赋值给a

  • a &&= b：当a值存在时，将b变量赋值给a

  • a ??= b：当a值为null或者undefined时，将b变量赋值给a

参考文章

  • https://backbencher.dev/javascript/es2021-new-features

  • https://codeburst.io/exciting-features-of-javascript-es2021-es12-1de8adf6550b

为你推荐






欢迎自荐投稿，前端早读课等你来

以上是关于第2191期ECMAScript2021新特征的主要内容，如果未能解决你的问题，请参考以下文章

第1006期ECMAScript 6 新特性

第1877期理解ECMAScript规范

第1248期ECMAScript 2016, 2017, 和2018中新增功能

第800期 ECMAScript 2016 中你不知道的改变

第2081期理解ECMAScript规范

第1660期 Diff ECMAScript® 2019