JavaScriptのforEachとindexの使い方5選！初心者も簡単に理解できる解説

はじめに

この記事を読むことで、JavaScriptのforEachとindexの使い方が理解できるようになります。

サンプルコード付きの解説で、初心者でも簡単に使いこなせるようになるでしょう。

●基本的なforEachとindexの使い方

forEachは、配列の要素を一つずつ取り出して処理を行う際に使われるメソッドです。

indexは、その要素が配列の何番目にあるかを示す数値です。

○サンプルコード1：配列の要素を取得・操作する基本的な例

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

numbers.forEach((number, index) => {
  console.log(`要素${number}は、配列の${index}番目です。`);
});

●indexを使った要素の操作

indexを利用することで、配列の特定の要素に対して操作を行うことができます。

○サンプルコード2：配列の特定の要素に操作を適用する例

const animals = ['dog', 'cat', 'rabbit', 'elephant'];

animals.forEach((animal, index) => {
  if (index === 1) {
    console.log(`2番目の要素は${animal}です。`);
  }
});

●forEachを使ったDOM要素の操作

forEachを使って、HTML内のDOM要素を操作することもできます。

○サンプルコード3：クラス名をもとにDOM要素を操作する例

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

const items = document.querySelectorAll('.item');

items.forEach((item, index) => {
  item.textContent = `これは${index + 1}番目の要素です。`;
});

●応用例：forEachとindexを組み合わせた使い方

さらに応用的な使い方として、forEachとindexを組み合わせて活用できます。

○サンプルコード4：複数の配列を同時に扱う例

const names = ['Alice', 'Bob', 'Charlie'];
const ages = [30, 25, 22];

names.forEach((name, index) => {
  console.log(`${name}は${ages[index]}歳です。`);
});

○サンプルコード5：条件を満たす要素だけを操作する例

const scores = [80, 60, 90, 40, 75];

scores.forEach((score, index) => {
  if (score >= 70) {
    console.log(`合格！${index + 1}番目の受験者は${score}点です。`);
  } else {
    console.log(`不合格…${index + 1}番目の受験者は${score}点です。`);
  }
});

●注意点と対処法

forEachは、途中でループを抜けることができません。

そのため、特定の条件でループを抜けたい場合は、代わりにforループや、Array.prototype.some()、Array.prototype.every()などを使用することを検討してください。

まとめ

この記事では、JavaScriptのforEachとindexの使い方を5つ紹介しました。

初心者でも分かりやすいサンプルコード付きの徹底解説で、あなたもすぐに使いこなせるようになるでしょう。

応用例や注意点をふまえつつ、是非実践してみてください。