ECMAScript 2021(ES12)正式写入 ECMAScript 标准，前沿新语法糖预习！

这是我参与更文挑战的第24天，活动详情查看： 更文挑战

前言

图源来自掘金资讯板块。

摸鱼仔的我11点到了公司，刚坐下打开浏览器开始摸鱼，打开掘金资讯板块后看到了上图的新闻。

积极学习（摸鱼）的我怎么能不学习下新功能呢！

ES12 前沿新功能

String.prototype.replaceAll

看函数名就能知道，在字符串替换时可以替换，再也不用写正则或者封装函数啦

const str = 'abbbbbbba'

const replaceResult = str.replace('a', 'c')
const replaceAllResult = str.replaceAll('a','c')

console.log(replaceResult) // 'cbbbbbbba'
console.log(replaceAllResult) // 'cbbbbbbbc'

新增逻辑赋值操作符 ||=, ??=, &&=

想来大佬们在写代码时，总会遇到需要判断变量的值是否存在的操作。

||= 操作符

当操作符左侧的值不存在时， 将右边值赋至左侧。

// 正常水平
if(!this.currentStudentId) this.currentStudentId = student.id 
// 简化后 
this.currentStudentId = this.currentStudentId || student.id 

// ||= 操作符 当左侧的值不存在时，将右边值赋至左侧。
let testNull = null
let testBool = false
let testNumber = 10 

testNull ||= 3 //  => testNull = 3 
testBool ||= 4 //  => testBool = 4
testNumber ||= 5 //=> testNumber = 10

&&= 操作符

当操作符左侧的值存在时， 将右边值赋至左侧。

// 正常水平
if(this.currentStudentId) this.currentStudentId = student.id 
// 简化后 
this.currentStudentId = this.currentStudentId && student.id 

// ||= 操作符 当左侧的值不存在时，将右边值附至左侧。
let testNull = null
let testBool = false
let testNumber = 10 

testNull &&= 3 //  => testNull = null
testBool &&= 4 //  => testBool = false
testNumber &&= 5 //=> testNumber = 5

??= 操作符

当操作符左侧的值为空值时，将右边值赋至左侧。

// 正常水平
if(isNull(this.currentStudentId)) this.currentStudentId = student.id 

// ||= 操作符 当左侧的值不存在时，将右边值附至左侧。
let testNull = null
let testBool = false
let testNumber = 10 

testNull ??= 3 //  => testNull = 3
testBool ??= 4 //  => testBool = false
testNumber ??= 5 //=> testNumber = 10

Promise.any()

Prmoise.any()有点和all()类似，它会返回第一个resolve且fullfilled也就是解决完成的Promise。

如果传入的Promises都reject了，则返回错误信息。

async getFirstResolve() {
    const promiseArr = [
        Promise.resolve(1),
        Promise.resolve(2),
    ]
    
    const result1 = await Promise.any(promiseArr)
    console.log(result1) // result1 => 1
    
    // 当第一个promise为reject时，返回的第一个resolve就变成了第二个了
    const promiseArrHasReject = [
        Promise.reject(1),
        Promise.resolve(2),
    ]
    
    const result2 = await Promise.any(promiseArrHasReject)
    console.log(result2) // result  => 2
    
     const promiseArrHasAllReject = [
        Promise.reject(1),
        Promise.reject(2),
    ]
    try {
           const result3 = await Promise.any(promiseArrHasAllReject)
    } catch (error) {
       console.error(error); 
       // AggregateError: All promises were rejected
    }
}

WeakRefs

WeakSet和WeakMap的小兄弟，使用弱引用对象，该弱引用不会阻止GC，并且可以在GC前使用 WeakRef.prototype.deref 解除该引用。

_分隔符

分割Number类型的值，以便于理解。

const money = 100_000_000
// 100,000,000 这样不用数零了，直接看分割符号就知道你有一个亿了。

最后

白白。