es6語法學習

雲筆記閱讀鏈接：http://note.youdao.com/groupshare/?token=44F78D26DFC6440185C4C353C8F82A43&gid=25271447

let

es5中沒有塊級作用域的概念，只有全局作用域和函數作用域，在if或者for循環定義變量的時候，導致變量變成全局作用域中變量；
let定義的變量只在let所在的塊級作用域中有效，不會污染全局變量。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();   // 6

const

==const==聲明的變量不得改變值，意味着，const一旦聲明變量，就必須立即初始化，不能留到以後賦值。

const的作用域與let命令相同，只在聲明所在的塊級作用域內有效。

if(true){
    const Max = 5;    
}
console.log(Max);   // Uncaught ReferenceError: Max is not defined

==const==聲明的變量也是不提升的，同樣存在暫時性死區，只能在聲明的位置之後使用。==同時不可重複聲明。==

對於複合型的變量，變量名不指向數據，而是指向數據所在的地址。==const==命令只是保證變量名指向的地址不變，並不保證該地址的數據不變。

const a = [];
a.push('hello');    // 可執行  a[0]='hello'
a.length = 0        // 可執行， a = [];
a = ['dave'];       // 報錯

class類的概念

新的class類寫法讓對象原型的方法更加清晰，更像面向對象編程的語法。

class Animal{
    constructor(){           // 構造方法
        this.type = 'anmial';    // this關鍵字代表實例對象
    }
    says(say){
        console.log(this.type + 'says' + say);
    }
}
let animal = new Animal();
animal.says('hello');  // animal says hello

class Cat extends Animal{
    constructor(){    
        super();        // 繼承時必須，指代父類的實例
        this.type = 'cat';
    }
}

let cat = new Cat();
cat.says('hello');  // cat says hello

constructor內定義的方法和屬性是實例對象自己的，而constructor外定義的屬性和方法是所有實例對象可以共享的。

super關鍵字，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因爲子類沒有自己的this對象，而是繼承父類的this對象，然後對其進行加工。如果不調用super方法，子類就得不到this對象。

箭頭函數（arrow function）

function(x, y) { 
    x++;
    y--;
    return x + y;
}
(x, y) => {x++; y--; return x+y}    // es6語法

當使用箭頭函數時，函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。並不是因爲箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，它的this是繼承外面的，因此內部的this就是外層代碼塊的this。

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

setTimeout被調用的對象是window，所以如果不使用箭頭函數，則setTimeout函數中的this對象指向的是window對象，this.type就爲undefined，但是由於箭頭函數沒有自己的this，而是繼承外面的this對象，故this對象指向Aniaml,所以this.type＝animal

Template string

當需要插入大段的html代碼到dom節點中，傳統寫法非常麻煩

$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);

但是通過es6的語法則非常方便

$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

用==反引號（`）來標識起始，用${}來引用變量==，而且所有的空格和縮進都會被保留在輸出之中

Set和Map數據結構

set數據結構類似於數組，不同的是成員的值都是唯一的，沒有重複的值

var s = new Set();
[1,2,3,4,5,3,2,1,8].map( x => {s.add(x)});
console.log(s);  // 1,2,3,4,5,8

通過add方法向set數據結構中添加成員，但是不會添加重複的值
注：set數據結構提供了一種數組去重的方法

var arr = [1,2,3,4,5,3,2,1,8];
var arr1 = new Set(arr);   
console.log(arr1);   // 1,2,3,4,5,8

Set結構的實例屬性有：

• Set.prototype.constructor: 構造函數，默認就是Set函數
• Set.prototype.size: Set實例成員變量的總數

Set結構的實例方法有：

• add(value): 添加某個值，返回set函數本身
• delete(value): 刪除某個值，返回一個布爾值，表示刪除成功或者失敗
• has(value): 返回一個布爾值，表示改值是否爲set的成員
• clear(): 清除set所有成員，沒有返回值

Array.from方法可以將Set結構轉爲數組。

var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items);

該方法提供了數組去重複的一種新方法

function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]