前言

國慶假期已過一半，來篇乾貨壓壓驚。

ES6，並不是一個新鮮的東西，ES7、ES8已經趕腳了。但是，東西不在於新，而在於總結。每個學前端的人，身邊也必定有本阮老師的《ES6標準入門》或者翻譯的《深入理解ECMAScript6》。本篇主要是對ES6的一些常用知識點進行一個總結。如果你喜歡我的文章，歡迎評論，歡迎Star~。歡迎關注我的github部落格

正文

我們會更具之前的羅列的內容進行一個深入的分析。

變數的新定義——let和const

在ES6沒有被普及時，我們會用的變數定義的方法是var。其實，var對於一個剛剛接觸js的人說，或許並不覺得怪異。但是，對於一個開發者而言，或許會在內心抨擊它。因為它就是javascript的敗筆之一，在其他語言看來的一個怪胎。那我們就來看看怪在何處呢？

1. 可以重複定義。不知道你的程式碼裡面會不會出現這樣子的程式碼，舉例：

    var a = 10;
    var a = 11;複製程式碼

   或許，你會看到這樣子的寫法覺得沒啥，那麼你很厲(wei)害(xian)。其實，這樣子的壞處不言而喻。在大型的工程化開發中，你定義一個a，我定義一個a，還有千千萬萬個你和我，這時，技術總監就該著急了。所以，這是var的第一點令人討厭的地方，但是如果你會說不是有嚴格模式嘛。的確，嚴格模式做了一定的規範，但是我們不加以討論。畢竟，這時ES6的地盤(^-^)。

2. 可隨意修改。何為可隨意修改？並不是指變數，而是指常量。舉例：

    var PI = 3.1415926
    PI = 4.1415926複製程式碼

   從例子中，我們可以看到，PI是一個我們經常會使用的常量，是公認的不可變動的。但在javascript中並不是如此。那天，如果你的PI被你們公司新晉的實習生改了，可能你找錯誤都得找半天，但這可不是實習生的鍋，也許，他並不知道這裡是個常量。不過，這種情況也是玩笑話(^_^)。

3. 沒有塊級作用域。如果你連塊級作用域都不知道的話，趕緊收藏一下^_^，回頭再來看哈～，舉例：

    if(true){
        var i = 10;
    }
    console.log(i);  //10複製程式碼

   相信，這變數不存在塊級作用域給我們帶來過不少麻煩吧。不知道啥時候，又得在迴圈中套一層閉包呢。而且，在非js開發者來說，可能覺得是個特(xiao)點(hua)。

所以，let和const就來拯救var了，如何一個拯救法呢？

1. 在同一個塊級作用域中，不允許重複定義。那之前的例子來使用一下的話，你會發現瀏覽器報錯了，如圖：

   

2. const定義的變數不允許二次修改。還原一下之前的例子，如圖：

   

   是不是再也不用擔心之前的實習生啦，呦！！！

3. let和const定義的變數會形成塊級作用域：直接上圖，看看：

   

4. 它們定義的變數不存在變數提升，以及存在暫時性死區

   這個問題，我想舉個例子可以更加方便的說明。首先，我們來看一題簡單的筆試題：

   var a = 10;
   function hello(){
       console.log(a);
         var a = 11;
         console.log(a);
   }
   hello();複製程式碼

   我想這個答案不言而喻，是undefined和11。原因：就是第一個console時，下面定義的變數a被提升了，所以a變成了undefined，第二個的話，就比較好理解。這個例子，我想會給初學者帶來不小的麻煩，和當初的我一樣哈。

   使用let和const就會不一樣，它們並不存在變數提升，如圖：

   

函式的變化——箭頭函式，剩餘引數，引數預設值

何為箭頭函式，我們先上例子：

export const addToCart = productId => (dispatch, getState) => {
  if (getState().products.byId[productId].inventory > 0) {
    dispatch(addToCartUnsafe(productId))
  }
}複製程式碼

這是，我從redux例子中摘取的一個片段，第一感覺就是『程式碼風格簡潔』，整體程式碼規範很好，畢竟是示例程式碼麼。但是會讓人難以理解。因此，為了避免以後看不懂的尷尬，還是來好好聊聊這個神奇的東西吧。

