babel `for-of`循环传输代码不支持部分浏览器

Question

我的 React 项目中有一些 es6 代码是这样的：

``` javascript
for (const v of [0, 1, 2,]) { /* doSth*/ }
```

并且在每个地方传输到 es5 后都运行良好。但是，如果我像这样更改它们：

``` javascript
const arr = [0, 1, 2,];
for (const v of arr) { /* doSth*/ }
```

然后它抛出一个错误 ReferenceError: Can't find variable: Symbol in iPhone 5c。我尝试了 foreach for-in 和纯 for 循环，它们在那个旧设备上都运行良好。但是，我需要做类似 async () => { for (...) { await doSthAysnc; } } 的事情，它不能使用 foreach。更何况，for-of很危险，纯粹的for很丑陋。所以如果可能的话，我更喜欢使用 for-of。谢谢。

@Bergi 嗯，这就是它转换成的代码： javascript ("================================================================"),m=["a","b","c"],e.prev=38,v=c.a.mark(function e(n){return c.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,new Promise(function(e){return setTimeout(function(){return e(n)},1e3)});case 2:case"end":return e.stop()}},e,t)}),y=!0,b=!1,w=void 0,e.prev=43,_=m[Symbol.iterator]();case 45:if(y=(x=_.next()).done){e.next=51;break}return E=x.value,e.delegateYield(v(E),"t2",48);case 48:y=!0,e.next=45;break;case 51:e.next=57;break;case 53:e.prev=53,e.t3=e.catch(43),b=!0,w=e.t3;case 57:e.prev=57,e.prev=58,!y&&_.return&&_.return();case 60:if(e.prev=60,!b){e.next=63;break}throw w;case 63:return e.finish(60);case 64:return e.finish(57);case 65:e.next=69;break;case 67:e.prev=67,e.t4=e.catch(38);case 69:console.log("================================================================"),

Answer 1

直接在 for … of 中使用数组字面量会启用 extra transpiler optimisation，从而导致它不使用可迭代对象。在默认情况下，它将尝试查找在遗留环境中失败的 m[Symbol.iterable] 方法。

里面可以看到三种解法：

启用符号和迭代器
使用 loose mode 希望始终使用数组路径
改用 transform-for-of-as-array babel plugin，它总是转译为数组循环

babel `for-of`循环传输代码不支持部分浏览器

The code of `for-of` circlation transport by babel not support some browser

asynchronous

ecmascript-6

reactjs

babeljs

for-of-loop