首页 > 其他分享> > 02.es2021新特性补充（整理）

02.es2021新特性补充（整理）

2021-09-30 09:32:31 作者：互联网

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"  
//可以不用写正则表达式

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;

 注意


a = a || b; // 与 a ||= b 不等价
a = a && b; // 与 a &&= b 不等价
a = a ?? b; // 与 a ??= b 不等价

不等价的原因在于，无论上面的每个逻辑表达式结果如何，都会进行赋值运算；而逻辑赋值运算符只会在条件成立的情况下进行赋值

let x = 0;const obj = {
  get x() {
    return x;
  },
  
  set x(value) {
    console.log('setter called');
    x = value;
  }};


// This always logs "setter called"
obj.x += 1;assert.equal(obj.x, 1);


// Logical operators do not call setters unnecessarily
// This will not log.
obj.x ||= 2;assert.equal(obj.x, 1);


// But setters are called if the operator does not short circuit
// "setter called"
obj.x &&= 3;assert.equal(obj.x, 3);

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

应用场景

Promise.all 一个失败，就是失败，有成功也是失败

Promise.any一个成功，就是成功，有失败也是成功

Promise.race谁快算谁的，不管成功或者失败，第一个结果就是最终结果。可以处理超时

4.数学分割符

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

// 8888888888 不易辨识 const count1 = 8888888888; // 8_888_888_888 很直观 const count2 = 8_888_888_888; console.log(count1 === count2); // true

5.weakEef

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 }

正确使用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.i ntl.DateTimeFormat

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

8逗号运算符

逗号运算符只返回最后一个值

let a=1+2+3+4,5 //5

标签：02,console,log,format,Intl,es2021,特性,new,obj
来源： https://blog.csdn.net/qq_45555960/article/details/120560415