其實，這個東西類似於python的lambda。但是，它的確特別適合js這門語言，就一個字「酷」。它的幾個規則：

• 變數如果只有一個的時候，可以省略()
• 如果是隻有一句返回語句時，可以直接省略{return }這一部分
• 因為它本身叫做arrow，所以每次都必須帶上=>符號

如果你一開始不會寫，那就必須得多練習，這樣才能在以後的工作中真正謀求便利。

當然咯，它有好處，但是在使用的時候，也得注意它的禁區。注意事項：

1. 箭頭函式不能作為建構函式。如圖：

   

2. 箭頭函式沒有它自己的this值，箭頭函式內的this值繼承自外圍作用域。如圖：

   

3. 箭頭函式沒有arguments。這個我們直接測試一下就可以了，如圖：

   

啥？沒有arguments，那我如果正好要用到呢？這可咋辦呢？下面再來說個有意思的改動——剩餘引數。

什麼叫剩餘引數？彆著急，看個例子就懂了。

const restParam = function(a, ...args){
    console.log(args);
};
restParam(1, 2, 3, 4);   //[2, 3, 4]複製程式碼

這裡你會發現這個args變數似乎包含了之後輸入的所有引數，除了a以外。所以，這就是所謂的剩餘引數。其中，運用到了一個…這個符號。其實這個符號的用處非常的多，ES6中可以將它稱為擴充套件符。那麼，我們來看看在箭頭函式中的運用。

當然，在使用剩餘引數時，需要注意一個問題，就是剩餘引數設定的位置。我們先來看張圖：

所以，在使用剩餘引數時，需要注意的是，將這部分放在所有引數的最後位置。其實，ES6還帶來了另一個引數的變動——預設引數。或許，我們可以先看一下預設引數這個問題，我們之前是怎麼處理的。場景：一般在設定延遲的時候，都會有一個時間的預設值，防止使用者在沒有設定的情況下使用，看看下面的例子：

function defaultParam(time){
    let wait = time || 1000;
      setTimeout(() => {
        //...
    }, wait);
}複製程式碼

這種寫法應該非常的常見，使用的也比較廣泛。但是，使用ES6的語法的話，就會變成這樣子，例子：

function defaultParam(time = 1000){
    setTimeout(() => {
        //...
    }, time);
}複製程式碼

看上去這樣子的寫法，會使得函式更加的簡潔明瞭。

陣列——解構賦值、二進位制陣列

說到解構賦值呢？大家千萬別誤解為這是陣列的特性。不是的，物件也能夠滿足。只是覺得放在這邊來寫會比較好而已

解構賦值這個新特性，說實話是真的好用。我們可以先來看一個複雜一點的例子：

let [a, b , {name, age}, ...args ] = [1, 2, {name: 'zimo', age: 24}, 3, 4];
console.log(a, b, name, age, args); //1, 2, 'zimo', 24, [3, 4]複製程式碼

你會發現例子中，有一個特點——對仗工整。

這是解構賦值時，必須要去滿足的條件——想要解構的部分，內容保持一致。這樣才能保證完美解構。對於解構而言，左右兩邊的內容長度不一致，不會出問題。比如，當你右邊內容多一點的時候，其實沒啥事，你只需要保證你左邊的結構有一部分是你想要的，舉例：

let [a, b, c] = [1, 2, 3, 4, 5];
console.log(a, b, c); //1, 2, 3複製程式碼

這種叫做部分解構，左邊也是一樣的，對於多處來的部分，會變成undefined。舉例：

let [a,b,c] = [1, 2];
console.log(a, b, c);  //1 2 undefined複製程式碼

解構賦值在使用過程中，也是有需要注意的部分：

1. 必須保證有賦值的過程。看個例子：

   

   你可以看到圖中的例子，單獨先宣告瞭a和b，但是沒有賦值的過程，會報錯。

2. 左邊內容部分的結構必須與右邊保持一致。如圖：

   

   這裡兩邊的結構沒有一致，如果是foo,bar的話，是可以正常解構的。但是這個例子的意圖可能是想去解構foo中的值，但是寫法上有一定的問題。

其實，解構也有沒多種玩法：

