ES6部分方法点评（三）：babel-preset-es2015-loose可转换且移动端兼容性较好的语法

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。
原文地址：https://segmentfault.com/a/1190000005688656

前言

由于目前各浏览器对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官网 - 试验转换后的代码

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。
原文地址：https://segmentfault.com/a/1190000005688656