配列のループ の

配列のループについて

配列を扱っていると、配列の各値に対してコードを実行したいことがあります。これを、配列の繰り返し、またはループといいます。

ここでは、途中で配列を変更したくない場合を見ていきます。配列を変換する場合は、代わりに配列の変換の概念ページを参照してください。

forループ

配列を繰り返し処理する最も基本的で、たいていはとても効率のよい方法は、forループを使うことです。詳しくは、forループの概念ページを参照してください。

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

for...ofループ

各繰り返しで値を直接扱いたくて、インデックスがまったく必要ない場合は、for...ofループを使えます。

for...ofは、上で示した基本的なforループと同じように動きます。ただし、ループの中で_インデックス_を変数として扱う代わりに、_値_を直接受け取ることができます。

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

通常のforループと同じように、continueで現在の繰り返しを終了し、breakでループの実行を完全に止められます。

JavaScriptには、オブジェクトのキーを繰り返し処理するfor...inループもあります。for...ofとfor...inには互換性がない点に注意してください。詳しくは、MDNのドキュメントを参照してください。

forEachメソッド

どの配列にもforEachメソッドがあり、これを使っても配列の要素を繰り返し処理できます。

forEachは、コールバックを入力として受け取ります。コールバック関数は、配列の各要素に対して1回ずつ呼び出されます。

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

上の例では、コールバックは現在の要素だけを入力として使っています。必要であれば、コールバックは最大3つの入力を使うことができます。

• 現在の繰り返しの_値_
• 現在の繰り返しの_インデックス_
• _配列_全体

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

コールバックに加えて、forEachは、繰り返しで使うthisコンテキストを省略可能な2番目の入力として受け取ります。例は、MDNの「Using thisArg」セクションで確認できます。

forEachを使うときには、いくつか気をつけておきたいことがあります。

• forEachのループが始まると、繰り返しを止める方法はありません。この状況では、breakとcontinueという文は存在しません。
• ループを始めたあとに配列を変更すると、forEachはおかしな動作をします。末尾に追加した要素は無視され、要素を削除すると別の要素が飛ばされたりすることもあります。こうした問題を避けるには、コールバックの中で元の配列は決して変更しないでください。
• forEachメソッド自体の戻り値はundefinedです。そのため、末尾にほかの配列メソッドをつなげることはできません。
• パフォーマンスのためにコードを最適化する必要があるなら、代わりにforかfor...ofを使うことを検討してください。どちらも約3倍高速です。