博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES9新内容概括
阅读量:6148 次
发布时间:2019-06-21

本文共 4158 字,大约阅读时间需要 13 分钟。

本文主要介绍ES2018 新出的一些特性

1.异步迭代

  允许 async/awaitfor-of 一起使用,以串行的方式运行异步操作,达到异步函数的迭代效果。

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

2.Promise.finally()

  在ES6中,一个Promise链要么成功进入最后一个then()要么失败触发catch()。而实际中,我们可能需要无论Promise无论成功还是失败,都运行相同的代码。例如清除,删除回话,关闭数据库连接等操作。

ES9中,允许使用finally()来指定最终的逻辑。

test().then((result)=>{})      .catch((err)=>{})      .finally(()=>{})

3.Rest/Spread属性

  该属性在ES6中是指展开运算符: ... 。在ES6中 只能适用于数组,但是在ES9中 对象也可以使用展开运算符。

  展开运算符的作用:

    1.函数使用 ... 接收未知数量的参数

//数组restParam(1, 2, 3, 4, 5);function restParam(p1, p2, ...p3) {  // p1 = 1  // p2 = 2  // p3 = [3, 4, 5]}//对象var obj = {         a: 1,         b: 2,         c: 3     }foo(obj)function foo({a, ...param}) {       console.log(a);    //1       console.log(param)     //{b: 2, c: 3} }

    2.展开运算

//数组:        const values = [99, 100, -1, 48, 16];        console.log( Math.max(...values) ); // 100//对象:        var obj = {            a: 1,            b: 2,            c: 3        }        const { a, ...param } = obj;        console.log(a)     //1        console.log(param) //{b: 2, c: 3}

    对象的用法1---浅拷贝

1         var obj = { 2             name: 'LinDaiDai', 3             looks: 'handsome', 4             foo() { 5                 console.log('old'); 6             }, 7             set setLooks(newVal) { 8                 this.looks = newVal 9             },10             get getName() {11                 console.log(this.name)12             }13         }14 15         var cloneObj = {...obj};16         cloneObj.foo = function() {17             console.log('new')18         };19         console.log(obj)     20         // { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), get getName:f getName(), set setLooks: f setLooks(newVal)}21         console.log(cloneObj)22         // { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), getName: undefined, setLooks: undefined }23         obj.foo()24         // old25         cloneObj.foo()26         // new

    对象的用法2---合并对象

const obj1={a:1,b:2};const obj2={c:3,d:4};const obj3={...obj1,...obj2};console.log(obj3)    //{a: 1, b: 2, c: 3, d: 4}//同:const merged = Object.assign({}, obj1, obj2);

4.正则表达式---命名捕获组

  4.1 JavaScript正则表达式使用exec()匹配能够返回一个包含匹配的字符串的类数组。

  先上一个对比案例

//ES9使用了符号 ?
const reDate = /(?
\d{4})-(?
\d{2})-(?
\d{2})/, match = reDate.exec('2018-08-06') console.log(match); // [2018-08-06, 08, 06, 2018, groups: {day: 06, month: 08, year: 2018}] //此时可以使用groups对象来获取年月日 console.log(match.groups.year) // 2018 console.log(match.groups.month) // 08 console.log(match.groups.day) // 06//ES6命名捕获的方式: const reDate = /(\d{4})-(\d{2})-(\d{2})/, match = reDate.exec('2018-08-06'); console.log(match); // [2018-08-06, 2018, 08, 06] // 这样就可以直接用索引来获取年月日: match[0] //2018-08-06 match[1] // 2018 match[2] // 08 match[3] // 06

   ES9的命名捕获组的写法相当于是给每个匹配项都添加了一个名字(?<name>),然后存储到返回值match中。match多了一个属性groups,但是match的长度没有变化。(是作为match的一个隐藏属性?)

  4.2 结合replace()

const reDate = /(?
\d{4})-(?
\d{2})-(?
\d{2})/, d = '2018-08-06' USADate = d.replace(reDate, '$
-$
-$
');console.log(USADate);// 08-06-2018

5.正则表达式---反向断言

  先行断言 VS 反向断言

6.正则表达式---新增标记 s

  i:不区分大小写;

  g:全局搜索;

  m:多行查找;

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

// \n的换行console.log(/hello.world/.test('hello\nworld'));  // falseconsole.log(/hello.world/s.test('hello\nworld')) // true// \r的回车console.log(/hello.world/.test('hello\rworld'))     //falseconsole.log(/hello.world/s.test('hello\rworld'))    //true// . 匹配除回车外的任何字符console.log(/hello.world/s.test(`helloworld`))   // trueconsole.log(/hello.world/.test(`helloworld`))   // false

7.正则表达式---Unicode转义

  形式为  \p{..}\P{..} 。并在正则结尾使用 u 进行设置

const reGreekSymbol = /\p{Script=Greek}/u;  //Greek 是希腊语    console.log(reGreekSymbol.test('π')); // true

 

参考地址: 

转载于:https://www.cnblogs.com/waterFowl/p/9450838.html

你可能感兴趣的文章
JavaWeb应用出现HTTP 500-Unable to compile class for JSP 错误 的解决
查看>>
六种微服务架构的设计模式
查看>>
Unity Remote 5 使用
查看>>
swift开发多线程篇 - 多线程基础
查看>>
《ArcGIS Runtime SDK for Android开发笔记》——(5)、基于Android Studio构建ArcGIS Android开发环境(离线部署)...
查看>>
Selenium2+python自动化37-爬页面源码(page_source)
查看>>
pm2-web
查看>>
011-Spring Boot 运行流程分析SpringApplication.run
查看>>
[解决方案]sql server复制需要有实际的服务器名称才能连接到服务器
查看>>
用yarn替代npm
查看>>
ReSharper2017.3的列对齐、排版格式、列对齐错误的修复
查看>>
BZOJ3273 : liars
查看>>
mysql开发之---每日一得01
查看>>
Java基础-MySQL数据库扫盲篇
查看>>
Echarts关于仪表盘
查看>>
php实现求数组中出现次数超过一半的数字(isset($arr[$val]))(取不同数看剩)(排序取中)...
查看>>
(转)创业的注意事项
查看>>
超简单的视频对象提取程序
查看>>
『TensorFlow』线程控制器类&变量作用域
查看>>
【知识小结】Git 个人学习笔记及心得
查看>>