ES9新內容概括

本文主要介紹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---淺拷貝

        var obj = {
            name: 'LinDaiDai',
            looks: 'handsome',
            foo() {
                console.log('old');
            },
            set setLooks(newVal) {
                this.looks = newVal
            },
            get getName() {
                console.log(this.name)
            }
        }

        var cloneObj = {...obj};
        cloneObj.foo = function() {
            console.log('new')
        };
        console.log(obj)     
        // { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), get getName:f getName(), set setLooks: f setLooks(newVal)}
        console.log(cloneObj)
        // { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), getName: undefined, setLooks: undefined }
        obj.foo()
        // old
        cloneObj.foo()
        // 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-2018

5.正則表達式---反向斷言

　　先行斷言 VS 反向斷言

6.正則表達式---新增標記 s

　　i：不區分大小寫；

　　g：全局搜索；

　　m：多行查找；

　　s：允許終止符的出現---正則表達式中點 . 匹配除回車外的任何單字符，標記s改變這種行為； 

// \n的換行
console.log(/hello.world/.test('hello\nworld'));  // false

console.log(/hello.world/s.test('hello\nworld')) // true
// \r的回車
console.log(/hello.world/.test('hello\rworld'))     //false
console.log(/hello.world/s.test('hello\rworld'))    //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

 

參考地址：https://juejin.im/post/5b685ed1e51d4533f52859e8