1. 預設值的使用。由於之前說過的部分解構的情況出現，所以我們在解構時，可以使用預設值的形式。

    let [a, b = 10] = [1];
    console.log(a, b);  //1, 10複製程式碼

   在這個例子中b原先是undefined，但是設定了預設值的情況下，undefined的變數會被賦上預設值

2. 函式變數中使用解構。對於一個函式而言，它的引數也可能會是陣列或物件，這是我們就可以使用解構賦值的方式

   function destructuring({name, age}){
       console.log(name, age);
   }
   destructuring({name: 'zimo', age: 21}); // zimo 21複製程式碼

解構賦值現在被使用的頻率也是非常之大，好好掌握一下也是有必要的。

之後的話，我們可以聊一下二進位制陣列的概念。

何為二進位制陣列？其實，我們可以先來了解一下javascript的陣列。熟悉js的人都知道，其實js的陣列的效能並不高，它的本質是一個物件。之所以現在你看到陣列在使用時速度還可以，是因為js的引擎在處理時，做了不同的優化。拿v8引擎舉例的話，對於內部元素型別相同的陣列在編譯執行的時候，會使用c編譯器。如果對於內部元素型別不同的時候，它會先將陣列分離開來，然後再進行編譯。具體可以檢視深入 JavaScript 陣列：進化與效能

所以，我們可以直接瞭解一下二進位制陣列的使用。二進位制陣列可以由Int8Array、Int16Array、Int32Array等形式組成，在整數方面，可用性較強。

const buffer = new Buffer(100000000);
const arr = new Int8Array(buffer);
console.time('test time');
for(let i = 0; i < arr.length; i++){
    arr[i] = i;
}
console.timeEnd('test time');複製程式碼

其實，現在二進位制陣列使用的頻率並不多，ES6也僅僅是提出，後續還會對陣列這一塊進行一個更加詳細的完善。

字串——模版字串、startsWith、endsWidth

在ES6中，對字串也做了一定的改進。先來聊聊我們的新朋友——模版字串。其實，在語言中，字串有多種表示方式：單引號、雙引號和倒引號。在javascript中，雙引號和單引號都是一樣的，這點與一些靜態語言不一樣。但是，往往有時候，對於字串的拼接會使得開發者厭煩。如何解決呢？

ES6帶來了解決方案——模版字串。何為模版字串呢？由倒引號包裹``，然後使用${}來包裹變數。我們可以來實踐一下

const name="zimo";
const str = `My name is ${name}`;
console.log(str);  //My name is zimo複製程式碼

這樣，我們就可以非常方便的在其中新增變數了。或許，你會覺得這樣的拼接，使用普通的方式也可以非常好的完成。但是，在開發過程中，我們或許會碰到更佳複雜的情況，比如說，我們現在要去建立一個DOM元素，以及它的內部元素。這種情況，通常還會帶有表示式。

const width = 100;
const height = 200;
const src = "http://www.example.com/example.png";
const html = `<div class="block" width="${0.5 * width}px" height="${height}"><img src="${src}" /></div>`;複製程式碼

往往這樣子的元素在手動拼接的過程中，總是會出錯，因此，使用模版字串是一種既「高效」又「簡潔」的方式。

有了模版字串，你可以解決非常棘手的問題。那麼，標題中帶有的startsWith和endsWith又是起到什麼作用呢？可能你會使用正規表示式，那麼你就有可能不會使用到這兩個API。

按照慣例，還是需要來介紹一下這兩個API的。

startsWith：返回值為boolean型，然後去匹配字串開頭的部分，舉個例子：

const str = "start in the head";
console.log(str.startsWith('start'));  //true
console.log(str.startsWith('head'));  //false複製程式碼

其實，這也是可以使用正規表示式來達到這一目的。還原上例：

const str = "start in the head";
console.log(/^start/.test(str));   //true
console.log(/^head/.test(str));   //false複製程式碼

其實，兩者方式的區別基本上沒有，但是正規表示式的功能更佳的完善。這個API僅僅在一些場景下起到一定的便捷。比方說，我們需要去匹配一個URL的協議頭是什麼時，我們往往需要用到這種方式。例子：

const url = "http://www.example.com";
if(url.startsWith('http')){
    console.log('this is http');
}else if(url.startsWith('https')){
    console.log('this is https');
}else if(url.startsWith('ws')){
    console.log('this is websocket');
}    //this is http複製程式碼

