ECMAScript 2021 (es2020)

专栏目录请点击

replaceAll

他用来替换所有匹配的字符串

在没有这个方法前，替换全部的字符串，我们一般都这样处理

const str = "student is a real student";
const newStr = str.replace(/student/g, "hahaha");
console.log(newStr); // hahaha is a real hahaha
1
2
3

有了这个方法之后，我们可以直接这样

const str = "student is a real student";
const newStr = str.replaceAll('student', "hahaha");
console.log(newStr); // hahaha is a real hahaha
1
2
3

Promise.any

他和promise.all类似，他也接收一个promise数组

• 只要有一个resolve了，他就返回resolve的那个值
• 只有所有的promise都reject了，他才会reject

成功的操作

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000));
});
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000));
});
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000));
});

(async function () {
    const result = await Promise.any([p1, p2, p3]);
    console.log(result); // 输出结果可能是 "A", "B" 或者 "C"
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

失败的操作

try {
    (async function () {
        const result = await Promise.any([p]);
        console.log(result);
    })();
} catch (error) {
    console.log(error.errors); // AggregateError: All promises were rejected
}
1
2
3
4
5
6
7
8

??=、&&=、 ||=

??操作符的优点

// 逻辑运算符 ??=、&&=、 ||=
const num = 0
const res1 = num || 4
const res2 = num ?? 4
console.log(res1); // 4
console.log(res2); // 0
1
2
3
4
5
6

• 使用||他会将||左边的值先转化为布尔值，如果为false，他就会取后面的值
• 但是??不会转化为布尔值，如果有值那怕是0，也会取0
• 上面的三个运算符都相当于语法糖，下面我们来进行解释

??=

// ??=
let a 
const b = 20
// 相当于 a = a ?? b
a ??= b
console.log(a); // 20
1
2
3
4
5
6

&&=

// &&=
let a = 10
const b = 20
// 相当于 a = a && b
a &&= b
console.log(a); // 20
1
2
3
4
5
6

||=

// ||=
let a = 0
const b = 20
// 相当于 a = a || b
a ||= b
console.log(a); // 20
1
2
3
4
5
6

WeakRef

• 他会拿到一个对象的弱引用，弱引用不会阻止垃圾回收这个对象
• 在引用对象被回收后，函数返回undefined

const target = { hello: "world" }
// 拿到对象的弱引用
const wr = new WeakRef(target)
console.log(wr);
1
2
3
4

数字分割符

当数字的长度太长的时候，可以使用下划线将数字分开，便于阅读

const num = 1234_0000_0000
console.log(num); // 123400000000
1
2

Intl

Intl对象是ES国际化API的一个命名空间，他提供了精确的字符串对比、数字格式化和日期格式化

MDN

Intl.ListFormat

他是专门用来处理和多语言相关的对象格式化的操作

语法

new Intl.ListFormat([locales[,options]])
1

返回处理过后的字符串

options 配置项：

zh-CN 表示用在中国大陆区域的中文。包括各种大方言、小方言、繁体、简体等等都可以被匹配到。
zh-Hans 表示简体中文。适用区域范围是全宇宙用中文简体的地方，内容包括各种用简体的方言等。

例子

const formatter = new Intl.ListFormat()
const _str = ["苹果", "香蕉", "菠萝"]

console.log(formatter.format(_str)); // 苹果、香蕉和菠萝


let strArr = ["xiaoming", "小明", "小红", "XXMM"];

let EnForm = new Intl.ListFormat("en", {
    localeMatcher: 'lookup',
    style: 'short',
    type: 'disjunction'
}).format(strArr);

console.log(EnForm); // xiaoming, 小明, 小红, or XXMM

let cnForm = new Intl.ListFormat("zh-cn", {
    localeMatcher: 'lookup',
    style: 'short',
    type: 'disjunction'
}).format(strArr);

console.log(cnForm); // xiaoming、小明、小红或XXMM
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Intl.DateTimeFormat

可以用来处理多语言下的时间日期格式化函数，他与moment.js类似

语法

new Intl.DateTimeFormat([locales[, options]])
1

参数

options 配置项

只想取 年月日+时间

精确用法（不用写上面两项）

用于获取 公元+星期+年月日+时间

例子

不传任何参数

let date = new Date()
console.log(new Intl.DateTimeFormat().format(date)); // 2022/11/13
1
2

有参数

let date = new Date();
let options = {
    year: "numeric",
    month: "numeric",
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    hour12: false, //是否为 12 小时制
}
console.log(new Intl.DateTimeFormat("de-DE", options).format(date)); //  Freitag, 5. August 2022   de-DE(德语)
console.log(new Intl.DateTimeFormat("zh-cn", options).format(date)) // 2022年11月 14:56:49
1
2
3
4
5
6
7
8
9
10
11

• hour12:是否为12小时制

era

用来显示公元

Intl.RelativeTimeFormat()

处理时间格式，一般转化为昨天、前天、几年前等

语法

new Intl.RelativeTimeFormat([locales[, options]])
1

options 配置项

例子

const tf = new Intl.RelativeTimeFormat("zh-cn");
console.log(tf.format(-10, "year" )) // 十年前
console.log(tf.format(10, "year" )) // 十年后
1
2
3

format传入的参数

https://blog.csdn.net/weixin_50339217/article/details/126144083