ES2020尝鲜

matchAll

g表示全局模式，即模式将应用于所有字符串，而非在发现第一个匹配项就立即停止

const string = 'cat, bat, sat, fat';
const regex = /at/;
console.log(string.match(regex))
// [ 'at', index: 1, input: 'cat, bat, sat, fat', groups: undefined ]

match在只要一个匹配项的时候，会返回匹配项和匹配项的详细信息

const string = 'cat, bat, sat, fat';
const regex = /at/g;
console.log(string.match(regex))
// [ 'at', 'at', 'at', 'at' ]

match在有多个匹配项的时候，只会返回匹配项内容

如果要在多个匹配项中也有详细信息，那么就要使用replace做聚合处理

const string = 'cat, bat, sat, fat';
const regex = /at/g;

let result = []
string.replace(regex, function () {
  result.push(arguments)
})
console.log(result)

最后结果

[ [Arguments] { '0': 'at', '1': 1, '2': 'cat, bat, sat, fat' },
  [Arguments] { '0': 'at', '1': 6, '2': 'cat, bat, sat, fat' },
  [Arguments] { '0': 'at', '1': 11, '2': 'cat, bat, sat, fat' },
  [Arguments] { '0': 'at', '1': 16, '2': 'cat, bat, sat, fat' } ]

这样还是很麻烦，所以ES2020就有个新的API，就是String.prototype.matchAll，通过执行这个方法可以达到上面同样的效果。

const string = 'cat, bat, sat, fat';
const regex = /at/g;

let result = string.matchAll(regex)
console.log(result)

import()

这个是动态导入，很多小伙伴已经使用过了 ，就是常说的模块懒加载。import()执行返回的是promise形式。

const moduleSpecifier = './utils.js';
import(moduleSpecifier).then((module) => {
  module.doStuff1(); // 模块的方法1
  module.doStuff2(); // 模块的方法1
})

Promise.allSettled

我们都知道Promise.all是所有结果都成功才会返回成功，如果失败了没法得到正确的结果。

const p1 = new Promise(resolve => resolve('结果1'))
const p2 = new Promise((_, reject) => reject('出错了'))
const p3 = new Promise(resolve => resolve('结果3'))

Promise.all([p1, p2, p3]).then((response) => {
  console.log(response)
}, (error) => {
  console.log(error) // 出错了
})

但是如果又想收集成功的结果又想收集失败的结果，我们就没办法了，那么就可以使用最新的一个API，Promise.allSettled

const p1 = new Promise(resolve => resolve('结果1'))
const p2 = new Promise((_, reject) => reject('出错了'))
const p3 = new Promise(resolve => resolve('结果3'))

Promise.allSettled([p1, p2, p3]).then((response) => {
  console.log(response)
  // [
  //  {status: 'fulfilled', value: '结果1'}
  //  {status: 'rejected', value: '出错了'}
  //  {status: 'fulfilled', value: '结果2'}
  // ]
}, (error) => {
  console.log(error)
})

globalThis

全局对象

运算符

const values = {
  undefinedValue: undefined,
  nullValue: null,
  numberValue: 400,
  zeroValue: 0,
  emptyText: '',
  falseValue: false
}

const undefinedValue = values.undefinedValue || '默认值1' // 默认值1
const nullValue = values.nullValue || '默认值2' // 默认值2
const numberValue = values.numberValue || '默认值3' // 400
const zeroValue = values.zeroValue || '默认值4' // 默认值4
const emptyText = values.emptyText || '默认值5' // 默认值5
const falseValue = values.falseValue || '默认值6' // 默认值6

验证undefined和null两种

const values = {
  undefinedValue: undefined,
  nullValue: null,
  numberValue: 400,
  zeroValue: 0,
  emptyText: '',
  falseValue: false
}

const undefinedValue = values.undefinedValue ?? '默认值1' // 默认值1
const nullValue = values.nullValue ?? '默认值2' // 默认值2
const numberValue = values.numberValue ?? '默认值3' // 400
const zeroValue = values.zeroValue ?? '默认值4' // 0
const emptyText = values.emptyText ?? '默认值5' // ''
const falseValue = values.falseValue ?? '默认值6' // false

属性存不存在

const book = {
  entitles: {
    hashtags: ['Angular']
  }
}

const hashtags = book.entitles && book.entitles.hashtags
// 如果book.entitles属性存在才可以获取对象里面的属性
const hasTags = book.entitles?.hashtags

const book = document.querySelector('input[name=book]')
const value  = book ? book.vaue : undefined;
// 使用最新语法
const value = document.querySelector('input[name=book]')?.value