ES2018 （ES9）新特性

ES2018 （ES9）新特性

ES2018（ES9）新增了如下几个特性👇：

• Async iterators 异步迭代器
• Object rest properties 对象的剩余属性
• Object spread properties 对象扩展属性
• Promise.prototype.finally
• 正则表达式命名捕获组

一、Async iterators 异步迭代器

Async iterator 对象的 next() 方法返回一个 Promise，这个 Promise 的返回值可以被解析成 {value, done} 的格式。

1.1 语法

iterator.next().then(({value, done}) => {})

1.2 案例演示

const asyncIterator = () => {
  const array = ['a', 'b'];
  return {
    next: function () {
      if (array.length) {
        return Promise.resolve({
          value: array.pop(),
          done: false,
        });
      }
      return Promise.resolve({
        done: true,
      });
    },
  };
};

let iterator = asyncIterator();

const test = async () => {
  await iterator.next().then(console.log); 
  await iterator.next().then(console.log); 
  await iterator.next().then(console.log); 
};

test();

// { value: 'b', done: false }
// { value: 'a', done: false }
// { done: true }

ES2018引入异步迭代器，就像常规迭代器，除了next()方法返回一个Promise之外，还可以调用await和for...of循环一起使用，以串行的方式运行异步操作。例如：

const promises = [
  new Promise((resolve) => resolve(1)),
  new Promise((resolve) => resolve(2)),
  new Promise((resolve) => resolve(3)),
];

const test = async () => {
  for await (const p of promises) {
    console.log("result=", p);
  }
};

test();

// result= 1
// result= 2
// result= 3

二、Object Rest 属性

ES2015 引入了用于数组的 Rest 参数和扩展运算符

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

ES2018 为对象解构提供了和数组一样的 Rest 参数和展开操作符（ ... ）。

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
};

let { a, ...y } = obj;

console.log(a); // 1
console.log(y); // { b: 2, c: 3, d: 4 }

【说明】
上述代码中，在对对象 obj 解构时，我们可以利用 Rest 属性将剩余未解构的部分表示出来，其中 y 就是剩余未解构的部分。
【注意】

• null 不能使用扩展运算符

// 在对 null 解构时不能使用扩展运算符
let {a, b, ...rest} = null;    // ❌

对象解构中的 Rest 参数跟数组一样只能在声明的结尾处使用；而且它只是用于每个对象的顶层，如果对象中嵌套对象则无法适用；扩展运算符可以在其他对象内使用。

三、Object Spread 属性

Spread 属性可以利用展开操作符对对象进行扩展（例如：对象合并），然后返回扩展后的新对象。

let obj = {
  a: 1,
  b: 2,
};
let test = null;
let result = { c: 3, ...obj, ...test };
console.log(result); // { c: 3, a: 1, b: 2 }

四、Promise.prototype.finally

在 Promise 结束的时候，不管是结果是 resolved 还是 rejected，都会调用 finally 中的方法，finally 中的回调函数不接受任何参数。

4.1 语法

const promise = new Promise((resolve, reject) => {
  resolve('resolved');
  reject('rejectd');
})

promise.then((res) => {
  console.log(res);
}).finally(() => {
  console.log('finally')
});

4.2 用法演示

const promise = new Promise((resolve, reject) => {
  resolve(1);
  reject(2);
});

const test = () => {
  console.log(3);
  promise.then((res) => {
    console.log(4, res);
  }).catch(err => {
    console.log(5, err);
  }).finally(() => {
    console.log(6);
  });
};

test();  // 3 4 1 6

五、正则表达式命名捕获组

ES2018 允许命名捕获组使用符号?<name>，在打开捕获括号后立即命名，示例如下：

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

// 任何匹配失败的命名组都将返回undefined