javascript - for...ofループ、配列の分割代入、Array.prototype.entries() - 一緒に使えるべきですか?
なので、私はreact-nativeのアプリを持っています。参考までに言うと、私たちは状態/アクション管理のためにreduxとredux-sagaを使用しています。最近、一部のAndroidデバイスで私たちのsagaの1つがクラッシュすることがわかりました。そのコードは次のようになっています(typescript):
function* displayTemplates(templateEffectProviders: EffectProvider[]) {
for (const [i, templateEffectProvider] of templateEffectProviders.entries()) {
// ...loop code
}
}
私は、この関数が配列でのみ呼び出されることを保証できます(TypeScript コンパイラがこれを示唆していること以外にも、この関数は常に唯一の引数として配列リテラルでのみ呼び出されます。例えば、yield call(displayTemplates, [getTemplate1EffectProvider(), getTemplate2EffectProvider()]); のように)。
ほとんどのデバイスではこれを問題なく処理できますが、一部のAndroidデバイス(私が見る限りでは、Android 7のSamsung GalaxyやNoteデバイス)がfor...ofループの開始時にクラッシュし、次のエラーが発生します:
undefined is not a function (evaluating 't["function"==typeof Symbol&&"function"==typeof Symbol?Symbol.iterator:"@@iterator"]()')
明らかにこのエラーはトランスパイルされたコードを指しており、少し整理すると次のようになります:
t = e.entries(),
n = Array.isArray(t),
o = 0,
t = n ? t : t["function"==typeof Symbol&&"function"==typeof Symbol?Symbol.iterator:"@@iterator"]()
(はい、その "function"==typeof Symbol チェックは二重になっています、理由は全くわかりません… それが関係しているかも知れませんが、全くわかりません)
私たちの .babelrc は次のようになっています:
{
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
],
"sourceMaps": "inline",
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
私には、なぜかそのデバイスのJSエンジンがそのBabelのトランスパイル結果を正しく扱えないように感じられますが、なぜそうなのかを特定するのに苦労しています。例えば、react-navigationパッケージは文字列の分割代入で同じエラーメッセージを見たことがあり、それは分割代入を削除することで修正されました。for...ofループをインクリメントされたforループに置き換えることはできますが、問題の原因を理解してから修正を適用したいと思っています。それにより、その修正を行うことに自信を持てるようにしたいのです。
編集: 私が引き続き読んだり調査したりした結果、これはReact NativeでSymbolのポリフィルが不足していること、およびAndroidのJavaScriptCoreでネイティブにサポートされていないことが原因かもしれないと思われます。これに関して100%自信があるわけではなく、質問に確実に答えてくれる回答は喜んで受け入れたいと思います。