ES2018 新增特性清单

Rest/Spread 属性

rest

将对象的剩余属性复制到一个新对象中。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }
复制代码

spread

将对象的属性快速复制到另一个对象。

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }
复制代码

异步iterator和异步iterables

与iterator不同，异步iterator的next()方法返回一个包含{ value, done }的promise。

const { value, done } = syncIterator.next();

asyncIterator.next().then(({ value, done }) => /* ... */);
复制代码

可以看到syncIterator是一个异步遍历器。它可以通过异步generator生成。下面演示如何定义异步generator函数。

异步 generator 函数

async function* asyncGen() {
  let p1 = new Promise((resolve, reject) =>{
      setTimeout(()=>{
          resolve(1);
      }, 1000)
  });
  let p2 = new Promise((resolve, reject) =>{
      setTimeout(()=>{
          resolve(2);
      }, 1000)
  });
  yield await p1;
  yield await p2
}
复制代码

for-await-of

es2018提供了新的遍历语法对异步 iterator 进行遍历。

for await (const val of asyncGen()) {
  console.log(val);
}
复制代码

Promise.prototype.finally()

Promise.prototype.finally()不管promise的执行结果是成功还是失败，在promise执行完成后，会触发一个回调函数。常见的应用场景比如在ajax请求成功或失败后，隐藏loading动画。

fetch('https://demo.com/endpoint')
.then(res => {
    // ...
})
.catch(err => {
    // ...
})
.finally(() => {
    // do sth no matter success or failure
})
复制代码

tagged 模板字符串与 转义序列

从es2016开始，tagged 模板字符串会对以\u、\u{}、\x开头或者\加数字开头的字符串进行转义。但是如果在模板字符串中出现以上述字符开头的非转义字符的话，会报语法错误。

es2018中取消了tagged 模板中对于转义字符的限制，正常解析的话可以正常获取转义字符的值，否则的话返回undefined。

function latex(str) { 
 return { "cooked": str[0], "raw": str.raw[0] }
} 

latex`\unicode`
// { cooked: undefined, raw: "\unicode"}

复制代码

可以看到我们通过str[0]去获取转义字符的值并不会报错。通过str.raw[0]可以正常取得字符串"\unicode"。

正则相关的特性

s (dotAll)模式

我们知道元字符.无法匹配\r \n \u{2048} \u{2049}等换行符。

在 ES2018 中为正则表达式增加了一个新的标志 s 用来表示属性dotAll。以使 .可以匹配任意字符, 包括换行符。

const re = /foo.bar/s;
re.test('foo\nbar');
// → true
re.dotAll
// → true
re.flags
// → 's'
复制代码

命名捕获组 named capture groups

正则表达式中可以通过数字索引来引用()语法捕获的部分匹配结果。如

let re = /(\d{4})-(\d{2})-(\d{2})/;
let result = re.exec('2015-01-02');
console.log(result[1],result[2],result[3]);
// 2015, 01, 02
复制代码

es2018中提供了命名捕获组的功能。我们可以通过(?<name>...)语法给捕获组命名。

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let result = re.exec('2015-01-02');
// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';
复制代码

或者以解构语法简化代码:

let {groups: {year, month, day}} = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u.exec('2015-01-02');
console.log(`year: ${year}, month: ${month}, day: ${day}`);  // prints year: 2015, month: 01, day: 02
复制代码

后行断言

es5中，正则只支持先行断言。例如：

正向先行断言/x(?=y)/表示字符x后面的位置必须是y。

负向先行断言/x(?!y)/表示x字符后面的位置不能等于y。

es2018中新增了后行断言的支持。例如：

/(?<=y)x/表示字符x前面的位置必须是y。

/(?<!y)x/表示字符x前面的位置不能是y。

let re = /(?<=java)script/;
consle.log(re.test('javascript'));
// true
复制代码

Unicode property escapes

Unicode property escapes使得可以在js正则表达式中本地访问这些Unicode字符属性。 例如，模式\p {Script_Extensions = Greek}匹配希腊脚本中的任意符号。

const regexGreekSymbol = /\p{Script_Extensions=Greek}/u;
regexGreekSymbol.test('π');
// → true
复制代码

可选的catch参数

es2018对语法进行了修改，catch在没使用参数的情况下省略括号。例如：

try {
  // try to use a web feature which may not be implemented
} catch (unused) {
  // fall back to a less desirable web feature with broader support
}
复制代码

上述代码在新规范下可以写成：

try {
  // try to use a web feature which may not be implemented
} catch {
 // 省略catch后的函数括号
}
复制代码

JSON 超集

我们知道es5中通过JSON.parse可以将json字符串转换成js的json对象。但有例外，那就是当json文本中存在未转义的换行符如\u2028,\u2029时，js中会报语法错误。

es2018中做了扩展，支持了所有的json文本，因此同样允许未转义的换行符的存在。

const LS = "
";
const PS = eval("'\u2029'");
复制代码

上述代码片段在实现了es2018规范的浏览器中是不会出现语法错误的，反之则会报语法错误。自己可以试一下。