web-dev-qa-db-ja.com

JavaScriptのforEachとforループの違い

私は疑問に思っています：JavaScriptのforEachループとforループの間に大きな違いはありますか？.

この例を考えてみましょう：

var myArray = [1,2,3,4];

myArray.forEach(function(value) {
  console.log(value);
});

for (var i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

これが私の研究の一部です：

  1. パフォーマンス： JsPerf によると：forEachはforループより少し遅いです。
  2. 使いやすさ：forEachループの場合、コールバックから中断/戻る方法はありません。

例：数値が素数かどうかを調べたいとします。 forEachループを使用するよりもforループを使用する方がはるかに簡単だと思います。

  1. 読みやすさ：forループを使用すると、コードにforEachを含めるよりもコードが読みやすくなります。
  2. ブラウザの互換性：forEachはIE <9ではサポートされていません。そのため、コードにシムが導入されています。

私の質問は：

  1. ForEach for forループの利点は何ですか？
  2. どのシナリオでは、forEachの方が適しています。
  3. それがJavaScriptになったのはなぜですか？なぜそれが必要だったのですか？
javascriptloopsfor-loopforeach
22
sachinjain024

forEach は Array プロトタイプのメソッドです。配列の各要素を反復処理し、それをコールバック関数に渡します。

つまり、基本的に、 forEach は、ユースケース "arrayの各要素をfunctionに渡す"の省略形です。これが私が思う一般的な例です Array.forEach は、forループと比較して非常に便利です。

// shortcut for document.querySelectorAll
function $$(expr, con) {
    return Array.prototype.slice.call((con || document).querySelectorAll(expr));
}

// hide an element
function hide(el) {
    el.style.display = 'none';
}

// hide all divs via forEach
$$('div').forEach(hide); 

// hide all divs via for
for (var divs = $$('div'), i = 0; i < divs.length; i++) {
    hide(divs[i])
}

ご覧のとおり、forEachステートメントの可読性は、forループに比べて向上しています。

一方、forステートメントの方が柔軟性があります。必ずしも配列が含まれるとは限りません。通常のforループのパフォーマンスは、関係する各要素の関数呼び出しがないため、わずかに優れています。これにもかかわらず、forステートメントとして記述できる場合は、forEachループを回避することをお勧めします。

18
Lea Rosema

forEachループでは、配列を反復する方法を制御しません。従来のforループでは、必要に応じて反復アルゴリズムを選択できます（i++; i--; i+=2*iなど）。

ただし、forEachループの方がはるかに使いやすいです。iカウントをすべて処理してarray[i]オブジェクトを見つける必要はありません。JSがそれを行います。

19
naivists
>> sparseArray = [1, 2, , 4];

>> sparseArray.forEach(console.log, console);
1 0 [1, 2, 3: 4] 
2 1 [1, 2, 3: 4] 
4 3 [1, 2, 3: 4] 

>> for(var i = 0; i < sparseArray.length; ++i) { console.log(sparseArray[i]) };
1
2
undefined
4

forEachは、JavaScriptで表現力豊かなリスト理解スタイルを可能にする最近の追加です。ここではforEach設定されていない要素をスキップするであることがわかりますが、forループでできる最善の方法はundefinedを確認することですまたはnull。どちらも値として設定でき、forEachで取得できます。欠損値が予想されない限り、forEachはforループと同等ですが、everyが必要な早期停止はできないことに注意してください。

9
Phil H

簡単に言えば、以下の記事と調査によると、主な違いは次のようです：

Forループ

  1. これは、配列を反復する元の方法の1つです。
  2. 速いです
  3. あなたはこのキーワードを使ってそれからbreakすることができます
  4. 私の意見では、それは主に整数（数値）を使用した計算に使用されます
  5. パラメータは(iterator, counter, incrementor)です

ForEachループ

  1. 配列を反復するコードが少ない新しい方法です
  2. 読みやすい
  3. スコープ内で変数を維持できます
  4. i <= >= etc.....を使用すると、偶発的なエラーの可能性が低くなります
  5. パラメータは(iterator, Index of item, entire array)です

https://alligator.io/js/foreach-vs-for-loops/

0
jso1919