ES6部分方法點評（三）：babel-preset-es2015-loose可轉換且移動端兼容性較好的語法

前言

因爲目前各瀏覽器對ES6兼容性較低，再加上須要兼容歷史上各類版本的瀏覽器，所以，使用編譯器將ES6語法轉譯成ES5語法則勢在必行了。babel是目前最經常使用的ES6轉ES5的工具，但即便是ES5，各瀏覽器的支持度也是不一的，所以便產生了本文，找出一些可以被翻譯成兼容性高代碼的ES6語法。

討論基礎

• 兼容IE10+、android4.0+、ios6+。
• 使用babel的一個preset：babel-preset-es2015-loose，緣由以下：

在android4.0下面報esModule錯誤的問題，以下：
Uncaught TypeError: Cannot assign to read only property '__esModule' of #<Object>。

經查證，發現是構建中babel-es2015 loader的模式問題，會致使Android4.0的用戶有報錯。只須要使用loose mode就能夠解決問題。下面是相關的stackoverflow issue以及對應解決問題的npm包。

• 做者使用webpack做爲構建工具，並使用babel-loader調用babel來進行轉換，但實際上不會對轉換出來的代碼形成任何影響。

可用的ES6語法

• const、let

const是由babel本身來判斷是否拋出異常的，生成的代碼只是普通的var；let則是改了下變量名，用的依然是var。

• 簡單的結構

之因此加「簡單」，是由於簡單的結構轉換出來的也就是簡單的代碼，沒啥問題。可是若是是複雜的結構，那就會用到Symbol.iterator這兼容性不佳的方法了。

• 函數參數默認值
• 箭頭函數
• 函數剩餘參數（Rest Parameters）
• 對象字面量擴展（Object Literal Extensions）中的精簡屬性、精簡方法

這倆其實沒省多少事，因此轉換也很簡單。

• 模板字符串（template string）
• 模塊化

因爲模塊化主要仍是用在開發階段，完事了打包到一塊兒不會有什麼奇怪的代碼出現，所以這一點不須要擔憂。

慎用的ES6語法

• 對象字面量擴展（Object Literal Extensions）中的計算屬性

/* 轉換前 */
const prop2 = "PROP2";
var obj = {
  [prop2]: 3
};
/* 轉換後 */
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var prop2 = "PROP2";
var obj = _defineProperty({}, prop2, 3);

由上可知，這裏用到了一個ES5方法Object.defineProperty,MDN說是IE9+，android/ios全系列的。

• 類

轉換出來的代碼太多，沒細看，咋一看也是有Object.defineProperty，慎用吧，有經驗的兄弟也能夠說一聲會不會出問題。

不可用

• for...of

由於會使用到Symbol.iterator

參考資料

• caniuse.com，用來查瀏覽器兼容性。
• babel 到底將代碼轉換成什麼鳥樣？，感謝@lcxfs1991。
• babel官網 - 試驗轉換後的代碼