ES9、ES10特性

ES9新特性

异步迭代

ES2018引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了next()方法返回一个Promise。因此await可以和for...of循环一起使用,以串行的方式运行异步操作。

async function process(array) {
  for await (let i of array) {
    doSomething(i);
  }
}

Promise.finally()

一个Promise调用链要么成功到达最后一个.then(),要么失败触发.catch()。在某些情况下,你想要在无论Promise运行成功还是失败,运行相同的代码,例如清除,删除对话,关闭数据库连接等。

. finally() 允许你指定最终的逻辑:

function doSomething() {
  doSomething1()
  .then(doSomething2)
  .then(doSomething3)
  .catch(err => {
    console.log(err);
  })
  .finally(() => {
    // finish here!
  });
}

Rest/Spread 属性

Rest参数语法允许我们将一个布丁( 不定)数量的参数表示为一个数组。

restParam(1, 2, 3, 4, 5);

function restParam(p1, p2, ...p3) {
  // p1 = 1
  // p2 = 2
  // p3 = [3, 4, 5]
}

为对象解构提供了和数组一样的Rest参数()和展开操作符.

const myObject = {
  a: 1,
  b: 2,
  c: 3
};

const { a, ...x } = myObject;
// a = 1
// x = { b: 2, c: 3 }

正则表达式命名捕获组

ES2018允许命名捕获组使用符号 ? 在打开捕获括号(后立即命名,示例如下:

const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  match  = reDate.exec('2018-04-30'),
  year   = match.groups.year,  // 2018
  month  = match.groups.month, // 04
  day    = match.groups.day;   // 30

任何匹配失败的命名组都将返回undefined;
正则表达式反向断言(lookbehind)
先行断言(lookahead):这意味着匹配会发生,但不会有任何捕获,并且断言没有包含在整个匹配字段中

const
  reLookahead = /\D(?=\d+)/,
  match       = reLookahead.exec('$123.89');

console.log( match[0] ); // $

反向断言(lookbehind):注意尖括号

const
  reLookbehind = /(?<=\D)\d+/,
  match        = reLookbehind.exec('$123.89');

console.log( match[0] ); // 123.89

以上是 肯定反向断言,非数字\D必须存在。同样的,还存在 否定反向断言,表示一个值必须不存在,例如:注意感叹号

const
  reLookbehindNeg = /(?<!\D)\d+/,
  match           = reLookbehind.exec('$123.89');

console.log( match[0] ); // null

ES10新特性

新的基本数据类型 BigInt

其中数据类型:String、Number、Boolean、Null、Undefined、Symbol、BigInt

将导入分配给变量

element.addEventListener('click', async() => {
  const module = await import(`./api-scripts/button-click.js`);
  module.clickEvent();
})

Array.flat()

扁平化多维数组

let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
multi.flat();               // [1,2,3,4,5,6,Array(4)]
multi.flat().flat();        // [1,2,3,4,5,6,7,8,9,Array(3)]
multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]
multi.flat(Infinity);       // [1,2,3,4,5,6,7,8,9,10,11,12]

Array.flatMap()

let array = [1, 2, 3, 4, 5];
array.flatMap(v => [v, v * 2]); 
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

Object.fromEntries()

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

而 Object.fromEntries() 则是 Object.entries() 的反转。

通过 Object.fromEntries, 可以将 Map 转化为 Object:

const map1 = new Map([['foo','bar'],['baz',42]])
const obj122 = Object.fromEntries(map1)
obj1
//{foo: "bar", x: 41}

通过 Object.fromEntries, 可以将 Array 转化为 Object:

var obj32 = Object.fromEntries(arr1)
var obj32 = Object.fromEntries(arr21)
obj32
//{0: "a", 1: "b", 2: "c"}

String.trimStart() 与 String.trimEnd()

let greeting = "     Space around     ";
greeting.trimEnd();   // "     Space around";
greeting.trimStart(); // "Space around     ";

Function.prototype.toString()现在返回精确字符,包括空格和注释

头部和尾部的注释不显示

修改 catch 绑定

之前是try {}catch(e){}

现在是try {}catch{}