ES2020新增的实用语法/API

2,361 阅读1分钟

??

空值合并操作符(??):是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。详细

// 例子1

let name = null

let test = name ?? 'hahaha'

console.log(test) // hahaha

// 例子2

let name = null

let test = name ?? 'hahaha'

console.log(test) // hahaha

// 例子3

let name = '123'

let test = name ?? 'hahaha'

console.log(test) // 123

?.

可选链操作符( ?. ):允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。详细


// 例子1

let test = {
  person:{
    name:"xiaoming"
  }
}

let xm = test.data ?.name

console.log(xm) // undefined

// 例子2

let test = {
  person:{
    name:"xiaoming"
  }
}

let xm = test.person ?.name

console.log(xm) // xiaoming

globalThis

globalThis:是一个this的环境全局属性。详细


console.log(globalThis)

浏览器环境结果

node环境结果

Promise.allSettled()

Promise.allSettled():返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的promise结果。详细


// 例子1

let p1 = Promise.reject(1)

let p2 = Promise.resolve(2)

Promise.allSettled([p1,p2]).then(data=>{
  console.log(data) // [{status: "rejected", reason: 1},{status: "fulfilled", value: 2}]
})

// 例子2

let p1 = Promise.reject(1)

let p2 = Promise.reject(2)

Promise.allSettled([p1,p2]).then(data=>{
  console.log(data) // [{status: "rejected", reason: 1},{status: "rejected", reason: 2}]
})

// 例子3

let p1 = Promise.resolve(1)

let p2 = Promise.resolve(2)

Promise.allSettled([p1,p2]).then(data=>{
  console.log(data) // [{status: "fulfilled", value: 1},{status: "fulfilled", value: 2}]
})

import()

import(): js模块动态引入。详细


// 例子1
function test(){
  import('./xxxx').then(res=>console.log(res))
}

// 例子2
function test(){
 let res = await import('./xxxx')
 console.log(res)
}

String.prototype.matchAll

String.prototype.matchAll:返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。详细


const regexp = /t(e)(st)?/g

const str = 'test1te'

const array = [...str.matchAll(regexp)]

console.log(array) // [["test", "e", "st", index: 0, input: "test1te", groups: undefined],["te", "e", undefined, index: 5, input: "test1te", groups: undefined]]
// 匹配结果介绍:[结果,$1,$2,$3...]