javascript - for...of-loopar, array-destructuring och Array.prototype.entries() - bör de fungera tillsammans?


Så jag har en react-native app. För vad det är värt använder vi redux och redux-saga för hantering av tillstånd/åtgärder. Jag har nyligen märkt att vissa Android-enheter kraschar i en av våra sagas, koden för vilken ser ut så här (typescript):

function* displayTemplates(templateEffectProviders: EffectProvider[]) {
  for (const [i, templateEffectProvider] of templateEffectProviders.entries()) {
    // ...loop code
  }
}

Jag kan garantera att funktionen endast någonsin kallas med en array (förutom att TypeScript-kompilatorn föreslår detta, kallas funktionen endast någonsin med ett array-literal som det enda argumentet, såsom yield call(displayTemplates, [getTemplate1EffectProvider(), getTemplate2EffectProvider()]);)

De flesta enheter hanterar detta utan problem, men vissa Android-enheter (såvitt jag kan se: Samsung Galaxy- eller Note-enheter på Android 7) kraschar vid öppningen av for...of-loopen, med felet:

undefined is not a function (evaluating 't["function"==typeof Symbol&&"function"==typeof Symbol?Symbol.iterator:"@@iterator"]()')

Tydligt hänvisar detta fel till den transpilerade koden, som kokar ner till följande (efter att jag rensat upp det lite):

t = e.entries(),
n = Array.isArray(t),
o = 0,
t = n ? t : t["function"==typeof Symbol&&"function"==typeof Symbol?Symbol.iterator:"@@iterator"]()

(Ja, den där "function"==typeof Symbol-kontrollen är dubblerad, nej jag har ingen aning om varför... Ingen aning om det är relaterat)

Vår .babelrc ser ut så här:

{
  "presets": [
    "babel-preset-react-native-stage-0/decorator-support"
  ],
  "sourceMaps": "inline",
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source"
      ]
    }
  }
}

Det känns för mig som att JS-motorn i de där enheterna kanske inte hanterar utdata från den där Babel-transpileringen av någon anledning, men jag har svårt att lista ut varför. Jag vet till exempel att react-navigation-paketet fick samma felmeddelande när man destrukturerade en sträng, vilket fixades genom att ta bort destruktureringen. Jag vet att jag kan ersätta min for...of-loop med en inkrementerad for-loop, men jag försöker bara förstå varför detta är ett problem så att jag kan ha viss säkerhet i att använda det som en lösning.

Redigera: Min fortsatta läsning och undersökning om detta skulle tyda på att det kan bero på en brist på en Symbol-polyfill i React Native, och att det inte stöds nativt i Android JavaScriptCore. Jag är inte 100% säker på detta, och skulle fortfarande gärna acceptera ett svar som definitivt besvarar frågan.