【徹底解説】JavaScriptで配列をループする方法：forEach編

JavaScriptで配列をループする方法：forEach編

forEachループは、配列の各要素に対して順番に処理を実行する関数です。ループ内で処理したい内容を記述した関数を引数として渡すことで、配列の各要素に対してその関数が実行されます。

forEachループのメリット

• 簡潔で分かりやすいコードを書ける
• 配列の要素の順番通りに処理が行われる
• 処理したい内容を自由に変更できる

• 配列の要素を途中で変更できない
• ループを途中で抜けることができない

// 配列を定義
const numbers = [1, 2, 3, 4, 5];

// forEachループを使って配列の各要素を出力
numbers.forEach(function(number) {
  console.log(number);
});

上記のコードは、numbersという配列の各要素をconsole.logを使って出力する例です。forEachループの引数には、処理したい内容を記述した関数を受け取ります。この例では、numberという引数を受け取り、その値を出力しています。

• 配列の要素の合計値を計算
• 配列の要素の最大値と最小値を求める
• 配列の要素をフィルタリング
• 配列の要素に対して処理を実行

• forEachループは、配列の要素を直接変更することはできません。要素を変更したい場合は、mapなどの他のループを使う必要があります。
• forEachループは、ループを途中で抜けることができません。ループを途中で抜けたい場合は、breakなどの制御構文を使う必要があります。

補足

forEachループ以外にも、forループやwhileループなど、JavaScriptには様々なループ処理があります。それぞれのループ処理の特徴を理解して、用途に合わせて使い分けることが重要です。

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

numbers.forEach((number) => {
  console.log(number);
});

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

let sum = 0;

numbers.forEach((number) => {
  sum += number;
});

console.log(sum); // 出力: 15

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

let max = numbers[0];
let min = numbers[0];

numbers.forEach((number) => {
  if (number > max) {
    max = number;
  }
  if (number < min) {
    min = number;
  }
});

console.log(max); // 出力: 5
console.log(min); // 出力: 1

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

const evenNumbers = [];

numbers.forEach((number) => {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
});

console.log(evenNumbers); // 出力: [2, 4]

const users = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
  { name: "Bob", age: 40 },
];

users.forEach((user) => {
  console.log(`名前: ${user.name}, 年齢: ${user.age}`);
});

上記は、forEachループを使ったサンプルコードです。これらのコードを参考に、forEachループの使い方を理解してみてください。

JavaScriptで配列をループする方法：その他の方法

forループ

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

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

whileループ

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

let i = 0;

while (i < numbers.length) {
  console.log(numbers[i]);
  i++;
}

for...ofループ

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

for (const number of numbers) {
  console.log(number);
}

map関数

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

const doubledNumbers = numbers.map((number) => number * 2);

console.log(doubledNumbers); // 出力: [2, 4, 6, 8, 10]

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);

console.log(sum); // 出力: 15

上記は、forEachループ以外の代表的なループ処理の方法です。それぞれの方法の特徴を理解して、用途に合わせて使い分けることが重要です。

ループ処理の方法はたくさんありますが、どれを使うべきかは状況によって異なります。以下は、ループ処理を選ぶ際のポイントです。

• 処理内容がシンプルであれば、forEachループやforループを使う
• 処理内容が複雑であれば、whileループを使う
• 配列の要素を新しい配列に変換したい場合は、map関数を使う
• 配列の要素をフィルタリングしたい場合は、filter関数を使う
• 配列の要素を累積的に処理したい場合は、reduce関数を使う

これらのポイントを参考に、最適なループ処理方法を選んでください。