登录
原创

ES11-新特性

发布于 2021-11-15 阅读 88
  • 前端
  • ECMAScript 6
原创

1. matchAll()

结合正则表达式一起使用,可以匹配一个字符串中所有满足正则规则的子串,匹配到的的结果为数组

注意:使用正则表达式一定要有 全局匹配修饰符 g

2. 动态导入

使用某模块时,才将该模块的js导入,应用场景如- - -vue的路由懒加载

3. 新的原始数据类型:BigInt

number类型最大的数值是:2^53 2的53次方 即 9007199254740992
如果写了比 2^53 的数,存储的结果也是 2^53

新增的 BigInt 类型可以存储比这个范围更大的数字,使用该类型方法是 - - - 数字后面加 n
或者 BigInt()

eg:

const max = 2 ** 53
console.log(max)

console.log(Number.MAX_SAFE_INTEGER)

console.log(max + 1)
console.log(max === max + 1)

const num = 9007199254740993
console.log(num)
const bigInt = 9007199254740993n
console.log(bigInt)
console.log(typeof bigInt)

const bigInt2 = BigInt(9007199254740993n)
console.log(bigInt2)
console.log(typeof bigInt2)

const bigInt3 = BigInt(9007199254740993)
console.log(bigInt3)
console.log(typeof bigInt3)

console.log(bigInt + bigInt2)
console.log((bigInt + bigInt2).toString())

console.log(2n == 2)
console.log(2n === 2)

打印结果:

image.png

4. Promise.allSettled()

Promise.allSettled(arr) 的参数是一个数组,每个元素都是 Promise 对象,它的 then() 方法中会获取 所有 promise对象 的执行结果,

Promise.allSettled()和Promise.all()的区别

都是接收一个元素都为 Promise对象 的组数,

但是在使用 Promise.all() 时,只要有一个 promise对象执行结果失败,就会跳到返回失败的方法,即then() 的第二个方法err 或者 catch()方法,then()的第一个方法不会返回执行成功的结果信息

在使用Promise.allSettled()时,如果有 promise对象执行结果失败,还是可以在 then() 的里面 第一个方法中 接收到 promise对象执行结果信息,返回包含所有 promise对象执行结果 的一个数组,可以接收所有的结果,然后使用数组的 filter() 方法进行过滤,得到想要的结果集

eg:

Promise.allSettled(arrPromise).then(res => {
  // 过滤得到执行成功的   status状态:fulfilled- - -执行成功 rejected- - -执行失败 pending- - -正在执行中
  const data = res.filter(item => item.status === 'fulfilled')
  console.log(data)
})

5. 全局对象 globalThis

js 中全局对象可以 用 global、window、self 这三种表示,有时浏览器显示的全局对象名不同,要获取全局对象前,要先判断一下是哪一个名称,但是 使用 globalThis就可以直接获取到全局对象的名称

console.log(globalThis)

打印结果:
image.png

6. 可选链 ?.

如果是接收一个对象下面的数据,接收数据时经常需要进行判断每一层的数据是否存在

比如要接受一个对象的方法返回的数据,先要判断该对象是否存在,然后判断该对象的方法是否存在,再调用该方法
eg:

const res1 = user && user.getName $$ user.getName()
// 上面写法等效于下面
const res2 = user?.getName?.()

原始的方法就写的比较长,复杂一些,下面用可选链的方式就简洁很多

7. 空值合并运算符 ??

有的时候接受一个数据,如果没有接收到数据会给一个默认值,普通写法是用 ‘||’

const res = x || 6

但是 ‘||’ 前面如果是 0,false 都会返回后面的数,有时需要只有 null、undefined 才返回后面的默认设置值,其余的正常返回获取到的值,就可以用 空值合并运算符 ??
eg:

const a = 0
const res = a || 6   // 结果6
console.log(res)

const res2 = a ?? 6   // 结果0
console.log(res2)

const b = false
console.log(b || 5)   // 结果5
console.log(b ?? 5)   // 结果false

const c = undefined
console.log(c || 2)   // 结果2
console.log(c ?? 2)   // 结果2

打印结果:

image.png

评论区

零00
5粉丝

时光荏苒,我自清欢

0

0

0

举报