[解決済み] JavaScript - myArray.forEachとforループの違いについて

質問

を使うことを勧めている質問をたくさん見かけました。

for (var i = 0; i < myArray.length; i++){ /* ... */ }

の代わりに

for (var i in myArray){ /* ... */ }

は配列の場合、一貫性のない反復処理のため ( はこちら ).

しかし、オブジェクト指向のループを好んでいるようなものは見つからないようです。

myArray.forEach(function(item, index){ /* ... */ });

というのは、私にはずっと直感的なように思えます。

私の現在のプロジェクトでは、IE8との互換性が重要であり、そのために Mozilla のポリフィル を使用することを検討していますが、これがどのように機能するのか 100% 確信がありません。

• 標準の for ループ (上記の最初の例) と、モダン ブラウザによる Array.prototype.forEach の実装の間に違いはありますか。
• モダン ブラウザの実装と、上記でリンクされた Mozilla の実装 (IE8 を特に考慮) の間に違いはありますか?
• パフォーマンスはそれほど問題ではなく、どのプロパティが反復処理されるかの一貫性だけです。

どのように解決するのですか？

との最も本質的な違いは for ループと forEach メソッドでは、前者では break をループの外に出すことができることです。をシミュレートすることができます。 continue に渡された関数から単に戻ることで forEach に渡される関数から戻るだけで、ループを完全に止める方法はありません。

その点を除けば、この 2 つは事実上同じ機能を達成します。もうひとつの小さな違いは、変数のホイスティングによる、forループでのインデックス（およびそれを含むすべての変数）のスコープに関係しています。

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { ... }

// 'i' is scoped to the internal function
arr.forEach(function (el, i) { ... });

しかし、私は forEach 配列の各要素を反復処理する意図を表し、インデックスだけでなく要素への参照も提供します。全体として、それはほとんど個人的な好みに帰着しますが、もしあなたが forEach を使用できる場合は、それを使用することをお勧めします。

2 つのバージョンの間には、特にパフォーマンスに関して、さらにいくつかの実質的な違いがあります。実際、単純な for ループの方が forEach メソッドよりもかなり良いパフォーマンスを示します。 このjsperfテスト .

このようなパフォーマンスが必要であるかどうかは、皆さんの判断次第ですが、ほとんどの場合、速度よりも表現力を優先します。この速度差は、疎な配列を操作する際の基本ループとメソッドの細かいセマンティックの違いによるものと思われ、下記で述べたように この回答 .

の動作が必要ない場合は forEach の挙動が不要で、かつループから早く抜け出したい場合は、Lo-Dash の _.each を代替手段として使うことができます。jQueryを使用している場合は、同じように $.each を提供します。ただ、それぞれのバリエーションでコールバック関数に渡される引数の違いに注意してください。

(たとえば forEach ポリフィルについては、そのルートを選択すれば、古いブラウザでも問題なく動作するはずです)。