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.