你是否想了解在開發微信小程序時需要的(de)ES6特性是什么?下面就是小編給大家帶來(lai)的(de)詳細完整的(de)內容，趕(gan)緊(jin)來(lai)看一下吧。
微信(xin)小程序的(de)官方開發工具中，已(yi)經集成了 babel 插件對 ES6 語法進行(xing)轉(zhuan)換，各(ge)種第三方工具自然更少(shao)不了了。
所以可(ke)以放(fang)心的(de)嘗試使用(yong) ES6，體(ti)驗(yan)新標準帶來的(de)各(ge)種便利之處(chu)，省(sheng)下(xia)時(shi)間后學習(xi)充電(dian)，或者早點下(xia)班、鍛煉身(shen)體(ti)、下(xia)廚做個菜，調(diao)節生(sheng)活(huo)又(you)放(fang)松身(shen)心，豈不美哉?
那(nei)么，在(zai)小程序開發的過程中，有(you)哪(na)些 ES6 特性(xing)是可以給(gei)我們帶來便利，提高開發效(xiao)率的呢?這邊(bian)就結(jie)合實例，一一來說一說吧。
1. 箭頭表達式
做前端開發(fa)的(de)，開始階段(duan)基本會遇到 this 與(yu) 閉包 帶來的(de)坑————一些異(yi)步(bu)(bu)操作中(zhong)，回調函(han)數(shu)中(zhong)丟失(shi)了當前函(han)數(shu)的(de)上(shang)下文對象，導致異(yi)步(bu)(bu)操作完成(cheng)后，更新(xin)原有(you)上(shang)下文失(shi)敗。
為了避免這(zhe)個(ge)問題，以(yi)前大家都是自己用(yong)變量保存一個(ge)閉包外部上下文的引(yin)用(yong)，取(qu)的名字可能千奇(qi)百(bai)怪：
that/_this/$this/self…在異步操作(zuo)完成后(hou)的(de)回調中，通(tong)過調取這個閉包(bao)外層(ceng)的(de)變(bian)量，達到更新回調前函數上下文(wen)對象的(de)目的(de)。
ES6 中增(zeng)(zeng)加了(le) 箭頭表達(da)式，效果(guo)和匿名函數(shu)相似，但箭頭表達(da)式更為簡練，且內部執行時的 this 與外側一致，不再(zai)需(xu)要每次都(dou)額外增(zeng)(zeng)加變量(liang)引用了(le)。
微信(xin)小程序里，對(dui)每個(ge)頁面編寫的(de)代碼邏輯(ji)，都作(zuo)為生(sheng)命周期鉤子函(han)數(shu)(如(ru)：onLoad, onShow, onUnload)和自(zi)定義函(han)數(shu)(如(ru)：各類組件回(hui)調函(han)數(shu))寫在 AppService 內。
這兩(liang)種函數內，this 都指(zhi)向當(dang)前 Page 對(dui)象，在這些函數里做的(de)各種異步操作，回(hui)調內的(de) this 基本(ben)都應該仍然保(bao)持為當(dang)前 Page 對(dui)象。在這個情(qing)況(kuang)下(xia)，使用箭頭表達(da)式可以減(jian)少重(zhong)復的(de)工作、也(ye)減(jian)少遺漏 this 時出錯的(de)幾率。
2. 數組方法
雖然都(dou)說(shuo)微(wei)信小(xiao)程(cheng)(cheng)序 wxml 的 Mustache 語法(fa)(fa)與 Vue.js 很相似。但據說(shuo)是為了(le)分離 UI 線程(cheng)(cheng)和 AppService 線程(cheng)(cheng)，微(wei)信小(xiao)程(cheng)(cheng)序暫時并(bing)不支持 {{value | filter}} 的寫法(fa)(fa)。
這(zhe)時(shi)候可以借(jie)助于 ES5 中為數組對象增加的方(fang)法，之前因為瀏覽器兼容性問題，不一定全部能用。如今在移動端(duan)了，就盡情用起來吧：
輸出數(shu)據前(qian)，對后臺(tai)傳來的(de)列表數(shu)據做一些預處理(li)后再(zai)顯示時，通常使用 Array.prototype.forEach 和 Array.prototype.map 進(jin)行相應處理(li);
篩選掉無(wu)效數據，可以使用 Array.prototype.filter。
3. Rest 解構賦值
直(zhi)到寫(xie)這篇文章的時(shi)候，小程序官方(fang)的組件標(biao)準也仍然(ran)沒(mei)有出(chu)來。
目前的通(tong)常處理方案(an)，一般是通(tong)過 template 配合解(jie)構賦(fu)值不同對象的數(shu)(shu)據，實(shi)現組件各自狀態、事件處理函數(shu)(shu)互(hu)相獨立的效果。
如，有兩個 template 都從 data 中綁定數據。
AppService 中對于這(zhe)兩個(ge)模板創建(jian)兩個(ge)不同對象，即可管理自身狀態，不用擔心字段(duan)名重復的問(wen)題(ti)。
頁面內渲染模板時，對(dui) bannerState 和(he) comicListState 字段進(jin)行解(jie)構即(ji)可。
這是個(ge)非常重要且實用的(de)特性，基(ji)(ji)于這個(ge)基(ji)(ji)礎可以封裝出有(you)具有(you)通用邏輯(ji)的(de)基(ji)(ji)類，實現模塊內部的(de)邏輯(ji)閉環，達到組(zu)件化開發的(de)效果(guo)。
4. 增強的對象字面量
setData()
setData() 中的數(shu)據(ju)字段名與變量(liang)名一致時，不需要(yao)重復寫(xie)兩遍，上面加(jia)載數(shu)據(ju)的代碼就可以這樣簡寫(xie)：
數據(ju)字段較多(duo)時，效率(lv)會快很(hen)多(duo)。減少(shao)了整(zheng)理和重構(gou)代(dai)碼需要調整(zheng)的地方，降低(di)維護(hu)成本(ben)。
成員方法
增強的對(dui)象字面量寫法(fa)，還包括(kuo)函數的簡寫：
這種簡潔的(de)成員函數寫法，是不是很(hen)像 class 中(zhong)的(de)函數聲明(ming)?
5. Class 與繼承
使用(yong) ES5 的 prototype 寫法，實現(xian)簡單的類(lei)繼承(cheng)也沒太大問題，但涉及(ji)到(dao)父類(lei)函數調(diao)用(yong)等情況，代碼耦(ou)合(he)度會變得(de)更高(gao)，需要一定經(jing)驗才(cai)能寫出方便維護(hu)的代碼。
通(tong)過 ES6 語法來實(shi)現類(lei)繼(ji)承的(de)話(hua)，有了統(tong)一的(de)標準(zhun)，寫出的(de)類(lei)繼(ji)承更加直觀，更方(fang)便調整。
6. 塊作用域(yu)變量
使用(yong) for 對數據(ju)做迭代遍歷時(shi)，語(yu)句中聲明的 var 型變量名(ming)作用(yong)域其實提升到(dao)了(le)函數頂部，不同迭代間忘記(ji)處理的話(hua)，可能會(hui)導致數據(ju)污染。
改為使用 ES6 的(de) let/const 可避(bi)免這一情況，放心(xin)使用塊級作用域。
補充：
微信小程(cheng)序使用的(de) babel 啟用的(de)轉碼規則可能(neng)不是最新(xin)的(de)，截止目前版本，測試使用以(yi)下(xia) ES6 會有問題，需要注(zhu)意。
class 內部聲明的靜態字段;
for...of 語法遍歷對(dui)象(直(zhi)接使用(yong)了(le) Symbol.iterator，移動端可(ke)能尚未實現);
20170329 更新：新版本開發工具似乎(hu)已經完善(shan)了(le)這(zhe)個問題，可以使用下面(mian)的 ES6 寫(xie)法(fa)了(le)：
for...of 用(yong)于數組(zu)遍(bian)歷(li)(li)時，效果與 Array.prototype.forEach 類似，區別是可以(yi)在途中 break 中斷(duan)循環，無需每(mei)次遍(bian)歷(li)(li)整個數組(zu)。
以上就是在(zai)開發微(wei)信小程序時需要(yao)的ES6特性是什(shen)么的全部內容了，大家都學會了嗎?
