Search code examples
reactjsasynchronousecmascript-6babeljsfor-of-loop

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

I had some es6 codes in my react project like this:

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

and it works well after transport to es5 every where. however, if I change them like those:

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

then it throw an error that ReferenceError: Can't find variable: Symbol in iPhone 5c. I tried both foreach for-in and the pure for circulation, they all works well in that old device. But, I need do something like async () => { for (...) { await doSthAysnc; } }, and it cannot use foreach. What's more, for-of was very dangerous, and pure for is very ugly. so if possibly, I prefer to use for-of. thanks.

@Bergi Well, that's the codes it transpiles to: 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("================================================================"),

Solution

  • Using an array literal directly inside for … of enables an extra transpiler optimisation that causes it not to use iterables. In the default cause, it will try to find the m[Symbol.iterable] method which fails in legacy environments.

    In can see three solutions: