ES9 令人惊喜的新特性-FunTeaLearn Online Web Tutorials

ES9，全称为 ECMAScript 2018，发布于 2018 年 6 月份。相较于此前的版本，ES9 的更新内容比较少，但是其中有一些特性仍然非常值得我们关注。本文就来详细介绍 ES9 中令人惊喜的新特性。

1、Promise.prototype.finally()

在 JavaScript 中，Promise 已经成为了异步编程中非常重要的解决方案。而在 ES9 中，Promise 对象新增了一个实例方法 finally()，它的作用是无论 Promise 状态如何都会执行，一般用于释放资源或清理工作。

下面是使用 finally() 的示例代码：

// www.javascriptcn.com code example
// Promise 成功后执行
let p1 = Promise.resolve('success');
p1.finally(() => {
  console.log('finally end.');
});

// Promise 失败后执行
let p2 = Promise.reject(new Error('fail'));
p2.finally(() => {
  console.log('finally end.');
});

2、Rest/Spread 属性

Rest/Spread 也是 ES9 中新增加的语法特性。它可以让我们更加便捷地操作对象和数组。在此之前，Rest/Spread 语法主要用于函数参数和对象解构，而在 ES9 中则扩展支持了对象和数组字面量。

2.1 Object 属性 Rest/Spread

我们可以使用 Rest/Spread 语法来批量获取或设置对象属性：

// www.javascriptcn.com code example
let obj = { name: 'Tom', age: 25, sex: 'Male', address: 'Beijing' };

// 获取 name 属性以外的所有属性
let { name, ...props } = obj;
console.log(props); // 输出：{ age: 25, sex: 'Male', address: 'Beijing' }

// 使用 Spread 语法合并对象
let newProps = { sex: 'Female' };
let newObj = { ...obj, ...newProps };
console.log(newObj); // 输出：{ name: 'Tom', age: 25, sex: 'Female', address: 'Beijing' }

2.2 Array 元素 Rest/Spread

我们也可以使用 Rest/Spread 语法批量操作数组元素：

// www.javascriptcn.com code example
let arr = [1, 2, 3, 4, 5];

// 获取数组前两个元素
let [first, second, ...rest] = arr;
console.log(rest); // 输出：[3, 4, 5]

// 使用 Spread 语法合并数组
let newArr = [0, ...arr];
console.log(newArr); // 输出：[0, 1, 2, 3, 4, 5]

3、async/await 的增强

在 ES8 中，我们已经可以使用 async/await 简化异步编程了。而在 ES9 中，async/await 又有了一些增强：

3.1 Async Iterators

在 ES9 中，我们可以使用 for-await-of 语法更加方便地遍历异步迭代器。例如：

// www.javascriptcn.com code example
async function* asyncGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

(async function() {
  for await (let item of asyncGenerator()) {
    console.log(item);
  }
})();

3.2 Promise.prototype.then()/catch() 中使用 async/await

在 ES9 中，我们也可以在 Promise 的 then() 和 catch() 方法中使用 async/await 语法：

// www.javascriptcn.com code example
let p = Promise.resolve('success');

p.then(async res => {
  let result = await anotherPromise();
  console.log(result);
}).catch(async err => {
  let error = await handleException(err);
  console.log(error);
});

4、Rest 属性简写

ES9 中，我们可以通过省略属性名的方式来创建对象：

// www.javascriptcn.com code example
let name = 'Tom';
let age = 25;
let sex = 'Male';

let obj = {
  name, // 省略属性名
  age,
  sex
};

console.log(obj); // 输出：{ name: 'Tom', age: 25, sex: 'Male' }

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

在 ES9 中，我们可以给正则表达式中的捕获组设置命名：

let str = '2018-10-01';

let match = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.exec(str);

console.log(match.groups.year);  // 输出：'2018'
console.log(match.groups.month); // 输出：'10'
console.log(match.groups.day);   // 输出：'01'

结束语

本文详细介绍了 ES9 中令人惊喜的新特性。这些特性可以让我们更加方便地进行 JavaScript 开发，提升我们的开发效率。希望本文能够对您的学习和工作有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/677fd32ece7f4861251c7e55

ES9 令人惊喜的新特性