1. 程式人生 > >ES6(01)

ES6(01)

ES6:

在不改變原理的基礎上,純簡化了程式碼

let: 代替var宣告變數:

 特點:

  1. 不會被宣告提前

    let會檢查在當前作用域內,let之前不允許提前使用該變數

  2. 相同作用域內不允許重複let第二個變數

  3. 僅在當前塊作用域內有效

    問題: 塊內的變數即使不執行,也會被提前到塊外部,汙染外部!

    解決: 用let代替var,將變數限定在塊內

    let為js增加了塊作用域: if  else  else if  for  while do...while  switch..case

    原理: 匿名函式自調

 何時: 只要宣告變數,一律用let

 

 用let+for實現閉包結構:

 for(let i=0;i<xxx.length;i++){
  //(function(i){
    迴圈體
  //})(i);
 }

 

引數增強:

 1. 預設值:

  .indexOf(val, fromi=0){

    //fromi=fromi||0;

  }

  強調: 帶預設值的引數必須放結尾

 2. rest: 剩餘: 代替arguments

  arguments的問題:

   1. 不是陣列,而是類陣列物件! 用不了陣列API

   2. arguments只能獲得全部引數! 無法有選擇的獲得部分引數

   3. arguments名字太長!

  解決: rest

  何時: 今後,只要代替arguments獲得不確定個數的引數值時,都用rest

  如何: 在定義函式時的引數列表中:

    function fun(引數1, 引數2, ...陣列名)

  相容:

    類陣列物件轉為陣列:

      var arr=Array.prototype.slice.call(arguments)

           //arguments.slice()//完整複製arguments

  強調: rest的引數陣列必須放在引數列表結尾

 

 3. spread: 散播: 代替apply 打散陣列型別的引數

  為什麼: apply的主要目的不是打散陣列型別引數,而是替換函式中的this。只不過,可以順便打散陣列型別引數

  何時: 如果專門只希望打散陣列型別引數,不附加其它操作時。

  如何: 在呼叫函式時的引數值()內

   函式(...陣列)

  相容: 函式.apply(null,陣列)

 

箭頭函式: 對一切回撥函式和匿名函式的簡化

 1. 去function換箭頭=>

 2. 如果只有一個引數,可省略()

 3. 如果只有一句話,可省略{}

     如果僅有的一句話還是return,則可省略return

 特點: 箭頭函式內外共用this!

   優: 不用bind,也能讓內外this統一

   問題: 有時,反而希望內外this不通用

   比如: btn.onclick=function(){ ... this->btn ... }

                  ()=>{ ... this->window ...} 錯誤

                  e=>{ ... e.target->btn ...} 正確

 

模板字串: 簡化的是大段字串複雜字串的拼接

 何時: 只要複雜的字串拼接,都用模板字串

 如何:

  整個字串被` `包裹

  在``內支援換行,"",'',而不會發生字元衝突

  需要動態拼接表示式的值: ${表示式}

解構: 將一個物件中的屬性或陣列中的元素,拆解給多個變數

 何時: 簡化批量賦值!

 如何: 3種:

  1. 陣列解構: 將陣列中的元素值,拆解後,賦值給多個變數

    /*var*/ [變數1,變數2,...]=[元素1,元素2,...]

    執行結果:

     變數1=元素1;

     變數2=元素2;

    匹配: 下標對下標

  2. 物件解構: 將物件中的屬性值,拆解後,賦值給多個變數

{屬性1:變數1,屬性2:變數2,...}={ 屬性1:值1,屬性2:值2,...}

  3. 引數結構:

   定義函式時:

    function fun(...,[引數1,引數2,...])

                 {屬性1:變數1,屬性2:變數2,...}

   呼叫函式時:

    fun(...,arr)

         obj

for of: 簡化for迴圈

 for(var elem of arr)

   其中of 會依次取出arr中每個元素值,自動儲存到變數elem中

 缺點: 1. 只能獲得元素值,無法獲得當前位置i

      2. 只能從頭到尾逐個完整遍歷,不能有選擇的遍歷

      3. 如果陣列中是原始型別的值,則elem是按值傳遞得到的副本。修改副本,無法影響原陣列元素

 強調: for...of,只能遍歷數字下標的陣列或類陣列物件

      for...in,專門遍歷自定義下標的關聯陣列或物件

 

class: 對OOP

 1. class定義:

   class 型別名{

    constructor(屬性引數列表){

      this.屬性名=屬性引數;

    }

    方法名(){ ... this.屬性名 ... }

    ... ...
   }

 如何: 3步:

  1. 用class封裝建構函式和原型物件方法定義

  2. 建構函式名提升為class名,建構函式更名為固定的關鍵詞constructor

  3. 直接寫在class中的方法,預設都儲存在原型物件中

 2. 繼承:

  1. setPrototypeOf -> extends father

  2. 借用建構函式: super(引數值列表)

    不再需要.call(this,...)

  強調: class Flyer已經不允許直接呼叫

 3. 訪問器屬性: 驗證, 虛擬/計算屬性

  class內:

   get 訪問器屬性(){}

   set 訪問器屬性(val){ ... ... }

 4. 靜態方法:

   static 方法名(){}

 

*****Promise: 

 什麼是: 對傳統回撥函式的規範寫法

 為什麼: callback hell

 何時: 只要定義帶回調函式引數的函式時,都要用promise

 如何:

  1. 定義接收回調函式的主函式

  function fun(){

    return new Promies(function(callback){

      ...

      callback();

      ...

    })

  }

   1. 去掉引數中的callback

   2. 用return new Promise(function(){

      原函式邏輯

    })

   3. 將callback寫在Promise物件的引數函式中的引數列表中

  2. 呼叫主函式執行,並傳入下一個要執行的回撥函式

   fun()//return Promise

    .then(callback)

   如何:

     1. 主函式fun不再接收任何回撥函式引數

     2. 在主函式呼叫後用.then(callback),將callback傳給fun中的Promies物件的callback引數。

 

 異常處理:                .then()  .catch(fun)

  return new Promise(function(resolve,reject){

    //函式體

    //如果執行成功

      //呼叫resolve()

    //否則

      //呼叫reject()

  })

 Promise.all

  什麼是: 等待多個任務都完成後,才開始後續操作

  何時: 如果需要等待多個任務時

  如何: Promise.all([

         支援Promise的函式(),

           ... ... ,

       ]).then(function(){ 後續任務 })