1. 程式人生 > >使用es6總結筆記

使用es6總結筆記

UNC ini 上下 類繼承 all block .com erro 設置

1. let、const block 作用域

在ES6以前,var關鍵字聲明變量。無論聲明在何處,都會被視為聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)。

技術分享圖片

  • let 關鍵詞聲明的變量不具備變量提升(hoisting)特性
  • let const 聲明只在最靠近的一個塊中(花括號內)有效
  • 當使用常量 const 聲明時,請使用大寫變量,如:CAPITAL_CASING
  • const 在聲明時必須被賦值 否則報語法錯誤SyntaxError

技術分享圖片

var a = 2;

{

 let a = 3;// 只在這個{}中有效

 console.log(a); // 3

}

console.log(a); // 2

{

 const ARR = [5,6];// const變量名大寫

ARR.push(7);

console.log(ARR); // [5,6,7]

ARR = 10; // TypeError

// const CFF;//const 在聲明時必須被賦值// console.log(CFF);

// 報錯:Uncaught SyntaxError: Missing initializer in const declaration

}

1)塊級作用域示例

var funcs = []

    for (var i = 0; i < 10; i++) {

        funcs.push(function() { console.log(i) })

    }

    funcs.forEach(function(func) {

        func()

})

技術分享圖片

2. 箭頭函數(Arrow Functions)

ES6 中,箭頭函數就是函數的一種簡寫形式,使用括號包裹參數,跟隨一個 =>,緊接著是函數體:

箭頭函數最直觀的三個特點。

  • 不需要function關鍵字來創建函數
  • 省略return關鍵字
  • 繼承當前上下文的 this 關鍵字

技術分享圖片

說個小細節。

當你的函數有且僅有一個參數的時候,是可以省略掉括號的。當你函數返回有且僅有一個表達式的時候可以省略{};例如:

技術分享圖片

技術分享圖片

當然,箭頭函數不僅僅是讓代碼變得簡潔,函數中 this 總是綁定總是指向對象自身。具體可以看看下面幾個例子:

技術分享圖片

3. 函數參數默認值

ES6 中允許你對函數參數設置默認值:

技術分享圖片

4.對象詞法擴展

ES6 允許聲明在對象字面量時使用簡寫語法,來初始化屬性變量和函數的定義方法,並且允許在對象屬性中進行計算操作:

技術分享圖片

5.for...of VS for...in

技術分享圖片

for...in 用來遍歷對象中的屬性:

技術分享圖片

6.

ES6 中有 class 語法。值得註意是,這裏的 class 不是新的對象繼承模型,它只是原型鏈的語法糖表現形式。

函數中使用 static 關鍵詞定義構造函數的的方法和屬性:

技術分享圖片

技術分享圖片

extends 允許一個子類繼承父類,需要註意的是,子類的constructor 函數中需要執行 super() 函數。(必須執行super()否則報錯:Must call super constructor in derived class before accessing ‘this‘ or returning from derived constructor

super作為函數調用時,代表父類的構造函數,不過this指向的子類實例對象。所以如果你在子類Porsche的constructor中執行super(),就相當於執行A.prototype.constructor.call(this)。

當然,你也可以在子類方法中調用父類的方法,如super.showId()。

使用es6總結筆記