ECMAScript 2018(ES9) 的新特性总结

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

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

const reDate = /(?[0-9]{4})-(?[0-9]{2})-(?[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 = /(?[0-9]{4})-(?[0-9]{2})-(?[0-9]{2})/,

d = ‘2018-04-30’,

usDate = d.replace(reDate, ‘$<month>-$-$’);

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

---

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

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

g.csdnimg.cn/img_convert/c7aea89db6b059151c753196f8f4e9b5.png)

• JavaScript 学习笔记

  

• Vue 学习笔记