超全超实用的ES2021新特性

ES2021新特性

关于ES的新特性的学习必然是必须的,目前已发布已被增添到 Google Chrome V8 引擎中的特性将于本文学习

1 String.prototype.replaceAll

我们都知道String.prototype.replace()方法来完成字符串的替换

'betterman'.replace('e','1111')
// "b1111tterman"

在 String.prototype.replace() 方法中，当第一个参数是字符串类型时，只替换第一个匹配的字符串,如果我们需要全换所有就需要使用正则匹配到

'betterman'.replace(/e/g,'1111')
// "b1111tt111rman"

我们使用新特性就不需要使用正则了

replaceAll()方法返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。pattern可以是一个字符串或一个 RegExp， replacement可以是一个字符串或一个在每次匹配被调用的函数。

'betterman'.replaceAll('e','1111')
'betterman'.replaceAll(/e/g,'1111')
// "b1111tt111rman"

注意: 第一个参数可以是一个字符串或一个 RegExp,当使用一个 regex时，您必须设置全局（“g”）标志

2 逻辑赋值运算符

逻辑赋值运算符是由逻辑运算符和赋值表达式组合而成

• ||=

当左侧变量的返回值为false 的时候执行右边的赋值运算

    //原来的写法
    a || (a = b);


    if (!a) {
        a = b;
    }

    //可以写成
    a ||= b;
   

• &&=
  当左侧的返回值为true的时候执行右边的赋值运算

    //原来的写法
    a && (a = b);

    if (a) {
        a = b;
    }

    //可以写成
    a &&= b;

• ??=
  在ES2020中入了??(空位合并操作符)表达式的概念,如果表达式在??的左侧运算符求值为 undefined 或 null，就返回其右侧默认值。

在仅当左侧变量为 undefined 或 null 时，该操作符才将右侧变量赋值给左侧变量

    a ?? (a = b);
    if (a === null || a === undefined) {
        a = b;
    }

    //可以写成
    a ??= b;

3 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);
}

4 数字分割符

在日程生活中我们习惯用 , 将要识别的数字分割开, 在代码我们在用于数字数值较大时对数字进行_分割,可提高数字的可读性

// 8888888888 不易辨识
const count1 = 8888888888;

// 8_888_888_888 很直观
const count2 = 8_888_888_888;

console.log(count1 === count2); // true

5 WeakRef

WeakRef对象允许您保留对另一个对象的弱引用，而不会阻止被弱引用对象被GC(垃圾)回收
WeakRef对象包含对对象的弱引用，这个弱引用被称为该WeakRef对象的target或者是referent。对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为。而与此相反的，一个普通的引用（默认是强引用）会将与之对应的对象保存在内存中。只有当该对象没有任何的强引用时，JavaScript引擎GC才会销毁该对象并且回收该对象所占的内存空间。如果上述情况发生了，那么你就无法通过任何的弱引用来获取该对象。

const ref = new WeakRef({ name: 'better' });
let obj = ref.deref();
if (obj) {
  console.log(obj.name); // better
}

MDN说为什么尽量避免使用

正确使用WeakRef对象需要仔细的考虑，最好尽量避免使用。避免依赖于规范没有保证的任何特定行为也是十分重要的。何时、如何以及是否发生垃圾回收取决于任何给定JavaScript引擎的实现。GC在一个JavaScript引擎中的行为有可能在另一个JavaScript引擎中的行为大相径庭，或者甚至在同一类引擎，不同版本中GC的行为都有可能有较大的差距。GC目前还是JavaScript引擎实现者不断改进和改进解决方案的一个难题。

6 Intl.ListFormat

Intl.ListFormat 是一个语言相关的列表格式化构造器。
首个参数是一个语言标识（locale），而第二个参数是一个选项对象 – 包含了 style 和 type 两个属性。

• type
  消息输出的格式。可选的值有用于替代基于“且”关系列表的"conjunction" (默认值， 例如： A, B, and C)， 或者用于替代基于“或”关系列表的 “disjunction”(例如： A, B, or C)，以及用于替代带计量单位的值列表的"unit" (例如： 5 pounds, 12 ounces).
• style
  被格式化消息的长度。可选值有：“long” (默认值，例如： A, B, and C)、“short” 或者 “narrow” (例如： A, B, C)。 当style 的值为narrow时，type 属性的值只能取值unit。

const arr = ['Pen', 'Pencil', 'Paper']
 
let obj = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 
 
/****  输出  ****/
// Pen, Pencil, & Paper
 
 
obj = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 
 
/****  输出  ****/
// Pen, Pencil, and Paper
 
 
obj = new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })
console.log(obj.format(arr)) 
 
/****  输出  ****/
// Pen, Pencil, Paper
 
 
// 传入意大利语标识
obj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 
 
/****  输出  ****/
// Pen, Pencil e Paper
 
 
// 传入德语标识
obj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 
 
/****  输出  ****/
// Pen, Pencil und Paper

7 Intl.DateTimeFormat 的 dateStyle 和 timeStyle 选项

Intl.DateTimeFormat 对象是一个支持语言敏感日期和时间格式化的构造器。拟议的 dateStyle 和 timeStyle 选项可被用于获取一个 locale 特有的日期和给定长度的时间。

// 短格式的时间
let o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })
console.log(o.format(Date.now()))
// 11:27 PM
 
 
// 中等格式的时间
o = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'})
console.log(o.format(Date.now()))
// 11:27:57 PM
 
 
// 长格式的时间
o = new Intl.DateTimeFormat('en' , { timeStyle: 'long' })
console.log(o.format(Date.now()))
// 11:27:57 PM GMT+11
 
 
// 短格式的日期
o = new Intl.DateTimeFormat('en' , { dateStyle: 'short'})
console.log(o.format(Date.now()))
// 10/6/20
 
 
// 中等格式的日期
o = new Intl.DateTimeFormat('en' , { dateStyle: 'medium'})
console.log(o.format(Date.now()))
// Oct 6, 2020
 
 
// 长格式的日期
o = new Intl.DateTimeFormat('en' , { dateStyle: 'long'})
console.log(o.format(Date.now()))
// October 6, 2020

参考文章

• JavaScript ES2021 中激动人心的特性
• MDN文档
• ES2021 带来的新特性