【JavaScript】forEachの実行回数を制御する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのArrayメソッドの代表格、forEachで実行回数を制御する方法について解説します。

以前に、forEachの最後に特定の処理をしたい場合の実装方法も紹介しました。

【JavaScript】forEachの最後に特定の処理をしたい場合 | Sample-Code付き

【 forEachの最後に特定の処理をしたい場合】

上記の記事では、事前にループをcountする変数を用意して、forEachする配列のlengthとcounterが一致したら処理を実行する条件文で最後に特定の処理をしています。

今回、紹介する方法では、counterを用意する必要はなく、forEach()の第二引数として扱える index-番号を活用します。

1 forEachの実行回数を制御する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 最近の投稿

forEachの実行回数を制御する方法

Array.prototype.forEach()は、呼び出したArrayの中身をすべて取り出して処理をする前提の Array-Methodなので、ループ構文(Loop-Syntax)のように、break-文や continue-文は使えません。

回数によって何か処理をしたい場合(実行回数・制御)は、for-文, for-in-文, for-of-文などのループ構文(Loop-Syntax)を使うのが本来はBestです。

ただ、どうしても forEach() で回数を制御したい場合は、counter を別途用意するか、内部のindex を使って制御しましょう！

// < forEach の回数制御 >

// forEach は、break, continue 文を使えない！ => すべて処理する前提の Array-Method

// ただ、どうしても forEach() で回数を制御したい場合は、counter を別途用意するか、
// 内部のindex を使って制御しましょう！

const devRobotama = ['ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

// 1. indexで回数を制御するPattern
devRobotama.forEach( (robotama, index) => {

    // 最初の2回だけ、value が必要な場合
    if (1 >= index) console.log(robotama);
    else return;
});