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

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

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

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

失败的操作

try {
    (async function () {
        const result = await Promise.any([p]);
        console.log(result);
    })();
} catch (error) {
    console.log(error.errors); // AggregateError: All promises were rejected
}

??=、&&=、 ||=

??操作符的优点

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

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

??=

// ??=
let a 
const b = 20
// 相当于 a = a ?? b
a ??= b
console.log(a); // 20

&&=

// &&=
let a = 10
const b = 20
// 相当于 a = a && b
a &&= b
console.log(a); // 20

||=

// ||=
let a = 0
const b = 20
// 相当于 a = a || b
a ||= b
console.log(a); // 20

WeakRef

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

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

数字分割符

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

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

Intl

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

MDN

Intl.ListFormat

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

语法

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

返回处理过后的字符串

name	type	是否可选	默认项	描述
locales	string	是	-	符合 BCP 47 语言标注的字符串或字符串数组。en 英文 / zh-CN 中文环境
options	Object	是	-	拥有下面所列属性中任意几个或全部的对象。

options 配置项：

name	type	是否可选	默认项	描述
localeMatcher	string	是	lockup	指定要使用的本地匹配算法。可选参数：‘best fit’ / lockup
type	string	是	conjunction	消息输出的格式。可选参数：disjunction / unit / conjunction ,
style	string	是	long	被格式化消息的长度。可选参数：long / short /narrow , 当 type:unit 时，style 只能取 narrow

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

Intl.DateTimeFormat

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

语法

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

参数

name	type	是否可选	默认项	描述
locales	string	是	-	符合 BCP 47 语言标注的字符串或字符串数组。en 英文 / zh-CN 中文环境
options	Object	是	-	拥有下面所列属性中任意几个或全部的对象。

options 配置项

name	type	是否可选	默认项	描述
localeMatcher	string	是	best fit	使用的 local 的匹配算法。可选参数：lookup / best fit

只想取 年月日+时间

name	type	是否可选	默认项	描述
timeStyle	string	是	-	时间格式的长度，可选参数：short / medium / long
dateStyle	string	是	-	日期格式的长度，可选参数：short / medium / long，zh-cn 格式下取哪个都一样

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

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

name	type	是否可选	默认项	描述
weekday	string	是	-	星期几。可选参数：narrow / short / long，zh-cn 转换成 星期，en 转换成数字
era	string	是	-	公元。可选参数：narrow / short / long，zh-cn 转换成 公元
year	string	是	-	年。根据语言转换格式，可选参数：numeric / 2-digit，zh-cn 转换成 年
month	string	是	-	月。可选参数：numeric / 2-digit / narrow / short / long
day	string	是	-	日。可选参数：numeric / 2-digit
hour	string	是	-	小时。可选参数：numeric / 2-digit
minute	string	是	-	分钟。可选参数：numeric / 2-digit
second	string	是	-	秒。可选参数：numeric / 2-digit
timeZoneName	string	是	-	时区名称展示方式。可选参数：short / long

例子

不传任何参数

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

有参数

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

• hour12:是否为12小时制

era

用来显示公元

Intl.RelativeTimeFormat()

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

语法

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

name	type	是否可选	默认项	描述
locales	string	是	-	符合 BCP 47 语言标注的字符串或字符串数组。en 英文 / zh-CN 中文环境
options	Object	是	-	拥有下面所列属性中任意几个或全部的对象。

options 配置项

name	type	是否可选	默认项	描述
numeric	string	是	always	返回字符串是数字显示还是文字显示, always 总是文字显示 / auto 自动转换
style	string	是	long	返回字符串的风格，可选参数：long / short / narrow
localeMatcher	string	是	best fit	表示匹配语言参数的算法， 可选参数：best fit / lookup

例子

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

format传入的参数

name	type	是否描述选
year	string	年，根据语言转换格式，zh-cn 转换成 年
month	string	月
quarter	string	季度
week	string	周
day	string	天
hour	string	小时
minute	string	分钟
second	string	秒

https://blog.youkuaiyun.com/weixin_50339217/article/details/126144083