現代WebGIS開發教程之ES6基礎3——ES6經常使用新特性

開端

 上篇講述如何調試ES6項目，本篇將介紹ES6的基本知識，涉及的主要是ES6特性，若是系統學習請找相關資料，強烈推薦《ES6 標準入門(第3版)》，在線版本http://es6.ruanyifeng.com/

ES6經常使用特性

定義變量和常量

 ES6推薦使用let定義變量，使用const定義常量，而不是原來的var。爲啥，主要有如下緣由
 1.var容許重複定，而let和const不能在同一做用域中重複定義。以下

//如下代碼沒毛病
 function fun(){
    var a =3;
    console.log(a);
    var a = 4;
    console.log(a);
}

//語法錯誤
 function fun(){
    let a =3;
    console.log(a);
    let a = 4;
    console.log(a);
}

 2.let和var是塊級做用域，var是頂級做用域。頂級做用域用起來一時爽，用多了就要呵呵了，不知道變量何時就被改了，由於在哪裏都能定義，在哪裏都能引用。

箭頭符號

ES6中不少函數定義都會使用箭頭符號"=>"，好比：

fun=()=>{
    const a =3;
    console.log(a);
}

 爲何放棄原來的定義方法，換成箭頭符號，作過JavaScript中前端人員都有被this搞糊塗過經歷，有了箭頭符號就是指路明燈。不再會把this是啥搞錯啦，由於箭頭符號定的函數體內，this確定會是函數所在的對象。

面向對象開發

 是的ES6支持面向對象開發，能夠定義類，支持類的繼承，靜態成員，屬性設置，包羅萬象。
類的定義以下

//類定義
export default class Animal{
    // 構造函數
    constructor(nickName){
        this._nickName = nickName;
        Animal.count ++;
    }
    // 公有成員函數
    speak(){return "hello";}
    // 私有成員函數
    _say(){return "zzz";}
    // 獲取屬性
    get NickName(){return this._nickName;}
    // 設置屬性
    set NickName(value){this._nickName = value;}
    // 靜態方法
    static showCount(){return Animal.count;};
}
// 靜態變量
Animal.count = 0;

類的繼承也不是問題

export default class Cat extends Animal{
    constructor(nickName){
        super(nickName);
    }
    playGame(){return "let's play";}
}

export default class Dog extends Animal{
    constructor(nickName){
        super(nickName);
    }
    doorGuard(){return "door guard";}
    speak(){
        return super.speak() + ', I\'m ' + this._nickName;
    }
}

Promise和async

 前端的IO或者服務訪問都是異步的，好比http請求啥的。異步就得有個回調機制Promise就是爲這個來作的，經常使用方法resolve，reject，這是本身定義Promise對象用的，可是對於伸手黨，更熟悉的應該是then吧。這裏不展開將如何定義Promise，使用是這樣的。

fetch(`${url}`)
    .then(resp => resp.json())
    .then(json => json.result)

 這麼時候的時候還算方便，可是若是須要按順序調用多個服務呢，那麼就須要在then中嵌套fetch，這樣就會嵌套好多層，代碼那個酸爽。有什麼辦法呢，因而async出現了這貨能讓你不搞嵌套，寫法

export async function getScenes(sceneName) {
  const result = await fetch(`${url}`)
    .then(resp => resp.json())
    .then(json => json.result);
  return result;
}

 調用，要加上await。

async function call() {
    const result = await getScenes('');
}

 不少人覺得fetch是ES6的方法，然鵝不是，fetch是DOM接口，因此在node.js中是沒法使用的，特此說明。

其餘

1.模板字符串，不再用拼湊字符串啦，看上一節例子本身找亮點。
2.數組方法，我講的是find，map，reduce這些，你肯定不是講hadoop？😲誰用誰知道，比大家寫for不知道強了多少倍了
3.解構賦值，Object.assign，嗯，塞私貨真方便
4.Reflect和Proxy，元編程瞭解一下，各類動態特性，讓你眼花繚亂
5.Decorator，能夠預見一波AOP的騷操做

「其餘」一節提到的沒有搞定以前，不要說本身精通JavaScript，你只是敲開了JavaScript的門，尚未進去！