本文主要介绍ES2018 新出的一些特性
1.异步迭代
允许 async/await 与 for-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 // old 25 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使用了符号 ?<name> const reDate = /(?<year>d{4})-(?<month>d{2})-(?<day>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 = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/,
d = '2018-08-06'
USADate = d.replace(reDate, '$<month>-$<day>-$<year>');
console.log(USADate);
// 08-06-20185.正则表达式---反向断言
先行断言 VS 反向断言
6.正则表达式---新增标记 s
i：不区分大小写；
g：全局搜索；
m：多行查找；
s：允许终止符的出现---正则表达式中点 . 匹配除回车外的任何单字符，标记s改变这种行为；
// 的换行 console.log(/hello.world/.test('hello world')); // false console.log(/hello.world/s.test('hello world')) // true // 的回车 console.log(/hello.world/.test('hello world')) //false console.log(/hello.world/s.test('hello world')) //true // . 匹配除回车外的任何字符 console.log(/hello.world/s.test(`hello world`)) // true console.log(/hello.world/.test(`hello world`)) // false
7.正则表达式---Unicode转义
形式为 p{..} 和 P{..} 。并在正则结尾使用 u 进行设置
const reGreekSymbol = /p{Script=Greek}/u; //Greek 是希腊语
console.log(reGreekSymbol.test('π')); // true