WebDesigner's Memorandumウェブデザイナーの備忘録

JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法

JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法

配列でループ処理をしたいとき、forEachを使うとかなりラクに実装できます。

ただし、forEach内ではcontinuebreakが使えません。
今回はその代替となる方法をまとめておきます。

forEachについて

forEachを使うと、配列に含まれる要素を順に取り出してコールバック関数に渡して処理ができます。

let days = ['日', '月' ,'火', '水', '木', '金', '土'];
days.forEach((day, index) =>{
  console.log(day);
});

これで配列がループされて、コンソールに各配列の値が表示されます。

日
月
火
水
木
金
土

continueと同じ動きにする

forEach内でreturnすると、その時点で次のループへスキップされます。

let days = ['日', '月' ,'火', '水', '木', '金', '土'];
days.forEach((day, index) =>{
  if(index === 1){
    return; // 「月」のみスキップされる
  }
  console.log(day);
});

これで「月」のみスキップされます。

日
火
水
木
金
土

ちなみに、returnでもreturn trueでもreturn falseでも関係なくすべて同じ結果になります。

breakと同じ動きにする

breakと同じ動きはforEachではできないため、someを利用します。

使い方はforEachとほとんど変わりませんが、trueを返すとその時点で処理が終了する特性を持っています。

let days = ['日', '月' ,'火', '水', '木', '金', '土'];
days.forEach((day, index) =>{
  if(index === 1){
    return true; // 「月」の時点で終了する
  }
  console.log(day);
});

これで「月」の時点で終了するので、「日」のみがコンソールに出力されます。

ただ、someは本来テスト関数として定義されていて本来の使い方とは違いますし、名前からしてループ処理だと判断しにくいのでオススメはしません。

そこまでするくらいだったら素直にforにしてbreakを使った方がよさそうです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね