第十节：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 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
