forEach()

配列の要素ごとに処理する

配列の要素1つずつに対して、渡した関数を順番に実行します。要素と一緒に番号（インデックス）も受け取れます。

サンプルコード

HTML

1<ol id="steps"></ol>

1const steps = ['豆を挽く', 'お湯を注ぐ', '蒸らす'];

2const ol = document.querySelector('#steps');

4steps.forEach((step, i) => {

5 const li = document.createElement('li');

6 li.textContent = step;

7 ol.append(li);

8 console.log(i, step);

9});

ブラウザでの表示

コンソール

配列.forEach(関数) は、配列の要素の数だけ関数を呼び出します。関数は1つ目の引数で要素を、2つ目の引数で番号を受け取れます。

上の例では、配列の手順を1つずつリスト項目にして画面に追加し、番号と内容をコンソールにも出力しています。

forEach() は何も返しません。新しい配列を作りたいときは map()、絞り込みたいときは filter() を使います。

querySelectorAll() の結果にも forEach() が使えます。

HTML

1<button type="button" class="btn">A</button>

2<button type="button" class="btn">B</button>

1document.querySelectorAll('.btn').forEach((btn) => {

2 btn.addEventListener('click', () => {

3 console.log(btn.textContent + ' が押されました');

4 });

5});