分享 5 个你现在就能用上的 Js ES12 新特性（数字分隔符replaceAll()Promise.any()......）

Posted 2022-01-07 前端不释卷leo

ECMAScript 2021（第 12 版）现已可用，并附带新功能和语法改进。ECMA International 已于 2021 年 6 月 22 日最终确定了这些规范。实施这些改进是为了使 javascript 更加健壮并帮助开发人员轻松完成任务。

以下详细展示 ECMAScript 2021 提供的前 5 项功能，以便你可以开始在你的项目中使用它们，并改善你的 JavaScript 体验。初学者和有经验的开发人员可以从本文中受益。

ECMAScript 2021 更新提供的 5 大 JavaScript 功能：

• 数字分隔符

• String.prototype.replaceAll

• Promise.any() 和 AggregateError

• 逻辑赋值运算符

• 私有类方法和访问器 

1、数字分隔符

数字分隔符允许你在文字数字的数字之间添加下划线，这使它们更具可读性。当文件被解析时，这些下划线将被自动去除。

let n1 = 1_000_000_000;
console.log(n1);     // 1000000000

let n2 = 1_000_000_000.150_200
console.log(n2);     // 1000000000.1502

let n3 = 0x95_65_98_FA_A9
console.log(n3);     // 641654651561

let n4 = 155_326_458_156_248_168_514n
console.log(n4);     // 155326458156248168514n

 2、String.prototype.replaceAll

String 原型上的 replaceAll() 函数允许替换子字符串的所有实例，而无需使用正则表达式。如果在字符串上使用了 thereplace()，它只会替换该值的第一个实例。

另一方面，replaceAll() 提供替换该值的所有实例的功能。

const orgStr = 'JavaScript is very cool,and JavaScript is very good';

// 使用replace替换一个"JavaScript"
let newStr = orgStr.replace('JavaScript', 'TypeScript');
console.log(newStr);     // TypeScript is very cool,and JavaScript is very good

// 使用replace替换所有"JavaScript"
let newStr1 = orgStr.replace(/JavaScript/g, 'TypeScript');
console.log(newStr1);    // TypeScript is very cool,and TypeScript is very good

// 使用replaceAll替换所有"JavaScript"
let newStr2 = orgStr.replaceAll('JavaScript', 'TypeScript');
console.log(newStr2);    // TypeScript is very cool,and TypeScript is very good

3、Promise.any() 和 AggregateError

Promise.any 与 Promise.all() 正好相反。如果任何承诺得到解决， Promise.any() 将被触发。

另一方面， Promise.all() 将等到所有承诺都得到解决。以下是 any()、all() 和 allSettled() 的区别。

any() — 如果至少有一个承诺被解决，这将执行，如果所有承诺都被拒绝，则将拒绝。即哪个resolve快就执行哪个。

all() — 如果所有承诺都得到解决，这将执行，如果至少一个承诺被拒绝，则将拒绝。

allSettled() — 如果所有承诺都已解决或被拒绝，这将执行。

// 创建一个Promise
const promise1 = new Promise((resolve, reject) => 
    // 2秒后resolve()
    setTimeout(() => resolve("The first promise has been resolved."), 2000);
);

// 创建一个Promise
const promise2 = new Promise((resolve, reject) => 
    // 1秒后resolve()
    setTimeout(() => resolve("The second promise has been resolved."), 1000);
);

// 创建一个Promise
const promise3 = new Promise((resolve, reject) => 
    // 3秒后resolve()
    setTimeout(() => resolve("The third promise has been resolved."), 3000);
);

(async function () 
    const data = await Promise.any([promise1, promise2, promise3]);
    // promise2最短时间resolve()
    console.log(data);     // The second promise has been resolved.
)();

如果所有 Promise 都被拒绝，则会抛出 AggregateError 异常。

// 创建一个Promise
const promise1 = new Promise((resolve, reject) => 
    // 1s后reject()
    setTimeout(() => reject("The first promise has been rejected."), 1000);
);

// 创建一个Promise
const promise2 = new Promise((resolve, reject) => 
    // 0.5s后reject()
    setTimeout(() => reject("The second promise has been rejected."), 500);
);

// 处理异常
(async function () 
    try 
        const data = await Promise.any([promise1, promise2]);
        console.log(data);
     catch (error) 
        // 如果所有的Promise都是reject()
        // 捕获aggregate errors.
        console.log("Error: ", error);
    
)();

