在你開發微信小程序時能用上的那些ES6特性

| 導語： 在小程序開發的過程當中，有哪些 `ES6` 特性是能夠給咱們帶來便利，提升開發效率的呢？這邊就結合實例，來講一說吧。

做者：舒國政--騰訊開發工程師

@IMWeb前端社區

微信小程序的官方開發工具中，已經集成了 babel 插件對 ES6 語法進行轉換，各類第三方工具天然更少不了了。

因此能夠放心的嘗試使用 ES6，體驗新標準帶來的各類便利之處，省下時間後學習充電，或者早點下班、鍛鍊身體、下廚作個菜，調節生活又放鬆身心，豈不美哉？

那麼，在小程序開發的過程當中，有哪些 ES6 特性是能夠給咱們帶來便利，提升開發效率的呢？這邊就結合實例，一一來講一說吧。

一、箭頭表達式

作前端開發的，開始階段基本會遇到 this 與 閉包 帶來的坑——一些異步操做中，回調函數中丟失了當前函數的上下文對象，致使異步操做完成後，更新原有上下文失敗。

爲了不這個問題，之前你們都是本身用變量保存一個閉包外部上下文的引用，取的名字可能千奇百怪：
that/_this/$this/self…在異步操做完成後的回調中，經過調取這個閉包外層的變量，達到更新回調前函數上下文對象的目的。

ES6 中增長了 箭頭表達式，效果和匿名函數類似，但箭頭表達式更爲簡練，且內部執行時的this 與外側一致，再也不須要每次都額外增長變量引用了。

微信小程序裏，對每一個頁面編寫的代碼邏輯，都做爲生命週期鉤子函數（如：onLoad, onShow, onUnload）和自定義函數（如：各種組件回調函數）寫在 AppService 內。

這兩種函數內，this 都指向當前 Page 對象，在這些函數裏作的各類異步操做，回調內的this 基本都應該仍然保持爲當前 Page 對象。在這個狀況下，使用箭頭表達式能夠減小重複的工做、也減小遺漏 this 時出錯的概率。

2. 數組方法

雖然都說微信小程序 wxml 的 Mustache 語法與 Vue.js 很類似。但聽說是爲了分離 UI 線程和 AppService 線程，微信小程序暫時並不支持 {{value | filter}} 的寫法。

這時候能夠藉助於 ES5 中爲數組對象增長的方法，以前由於瀏覽器兼容性問題，不必定所有能用。現在在移動端了，就盡情用起來吧：

輸出數據前，對後臺傳來的列表數據作一些預處理後再顯示時，一般使用Array.prototype.forEach 和 Array.prototype.map 進行相應處理；
篩選掉無效數據，可使用 Array.prototype.filter。

3. Rest 解構賦值

直到寫這篇文章的時候，小程序官方的組件標準也仍然沒有出來。

目前的一般處理方案，通常是經過 template 配合解構賦值不一樣對象的數據，實現組件各自狀態、事件處理函數互相獨立的效果。

如，有兩個 template 都從 data 中綁定數據。

AppService 中對於這兩個模板建立兩個不一樣對象，便可管理自身狀態，不用擔憂字段名重複的問題。

頁面內渲染模板時，對 bannerState 和 comicListState 字段進行解構便可。

這是個很是重要且實用的特性，基於這個基礎能夠封裝出有具備通用邏輯的基類，實現模塊內部的邏輯閉環，達到組件化開發的效果。

4. 加強的對象字面量

setData()

setData() 中的數據字段名與變量名一致時，不須要重複寫兩遍，上面加載數據的代碼就能夠這樣簡寫：

數據字段較多時，效率會快不少。減小了整理和重構代碼須要調整的地方，下降維護成本。

成員方法

加強的對象字面量寫法，還包括函數的簡寫：

這種簡潔的成員函數寫法，是否是很像 class 中的函數聲明？

5. Class 與繼承

使用 ES5 的 prototype 寫法，實現簡單的類繼承也沒太大問題，但涉及到父類函數調用等狀況，代碼耦合度會變得更高，須要必定經驗才能寫出方便維護的代碼。

經過 ES6 語法來實現類繼承的話，有了統一的標準，寫出的類繼承更加直觀，更方便調整。

6. 塊做用域變量

使用 for 對數據作迭代遍歷時，語句中聲明的 var 型變量名做用域其實提高到了函數頂部，不一樣迭代間忘記處理的話，可能會致使數據污染。

改成使用 ES6 的 let/const 可避免這一狀況，放心使用塊級做用域。

補充

微信小程序使用的 babel 啓用的轉碼規則可能不是最新的，截止目前版本，測試使用如下ES6 會有問題，須要注意。

class 內部聲明的靜態字段；

for...of 語法遍歷對象（直接使用了 Symbol.iterator，移動端可能還沒有實現）；

20170329 更新：新版本開發工具彷佛已經完善了這個問題，可使用下面的 ES6 寫法了：

for...of 用於數組遍歷時，效果與 Array.prototype.forEach 相似，區別是能夠在途中 break中斷循環，無需每次遍歷整個數組。