ES7/ES8 語法學習

 

做爲一個前端開發者，感受須要學習的東西賊多，ES6剛學會用沒多久，又得學習瞭解ES7/ES8新增的東西，這裏是看了大佬們文章的一點點總結以及摘抄的內容，給本身當筆記使用

內容轉載自：https://www.cnblogs.com/zhuanzhuanfe/p/7493433.html#undefined

https://www.cnblogs.com/leungUwah/p/7932912.html  // async和await的用法

 

ES7新增內容有：Array.prototype.includes()、求冪運算符 （**）、前端異步async()/await()等等

1、Array.prototype.includes()

Array.prototype.includes()即在數組中查找某個元素是否存在，返回值爲Boolean，存在返回true，反之爲false，以下：

let ary = ['a', 'b', 'c', 1, 2, 3];
ary.prototype.includes(2); // true
ary.prototype.includes('f'); // false

其實Array.prototype.includes()的參數有兩個，第一個參數爲咱們要查找的目標元素，第二個參數則是開始查詢的數組索引值（默認爲0），若是傳入第二個參數，則今後下標值開始查詢目標元素。以下：

let ary = ['a', 'b', 'c', 1, 2, 3];
ary.prototype.includes('b'); // true,從下標0開始日後進行查找
ary.prototype.includes(2, 2); // true
ary.prototype.includes('b', 2); // false

 

Array.prototype.includes()跟JavaScript的indexOf()比較類似，可是他們之間也是有些許區別

共同點：（1）好比都是經過索引值逐個去查詢目標元素；（2）都是使用全等符（===）進行判斷

不一樣點：（1）indexOf()返回的是目標元素在數組中的位置（若是找不到則返回 -1），Array.prototype.includes()則是判斷目標元素在該數組中是否存在；

（2）Array.prototype.includes()能夠對NaN進行判斷，由於在Array.prototype.includes()中，它認爲NaN === NaN是成立的，故返回值爲true；可是在indexOf()中，NaN !== NaN，因此若是使用indexOf()尋找數組中的值爲NaN元素沒法找到，返回值爲-1

 

適用場景：（1）若是隻是判斷目標元素是否存在於數組中，則優先使用Array.prototype.includes()；若是須要知道目標元素在數組中的位置，則使用indexOf()

（2）若是須要判斷數組中值爲NaN的元素，只能使用Array.prototype.includes();

 

2、冪運算符（**）

JavaScript中，冪運算通常都是使用Math.pow(m, n)，表示m的n次方,以下：

Math.pow(3, 2); // 即3的2次方等於9

在ES7中，可使用冪運算符**進行冪運算，以下：

let a = 3;
a **== 2 // 9,即 a = a**2, 此時a等於3的2次方，即爲9了

 

 

3、前端異步async()/await()

什麼是async、await？

async顧名思義是「異步」的意思，async用於聲明一個函數是異步的。而await從字面意思上是「等待」的意思，就是用於等待異步完成。而且await只能在async函數中使用

一般async、await都是跟隨Promise一塊兒使用的。爲何這麼說呢？由於async返回的都是一個Promise對象同時async適用於任何類型的函數上。這樣await獲得的就是一個Promise對象(若是不是Promise對象的話那async返回的是什麼 就是什麼)；

await獲得Promise對象以後就等待Promise接下來的resolve或者reject。

來看一段簡單的代碼：

async function testSync() {
     const response = await new Promise(resolve => {
         setTimeout(() => {
             resolve("async await test...");
          }, 1000);
     });
     console.log(response);
}
testSync();//async await test...

就這樣一個簡單的async、await異步就完成了。使用async、await完成異步操做代碼可讀與寫法上更像是同步的，也更容易讓人理解。

async、await的串行、並行處理

串行：即等待前一個await執行完成後執行另外一個await，

借用大佬的代碼：

async function asyncAwaitFn(str) {
    return await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(str)
        }, 1000);
    })
}

const serialFn = async () => { //串行執行

    console.time('serialFn')
    console.log(await asyncAwaitFn('string 1'));
    console.log(await asyncAwaitFn('string 2'));
    console.timeEnd('serialFn')
}

serialFn();

這裏能夠看到串行執行完畢耗時2秒多了。

 

並行：即先執行多個async方法，而後再運行await操做，代碼以下：

async function asyncAwaitFn(str) {
    return await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(str)
        }, 1000);
    })
}
const parallel = async () => { //並行執行
    console.time('parallel')
    const parallelOne = asyncAwaitFn('string 1');
    const parallelTwo = asyncAwaitFn('string 2')

    //直接打印
    console.log(await parallelOne)
    console.log(await parallelTwo)

    console.timeEnd('parallel')


}
parallel()

能夠看到並行執行結束總共耗時1秒多，比串行快了不少

 

async、await的錯誤處理

JavaScript異步請求確定會有請求失敗的狀況，上面也說到了async返回的是一個Promise對象。既然是返回一個Promise對象的話那處理當異步請求發生錯誤的時候咱們就要處理reject的狀態了。

在Promise中當請求reject的時候咱們可使用catch。爲了保持代碼的健壯性使用async、await的時候咱們使用try catch來處理錯誤。

async function catchErr() {
      try {
          const errRes = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject("http error...");
                 }, 1000);
           );
                //日常咱們也能夠在await請求成功後經過判斷當前status是否是200來判斷請求是否成功
                // console.log(errRes.status, errRes.statusText);
        } catch(err) {
             console.log(err);
        }
}
catchErr(); //http error...

其實使用async、await的主要目的是爲了使原始Promise的then處理的整個異步請求代碼變得更加簡潔清爽。