4、逻辑赋值运算符

ECMAScript 2021 更新中引入了三个逻辑赋值运算符。这些提供了逻辑运算符和赋值表达式的组合。

• 逻辑 OR 赋值运算符 ||=

• 逻辑与赋值运算符 &&=

• 空合并赋值运算符 ??=

4.1、 逻辑 OR 赋值运算符

逻辑 OR 赋值运算符 ||= 接受两个操作数，如果左操作数为假，则将右操作数分配给左操作数。

let myPlaylist = songsCount: 0, songs:[];
// 如果myPlaylist.songsCount不存在，或布尔值为false，如false，0，null，undefined，则赋值100
myPlaylist.songsCount ||= 100;
console.log(myPlaylist);     // songsCount: 100, songs: Array(0)

逻辑 OR 赋值运算符短路。此运算符 ||= 等效于以下使用逻辑 OR 运算符的语句。

let myPlaylist = songsCount: 0, songs:[];
myPlaylist.songsCount || (myPlaylist.songsCount = 100);

4.2、逻辑 AND 赋值运算符

如果左操作数为真，逻辑 AND 赋值运算符 &&= 仅将右操作数分配给左操作数。

let myPlaylist = songsCount: 10, songs:[];
// 如果myPlaylist.songsCount存在且布尔值为true（或等效true），则赋值100
myPlaylist.songsCount &&= 100;
console.log(myPlaylist);     // songsCount: 100, songs: Array(0)

逻辑 AND 赋值运算符也会短路。此运算符 &&= 等效于以下使用逻辑 AND 运算符的语句。

let myPlaylist = songsCount: 10, songs:[];
myPlaylist.songsCount && (myPlaylist.songsCount = 100);

4.3、空合并赋值运算符

如果左操作数为空或未定义，则空合并赋值运算符 ??= 仅将右操作数分配给左操作数。

let userDetails = firstname: 'Katina', age: 24
//如果userDetails.lastname为空或者未定义，则赋值'Dawson'
userDetails.lastname ??= 'Dawson';
console.log(userDetails);     // firstname: 'Katina', age: 24, lastname: 'Dawson'

空合并赋值运算符也会短路。此运算符 ??= 等效于以下使用空值合并运算符的语句。

let userDetails = firstname: 'Katina', age: 24
userDetails.lastname ?? (userDetails.lastname = 'Dawson');

5、私有类方法和访问器

默认情况下，类方法和属性是公共的，但可以使用哈希 # 前缀创建私有方法和属性。ECMAScript 2021 更新已强制执行隐私封装。

这些私有方法和属性只能从类内部访问。

// 创建一个User类
class User 
    constructor() 
    // 私有属性或方法用#修饰
    #generateAPIKey() 
        return "666888999";
    
    getAPIKey() 
        // 获取私有属性或方法，#不能省略
        return this.#generateAPIKey();
    

const user = new User();
const userAPIKey = user.getAPIKey();
console.log(userAPIKey);     // 666888999

私有访问器是——私有的 Getter 和 Setter。Getter 允许你获取类属性的值，而 Setter 允许你为类属性分配值。你可以使用哈希 # 前缀定义私有 getter。

get #newAccountPassword() 

同样，你可以使用哈希 # 前缀定义私有 setter。

set #generateAccountPassword(newPassword) 

以下举例如何使用私有 Getter 与 Setter。

// 创建一个Str类
class Str 
    // 私有属性
    #uniqueStr;
    constructor() 
    // 私有Setter
    set #generateUniqueStringByCustomLength(length) 
        const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let randomStr = "";
        for (let i = 0; i < length; i++) 
            const randomNum = Math.floor(Math.random() * characters.length);
            randomStr += characters[randomNum];
        
        this.#uniqueStr = randomStr;
    
    // 公共Setter
    set setRandomString(length) 
        this.#generateUniqueStringByCustomLength = length;
    

    // 私有Getter
    get #fetchUniqueString() 
        return this.#uniqueStr;
    
    // 公共Getter
    get getRandomString() 
        return this.#fetchUniqueString;
    


const str = new Str();
str.setRandomString = 10;    //调用公共Setter

const uniqueStr = str.getRandomString;      //调用公共Getter
console.log(uniqueStr); 

以上特性已可以直接使用，不妨在你项目里试试。