JavaScript配列ループ詳解

JavaScriptにおける配列のループ処理

JavaScriptでは、配列内の要素を一つずつ処理するためにループ処理が用いられます。主な方法として、forループ、for...ofループ、forEachメソッドがあります。

forループ

最も基本的なループ方法です。インデックスを使用して要素にアクセスします。

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]); // 各要素を出力
}

• ループブロック内では、numbers[i]を使って現在の要素にアクセスできます。
• i++で各ループの最後にiをインクリメントします。
• i < numbers.lengthでループ継続条件を設定します。
• let i = 0で初期化変数iを0に設定します。
• forキーワードでループを開始します。

for...ofループ

ES6から導入されたループ方法で、配列の要素を直接取り出せます。

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit); // 各要素を出力
}

• ループブロック内では、fruitに現在の要素が入ります。
• fruitsはループ対象の配列です。
• const fruitで各要素を代入する変数を宣言します。

forEachメソッド

配列のメソッドで、コールバック関数を各要素に対して実行します。

const colors = ["red", "green", "blue"];

colors.forEach(function(color) {
  console.log(color); // 各要素を出力
});

• コールバック関数には、要素の値とインデックス（省略可能）が渡されます。
• 引数としてコールバック関数を渡します。
• forEachメソッドは配列に対して呼び出します。

備考

• for...ofループは一般的にシンプルで読みやすいですが、インデックスが必要な場合はforループの方が便利です。
• forEachメソッドはループを途中で中断できないため、条件に応じた処理が必要な場合はforループやfor...ofループが適しています。

JavaScript配列のループ処理：コード解説

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]); // 各要素を出力
}

• console.log(numbers[i]);：現在のインデックス i に対応する配列要素を出力します。
• for (let i = 0; i < numbers.length; i++)：forループを開始します。
  • let i = 0：インデックス i を 0 に初期化します。
  • i < numbers.length：i が配列の長さよりも小さい間ループを続けます。
  • i++：各ループの後に i を 1 増やします。
• const numbers = [1, 2, 3, 4, 5];：数値の配列 numbers を定義します。

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit); // 各要素を出力
}

• console.log(fruit);：現在の要素 fruit を出力します。
• for (const fruit of fruits)：for...ofループを開始します。
  • const fruit：各ループで配列の次の要素を fruit 変数に代入します。
• const fruits = ["apple", "banana", "orange"];：文字列の配列 fruits を定義します。

const colors = ["red", "green", "blue"];

colors.forEach(function(color) {
  console.log(color); // 各要素を出力
});

• colors.forEach(function(color) { ... })：forEachメソッドを使用して配列の各要素に対して処理を行います。
  • function(color)：コールバック関数で、要素の値が color パラメータとして渡されます。
• const colors = ["red", "green", "blue"];：文字列の配列 colors を定義します。

• forEachメソッドはコールバック関数を使い、配列の要素を処理します。
• for...ofループはよりシンプルで読みやすく、要素を直接取り出せます。
• forループはインデックスベースで要素にアクセスする伝統的な方法です。

mapメソッド

配列の各要素に対して関数を適用し、新しい配列を生成します。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 1   0]

filterメソッド

条件を満たす要素のみを含む新しい配列を作成します。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]

reduceメソッド

配列の要素を累積的に処理し、単一の値を返します。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

• whileループ、do...whileループ：一般的なループ構造ですが、配列処理には通常、他の方法が好まれます。
• for...inループ：主にオブジェクトのプロパティをループするため、配列にはあまり適していません。

どの方法を使うべきか

• インデックスが必要な場合：forループ
• 単純に各要素に対して処理を行いたい場合：forEach、for...of
• 配列の要素を合計したり、結合したい場合：reduce
• 新しい配列を作成したい場合：map、filter

注意事項

• forEachは元の配列を変更しません。
• map、filter、reduceは新しい配列を返すため、元の配列は変更されません。