ECMAScript 2018(ES9) 的新特性总结

简介: ECMAScript 2018(ES9) 的新特性总结

image.png

快速通道:

老样子,先纵览下 ES2018 的新功能:

异步迭代:await可以和for...of循环一起使用,以串行的方式运行异步操作

Promise.finally():逻辑只可以放在一个地方,这有点像以前jQuery ajax的complete

Rest/Spread 属性:允许我们将一个剩余参数表示为一个数组

正则表达式命名捕获组:允许命名捕获组使用符号?<name>

正则表达式反向断言(lookbehind)

正则表达式dotAll模式:正则表达式中点.匹配除回车外的任何单字符,标记s改变这种行为,允许行终止符的出现

正则表达式 Unicode 转义: Unicode 属性转义形式为\p{...}和\P{...}

非转义序列的模板字符串:移除对 ECMAScript 在带标签的模版字符串中转义序列的语法限制

异步迭代

async/await的某些时刻,我们可能尝试在同步循环中调用异步函数。例如下面两段代码:

async function process(array) {
  for (let i of array) {
    await doSomething(i);
  }
}
async function process(array) {
  array.forEach(async i => {
    await doSomething(i);
  });
}

这段代码中,循环本身依旧保持同步,并在在内部异步函数之前全部调用完成。


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 属性

ES2015引入了Rest参数扩展运算符。三个点(...)仅用于数组。Rest参数语法允许我们将一个布丁数量的参数表示为一个数组。

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

展开操作符以相反的方式工作,将数组转换成可传递给函数的单独参数。例如Math.max()返回给定数字中的最大值:

const values = [99, 100, -1, 48, 16];
console.log( Math.max(...values) ); // 100

ES2018为对象解构提供了和数组一样的Rest参数()和展开操作符,一个简单的例子:


const myObject = {
  a: 1,
  b: 2,
  c: 3
};
const { a, ...x } = myObject;
// a = 1
// x = { b: 2, c: 3 }
// 或可以使用它给函数传递参数
restParam({
  a: 1,
  b: 2,
  c: 3
});
function restParam({ a, ...x }) {
  // a = 1
  // x = { b: 2, c: 3 }
}

跟数组一样,Rest参数只能在声明的结尾处使用。此外,它只适用于每个对象的顶层,如果对象中嵌套对象则无法适用。扩展运算符可以在其他对象内使用,例如:

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, z: 26 };
// obj2 is { a: 1, b: 2, c: 3, z: 26 }

可以使用扩展运算符拷贝一个对象,像是这样obj2 = {...obj1},但是这只是一个对象的浅拷贝。另外,如果一个对象A的属性是对象B,那么在克隆后的对象cloneB中,该属性指向对象B。

正则表达式命名捕获组

JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组,例如:以YYYY-MM-DD的格式解析日期:

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

image.png

代码很难读懂,并且改变正则表达式的结构有可能改变匹配对象的索引。ES2018允许命名捕获组使用符号?<name>,在打开捕获括号(后立即命名,示例如下:

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

命名捕获也可以使用在replace()方法中。例如将日期转换为美国的 MM-DD-YYYY 格式:

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

image.png

正则表达式反向断言(lookbehind)

目前JavaScript在正则表达式中支持先行断言(lookahead)。这意味着匹配会发生,但不会有任何捕获,并且断言没有包含在整个匹配字段中。例如从价格中捕获货币符号:

const reLookahead = /\D(?=\d+)/,
match = reLookahead.exec('$123.89');
console.log( match[0] ); // $

image.png

ES2018引入以相同方式工作但是匹配前面的反向断言(lookbehind),这样我就可以忽略货币符号,单纯的捕获价格的数字:

image.png

正则表达式dotAll模式

正则表达式中点.匹配除回车外的任何单字符,标记s改变这种行为,允许行终止符的出现,例如:

/hello.world/.test('hello\nworld');  // false
/hello.world/s.test('hello\nworld'); // true

image.png

正则表达式 Unicode 转义

到目前为止,在正则表达式中本地访问 Unicode 字符属性是不被允许的。ES2018添加了 Unicode 属性转义——形式为\p{...}和\P{...},在正则表达式中使用标记 u (unicode) 设置,在\p块儿内,可以以键值对的方式设置需要匹配的属性而非具体内容。例如:

const reGreekSymbol = /\p{Script=Greek}/u;
reGreekSymbol.test('π'); // true

image.png

这个特性可以避免使用特定 Unicode 区间来进行内容类型判断,提升可读性和可维护性。

非转义序列的模板字符串

ES2018 移除对 ECMAScript 在带标签的模版字符串中转义序列的语法限制。

之前,\u开始一个 unicode 转义,\x开始一个十六进制转义,\后跟一个数字开始一个八进制转义。这使得创建特定的字符串变得不可能,例如Windows文件路径 C:\uuu\xxx\111。

本文引用自:[译] ES2018(ES9)的新特性


相关文章
|
12月前
|
安全 Shell Linux
从命令行界面运行交互式PHP Shell
从命令行界面运行交互式PHP Shell
185 0
|
监控 Java API
Android经典实战之OkDownload:一个经典强大的文件下载开源库,支持断点续传
本文介绍的 OkDownload 是一个专为 Android 设计的开源下载框架,支持多线程下载、断点续传和任务队列管理等功能,具备可靠性、灵活性和高性能特点。它提供了多种配置选项和监听器,便于开发者集成和扩展。尽管已多年未更新,但依然适用于大多数文件下载需求。
909 1
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
2790 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
JavaScript 前端开发 API
【Vue】探究 Vue 2 与 Vue 3 生命周期:变化与延续
【Vue】探究 Vue 2 与 Vue 3 生命周期:变化与延续
|
负载均衡 NoSQL Java
Spring Boot + Redis 处理 Session 共享
Spring Boot + Redis 处理 Session 共享
154 1
|
机器学习/深度学习 算法 数据可视化
机器学习-特征选择:如何使用相关性分析精确选择最佳特征?
本文致力于利用相关性分析来辅助特征选择过程。相关性分析作为一种用于量化特征之间关系的方法,可以帮助我们理解数据中的潜在模式和相互作用。通过分析特征之间的相关性,我们可以更加准确地选择具有高预测能力和独立性的特征,从而提高特征选择的效果和结果。
2968 0
|
移动开发 小程序 前端开发
uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法
uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法
2032 1
|
消息中间件 监控 Kafka
【Kafka】分区副本中的 Leader 如果宕机但 ISR 却为空该如何处理
【4月更文挑战第12天】【Kafka】分区副本中的 Leader 如果宕机但 ISR 却为空该如何处理
|
存储 网络协议 网络架构
网络中的大包和小包相关问题总结
网络中的大包和小包相关问题总结
1650 0
|
机器学习/深度学习 vr&ar
生成对抗网络(GANs)在图像生成和风格转换方面的研究进展
生成对抗网络(GANs)在图像生成和风格转换方面的研究进展
361 0
生成对抗网络(GANs)在图像生成和风格转换方面的研究进展

热门文章

最新文章