第十节：ES11之String、Dynamic、BigInt、allSettled、globalThis、Optional chaining、Nulish coalescing Operator

一. String扩展

 1. matchAll()方法

　　matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器

matchAll之前，还有exec、match、replace等

function selectDiv(regExp, str) {
    let matches = []
    for (let match of str.matchAll(regExp)) {
        matches.push(match[1])
    }
    return matches
}
const res = selectDiv(regExp, str)
console.log(res)

二. Dynamic Import

　按需 import 提案几年前就已提出，如今终于能进入ES正式规范。这里个人理解成“按需”更为贴切。现代前端打包资源越来越大，打包成几M的JS资源已成常态，而往往前端应用初始化时根本不需要全量加载逻辑资源，为了首屏渲染速度更快，很多时候都是按需加载，比如懒加载图片等。而这些按需执行逻辑资源都体现在某一个事件回调中去加载

const oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', () => {
    import('./ajax').then(mod => {
        // console.log(mod)
        mod.default('static/a.json', res => {
            console.log(res)
        })
    })
})

 PS：当然，webpack目前已很好的支持了该特性。Vue中也已使用Dynamic Import实现组件的动态导入。

三. BigInt

　在 ES11 增加了新的原始数据类型：BigInt，表示一个任意精度的整数，可以表示超长数据，可以超出2的53次方。

　Js 中 Number类型只能安全的表示-(2^53-1)至 2^53-1 范的值

使用 BigInt 有两种方式：

方式一：数字后面增加n

const bigInt = 9007199254740993n
console.log(bigInt)
console.log(typeof bigInt) // bigint

console.log(1n == 1) // true
console.log(1n === 1) // false

方式二：使用 BigInt 函数

const bigIntNum = BigInt(9007199254740993n)
console.log(bigIntNum)

四. Promise扩展

allSettled方法

ES11之前

　 Promise.all() 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise直接进入 reject 状态。

案例：

　现在页面上有三个请求，分别请求不同的数据，如果一个接口服务异常，整个都是失败的，都无法渲染出数据

Promise.all([
    Promise.reject({
        code: 500,
        msg: '服务异常'
    }),
    Promise.resolve({
        code: 200,
        data: ['1', '2', '3']
    }),
    Promise.resolve({
        code: 200,
        data: ['4', '5', '6']
    })
]).then(res => {
    console.log(res)
    console.log('成功')
}).catch(err => {
    console.log(err)
    console.log('失败')
})

ES11 

　 我们需要一种机制，如果并发任务中，无论一个任务正常或者异常，都会返回对应的的状态

Promise.allSettled([
    Promise.reject({
        code: 500,
        msg: '服务异常'
    }),
    Promise.resolve({
        code: 200,
        data: ['1', '2', '3']
    }),
    Promise.resolve({
        code: 200,
        data: ['4', '5', '6']
    })
]).then(res => {
    console.log(res)
    // console.log('成功')
    const data = res.filter(item => item.status === 'fulfilled')
    console.log(data)
}).catch(err => {
    console.log(err)
    console.log('失败')
})

五. globalThis

1. 背景

ES11之前获取全局对象，通常是封装一个方法来实现： 

const getGlobal = () => {
    if (typeof self !== 'undefined') {
        return self
    }
    if (typeof window !== 'undefined') {
        return window
    }
    if (typeof global !== 'undefined') {
        return global
    }
    throw new Error('无法找到全局对象')
}

const globals = getGlobal()
console.log(globals)

2. ES11

　 ES11中的globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象（也就是全局对象自身）。不像 window 或者 self 这些属性，它确保可以在有无窗口的各种环境下正常工作。所以，你可以安心的使用 globalThis，不必担心它的运行环境。为便于记忆，你只需要记住，全局作用域中的 this 就是 globalThis。

console.log(globalThis)

六. 可选链

 　可让我们在查询具有多层级的对象时，不再需要进行冗余的各种前置校验。

const user = {
    address: {
        street: 'xx街道',
        getNum() {
            return '80号'
        }
    }
}

ES11之前，需要做很多前置运算

const street = user && user.address && user.address.street
const num = user && user.address && user.address.getNum && user.address.getNum()
console.log(street, num)

ES11，简化代码

const street2 = user?.address?.street
const num2 = user?.address?.getNum?.()
console.log(street2, num2)

PS：可选链中的 ? 表示如果问号左边表达式有值, 就会继续查询问号后面的字段。根据上面可以看出，用可选链可以大量简化类似繁琐的前置校验操作，而且更安全。

七. 空值合并运算符

 　空值合并运算符（??）是一个逻辑运算符。当左侧操作数为 null 或 undefined 时，其返回右侧的操作数。否则返回左侧的操作数。

ES11之前

const b = 0 // 或者null undefined false
const a = b || 5
console.log(a)

ES11

　空值合并运算符 ?? 我们仅在第一项为 null 或 undefined 时设置默认值

// false 0  无效
const a = b ?? 123
console.log(a)

 

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。