同理，endWith也是一樣的效果。

endsWith：返回值是boolean型別，然後去匹配字串的結尾。舉個例子：

const str = "something in the end";
console.log(str.endsWith('end'));   //true
console.log(str.endsWith('something'));  //false複製程式碼

同樣的，它也可以使用正規表示式來實現：

const str = "something in the end";
console.log(/end$/.test(str));   //true
console.log(/something$/.test(str));   //false複製程式碼

這種情況的使用場景是，往往我們需要為上傳的檔案準備圖示，那麼我們就可以根據字尾來確定圖示。

const filename = "upload.jpg";
if(filename.endsWith('.jpg')){
    console.log('this is jpg file');
}else if(filename.endsWith('.png')){
    console.log('this is png file');
}else if(filename.endsWith('.webp')){
    console.log('this is webp file');
}   //this is jpg file複製程式碼

同時，字串還增加了許許多多的東西，有興趣的，可以自己去翻書本詳細的瞭解

Iterator和for...of

Iterator的概念是迭代器。在ES6中，終於正式的新增了這個屬性。迭代器，主要是一個集合類元素的遍歷機制。何為集合類元素？最常見的就是陣列，還有物件。迭代器可以幫助開發者完成遍歷集合的過程。最開始javascript並沒有設定介面，來自定義迭代器，但是從ES6開始，我們可以自定義迭代器了。在自定義迭代器之前，我們要清楚迭代器的作用有哪些：

• 為各種資料結構提供一個統一的、簡便的訪問介面
• 使得資料結構的成員能夠按某種次序排列
• 在ES6中，迭代器主要供我們之後要講述的for...of服務

迭代器，往往就是一個指標物件，不斷呼叫，然後不斷地指向下一個物件的過程，直到結束。ES6中，我們可以建立一個指標物件，然後呼叫next的函式，使得指標物件向下移動。同時，next函式會返回value和done，確定是否到達末尾。

同時，ES6還提供了Iterator介面——Symbol.iterator。首先，我們來看一下具備原生介面的集合類——陣列，類陣列物件、Set和Map。這樣我們就可以直接呼叫它的介面來進行迴圈：

let arr = ['my', 'name', 'is', 'iterator'];
let iter = arr[Symbol.iterator]();
console.log(iter.next());   //{ value: 'my', done: false}
console.log(iter.next());   //{ value: 'name', done: false}
console.log(iter.next());   //{ value: 'is', done: false}複製程式碼

同時，定義iterator介面的資料結構可以輕鬆的使用for...of進行值的遍歷

let arr = ['I', 'has', 'iterator'];
for(let item of arr){
    console.log(item);
}   //'I', 'has', 'iterator'複製程式碼

但是，如果沒有定義iterator介面的資料結構就沒有辦法使用這種方式進行遍歷，如圖：

這時，我們又該如何呢？其實，針對一些可迭代的資料結構，我們是可以自定義迭代器的，例如：

let iteratorObj = {
    0: 'a',
      1: 'b',
      2: 'c',
      length: 3,
     [Symbol.iterator]: Array.prototype[Symbol.iterator]
}
for(let item of iteratorObj){
    console.log(item);
}  // 'a', 'b', 'c'複製程式碼

迭代器是一個非常實用的東西，不妨你也可以試試，同時去改善你的程式碼。

Generator和Promise

其實，這兩個是比較難以理解的東西。如果只是粗淺的瞭解一下，還是有許多的新東西的。在ES6中，引入了generator和promise兩個概念。可能在這之前，你已經使用過了，通過其他的類庫實現的。那麼，其實ES6中的新概念也是差不多的，只是標準化了而已。

generator，叫做生成器。可以說與iterator有點相似，同樣是通過next函式，來一步步往下執行的。同時，它的定義時，所使用的是function*的識別符號。還具備yield這個操作符，可以實現逐步逐步向下執行。我們來看個例子：

function* generator(){
  yield 1;
  yield 2;
  yield 3;
};

let generate = generator();

console.log(generate.next());  //{value: 1, done: false}
console.log(generate.next());  //{value: 2, done: false}
console.log(generate.next());  //{value: 3, done: true}
console.log(generate.next());  //{value: undefined, done: true}複製程式碼

