温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ES 2021新特性有哪些

发布时间:2021-10-19 17:23:46 来源:亿速云 阅读:117 作者:iii 栏目:web开发

这篇文章主要讲解了“ES 2021新特性有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ES 2021新特性有哪些”吧!

String.protype.replaceAll

在 ES2021 之前,要替换掉一个字符串中的所有指定字符,我们可以这么做:

const fruits = '?+?+?+';  const fruitsfruitsWithBanana = fruits.replace(/\+/g, '?');  console.log(fruitsWithBanana); //???

ES2021 则提出了 replaceAll 方法,并将其挂载在 String 的原型上,可以这么用:

const fruits = '?+?+?+';  const fruitsfruitsWithBanana = fruits.replaceAll('+', '?');  console.log(fruitsWithBanana); //??????

Promise.any

Promise.any 方法和 Promise.race 类似——只要给定的迭代中的一个 promise 成功,就采用第一个 promise 的值作为它的返回值,但与 Promise.race 的不同之处在于——它会等到所有 promise 都失败之后,才返回失败的值:

const myFetch = url => setTimeout(() => fetch(url), Math.floor(Math.random() * 3000));  const promises = [    myFetch('/endpoint-1'),    myFetch('/endpoint-2'),    myFetch('/endpoint-3'),  ];  // 使用 .then .catch  Promise.any(promises) // 任何一个 promise 成功。         .then(console.log) // 比如 ‘3’         .catch(console.error); // 所有的 promise 都失败了  // 使用 async-await  try {    const first = await Promise.any(promises); // 任何一个 promise 成功返回。   console.log(first);  }catch (error) { // 所有的 promise 都失败了    console.log(error);  }

WeakRef

WeakRef 提案主要包含两个新功能:

  •  可以通过 WeakRef 类来给某个对象创建一个弱引用

  •  可以通过 FinalizationRegistry 类,在某个对象被垃圾回收之后,执行一些自定义方法

上述两个新功能可以同时使用,也可以单独使用,取决于你的需求。

一个 WeakRef 对象包含一个对于某个对象的弱引用,被称为 目标 或 引用。通过弱引用一个对象,可以让该对象在没有其它引用的情况下被垃圾回收机制回收。

WeakRef 主要用来 缓存 和 映射 一些大型对象,当你希望某个对象在不被其它地方引用的情况下及时地被垃圾回收,那么你就可以使用它。

function toogle(element) {    const weakElement = new WeakRef(element);    let intervalId = null;    function toggle() {      const el = weakElement.deref();      if (!el) {         return clearInterval(intervalId);     }     const decoration = weakElement.style.textDecoration;     const style= decoration === 'none' ? 'underline' : 'none';     decoration = style;    }    intervalId = setInterval(toggle, 1000);  }  const element = document.getElementById("link");  toogle(element);  setTimeout(() => element.remove(), 10000);

FinalizationRegistry 接收一个注册器回调函数,可以利用该注册器为指定对象注册一个事件监听器,当这个对象被垃圾回收之后,会触发监听的事件,具体步骤如下。

首先,创建一个注册器:

const registry = new FinalizationRegistry(heldValue => {    // .... });

接着注册一个指定对象,同时也可以给注册器回调传递一些参数:

registry.register(theObject, "some value");

逻辑赋值运算符

译者注:赋值运算符 和 表达式 的区别可以 看这里。

逻辑赋值运算符结合了 逻辑运算符 和 赋值表达式。逻辑赋值运算符有两种:

  •  或等于(||=)

  •  且等于(&&=) 

// 或等于  |   a   |   b   | a ||= b | a (运算后) |  | true  | true  |   true  |        true         |  | true  | false |   true  |        true         |  | false | true  |   true  |        true         |  | false | false |   false |        false        |  a ||= b  // 等同于:  a || (a = b);  // 且等于  |   a   |   b   | a &&= b | a (运算后) |  | true  | true  |   true  |        true         |  | true  | false |   false |        false        |  | false | true  |   false |        false        |  | false | false |   false |        false        |  a &&= b  // 等同于:  a && (a = b);

数字分隔符

通过这个功能,我们利用 “(_,U+005F)” 分隔符来将数字分组,提高数字的可读性:

1_000_000_000           // 十亿  101_475_938.38          // 亿万  const amount = 12345_00;  // 12,345  const amount = 123_4500;  // 123.45 (保留 4 位小数)  const amount = 1_234_500; // 1,234,500  0.000_001 // 百万分之一  1e10_000  // 10^10000  const binary_literals = 0b1010_0001_1000_0101;  const hex_literals = 0xA0_B0_C0;  const bigInt_literals = 1_000_000_000_000n;  const octal_literal = 0o1234_5670;

感谢各位的阅读,以上就是“ES 2021新特性有哪些”的内容了,经过本文的学习后,相信大家对ES 2021新特性有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

es
AI