這樣子看起來，似乎就是迭代器的步驟。其實，iterator的介面，可以定義成這樣子的形式。但是，generator的作用不僅僅如此。它就像一個狀態機，可以在上一個狀態到下一個狀態之間進行切換。而一旦遇到yield部分，則可以表示當前是可以步驟的暫停。需要等到呼叫next方法才能進行下一步驟。同時，我們還可以使用上一步的結果值，進行下一步的運算。示例：

function* generator(){
  yield 1;
  let value = yield 2;
  yield 3 + value;
};

let generate = generator();

let value1 = generate.next();
let value2 = generate.next();
let value3 = generate.next(value2.value);
console.log(value1);  //{value: 1, done: false}
console.log(value2);  //{value: 2, done: false}
console.log(value3);  //{value: 5, done: true}複製程式碼

這樣的話，就可以將value作為你第三步的引數值，進行使用。

之前說過，generator的next是需要自己呼叫的。但是，我們如何使它自己自動呼叫呢。我們可以使用for...of來自動呼叫next，就像迭代器一樣。示例：

function* generator(){
  yield 1;
  yield 2;
  yield 3;
};
for(let value of generator()){
  console.log(value);
}   //1, 2, 3複製程式碼

其實，之前所講的只是generator的基本使用。generator主要被使用在非同步程式設計領域。因為我們之前所講的特性，非常適合在非同步程式設計中使用。當然了，我們也需要去提一下promise這個非同步程式設計的功臣。

Promise，翻譯過來叫做承諾。我們可以理解為一種約定。大家都知道非同步程式設計的時候，我們一般會使用到回撥函式這個東西。但是，回撥函式會導致的問題，也非常的明顯。示例：

callback1(function(data){
    //...
      callback2(function(data1){
        const prevData = data;
          //...
          callback3(function(){
            //...
              callback4(function(){
                //...
            });
        });
    });
});複製程式碼

回撥函式，寫多了之後我們會發現，這個倒金字塔會越來越深，而我們會越來越難以管理。

這時，或許promise會起到一定的作用。試想一下，為什麼這幾個回撥函式都能在另一個回撥函式之外進行？主要原因：

1. 每個回撥函式，都會無法確定另一個回撥函式會在何時會被呼叫，因為這個控制權不在當前這個程式之中。
2. 每個回撥函式，都或多或少的依賴於上一個回撥函式執行的時間和資料

基於這兩點，我們就會發現，一旦你需要這樣去編寫程式碼，就必須保證你的上一個回撥函式在下一個回撥函式之前進行。我們還可以發現，它們之間缺乏一種約定，就是一旦上一個發生了，無論是正確還是錯誤，都會通知對應的回撥函式的約定。

Promise，或許就是起到了這樣的一種作用。它具備三種狀態：pending、resolved、rejected。它們之間分別對應：正在進行、已解決、已拒絕等三種結果。一個回撥函式會開始從pending狀態，它會向resolved和rejected的兩者之一進行轉換。而且這種轉換是不可變的，即一旦你從pending狀態轉變到resolved狀態，就不可以再變到rejected狀態去了。

然後，promise會有一個then函式，可以向下傳遞之前回撥函式返回的結果值。我們可以寫個promise示例：

new Promise((resolved, rejected) => {
  resolved(1);
}).then(data => {
  console.log(data);
}, err => {
  console.log(err);
}).catch(err => {
  console.log(err);
});  // 1複製程式碼

其實，只需要記住這樣子的一種形式，就可以寫好promise。Promise是一個比較容易書寫的東西。因為它的形式比較單一，而且現在有許多封裝的比較好的非同步請求庫，都帶有Promise的屬性，例如axios。

Promise，還帶有其他的一些API，上面我們也使用到了一個。

• catch：用於指定發生錯誤時的回撥函式。主要是我們之前說過Promise有個不可變的特性，所以，一旦這一個過程中發生錯誤，但是狀態無法轉變，只能在下一個流程中去捕獲這個錯誤。因此，為了預防最後一個流程發生錯誤，需要在最後使用catch去捕獲最後一個流程中的錯誤。
• all：用於將多個Promise例項包裝成一個新的Promise例項。
  • 這個函式需要其中所有的Promise例項都變成Fulfilled時，才會將結果包裝成一個陣列傳遞給下一個Promise。
  • 如果其中有一個Promise例項變成Rejected時，就會將第一個Rejected的結果傳遞給下一個Promise
• race：也是用於將多個Promise例項包裝成一個新的Promise例項。但是這個函式有所不同
  • 如果這個函式中，有一個Promise變成Fulfilled時，它就會將結果傳遞給下一個Promise
• resolve：它會將一個當前物件轉化為Promise物件
• reject：返回一個出錯的Promise物件

Promise可以和之前所講的Generator一起使用，我們可以看一下使用場景：

通過Generator函式來管理流程，遇到非同步操作，就使用Promise進行處理。

function usePromise(){
  return new Promise(resolve => {
    resolve('my name is promise');
  });
}

function* generator(){
  try{
    let item = yield usePromise();
    console.log(item);
  }catch(err){
    console.log(err);
  }
}

let generate = generator();
generate.next().value.then(data => {
  console.log(data);
}, err => {
  console.log(err);
}).catch(err => {
  console.log(err);
});   //my name is promise複製程式碼

或許，你還可以寫出更加複雜的程式。

Class和extends

最後要聊的一個主題就是class。相信抱怨javascript沒有類的特性數不勝數。同時，還需要去了解js的類繼承式概念。那麼，ES6也帶來了我們最歡迎的class module部分。我們就不介紹之前我們是如果去構建物件的了(好像是建構函式)。

那麼，我們可以來看一下，ES6給我帶來的新變化：

class Animal{
  constructor(name){
      this.name = name;
  }

  sayName(){
      return this.name;
  }
}

const animal = new Animal('dog');
console.log(animal.sayName());  // 'dog'複製程式碼

似乎這樣子的形式比之前的建構函式的方式強對了。我們可以理解一下這個結構：

• 其內部的constructor：指向的就是整個類的constructor
• 其內部的函式：這些函式的定義在類的原型上面

因此，上面那個其實可以寫成原先的：

function Animal(name){
    this.name = name;
}
Animal.prototype.sayName = function(){
    return this.name;
}複製程式碼

其實，就是class在ES6中得到了封裝，可以使得現在的方式更加的優美。

之後，我們簡單瞭解一下繼承這個概念吧。

任何的東西，都是需要繼承的。因為我們不可能都是從頭去寫這個類。往往是在原有類的基礎之上，對它進行完善。在ES6之前，我們可能對建構函式完成的是組合式繼承。示例：

function Animal(name){
  this.name = name;
}
Animal.prototype.sayName = function(){
  return this.name;
}
function Dog(name, barking){
  Animal.call(this, name);
  this.barking = barking;
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
Dog.prototype.makeBarking = function(){
  return this.barking;
}
const dog = new Dog('zimo', '汪汪汪');
console.log(dog.makeBarking());   //汪汪汪
console.log(dog.sayName());  //zimo複製程式碼

這樣子的組合式繼承書寫起來，比較麻煩，需要重新去對每個元素設定，然後還要重新定義新類的原型。那麼，我們可以來看一下ES6對於繼承的封裝：

class Animal{
    constructor(name){
        this.name = name;
    }

      sayName(){
        return this.name;
    }
}
class Dog extends Animal{
    constructor(name, barking){
        super(name);
          this.barking = barking;
    }

      makeBarking(){
        return this.barking;
    }
}複製程式碼

這樣子，就可以輕鬆的完成之前的組合式繼承步驟了。如果你對extends的封裝感興趣的話，不妨看一下這篇文章javascript之模擬類繼承

總結

在這裡ES6的內容只是總結了部分，大致可以分為這麼幾個部分：

• 變數定義——let和const
• 函式的變化——箭頭函式、剩餘引數
• 陣列的變動——解構，展開符
• 字串——模版字串、startsWith、endsWith
• Iterator和for...of
• Generator和Promise
• Class和extends

希望，你可以從這些內容中對ES6多一些瞭解，同時，如果你還想深入ES6進行了解的話，最直接的方式就是看書。希望你的程式碼寫的越來越優雅。

如果你對我寫的有疑問，可以評論，如我寫的有錯誤，歡迎指正。你喜歡我的部落格，請給我關注Star~呦。大家一起總結一起進步。歡迎關注我的github部落格