.net column
.NET開発者のためのブログメディア

カーソルの移動

JavaScriptのfor文基礎をご紹介!ループ処理する方法

2020年09月29日

SE
JavaScriptの繰り返し構文がなかなか理解できないので悩んでいます。

PM
それは大変ですね。では、繰り返し構文について詳しく見ていきましょう。

JavaScriptの繰り返し処理 – for文の使い方とは?


今回は、JavaScriptの繰り返し構文である、for文の使い方について説明します。
例えば、1から10まで繰り返し処理をしたり、配列の要素数分繰り返し処理したい場面があると思います。
for文の使い方をマスターすれば、繰り返し処理が効率的に実現できます。

JavaScriptのfor文の使い方に興味のある方はぜひご覧ください。

基本的な使い方

JavaScriptのfor文の基本的な使い方を紹介します。
以下のように記述します。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

JavaScriptのfor文はこのように記述します。

配列に対するfor文

JavaScriptでは配列要素の繰り返し処理にfor文が使用できます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

配列.lengthで、配列の要素数が取得できます。
0 ~ 配列要素数-1 までの要素を繰り返し処理で出力しています。

また、配列ではfor-of文で繰り返し処理が行えます。
実際のソースコードを見てみましょう。

実行結果は以下のようになります。

lengthを使用することなく、配列要素の繰り返し処理が実現できています。
このように、JavaScriptでは配列要素の繰り返し処理にfor文が使用できます。

for-in文

JavaScriptではオブジェクトの繰り返し処理にfor-in文が使用できます。
見た目はfor-ofとよく似ていますので、間違えないように注意してください。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

このように、JavaScriptではオブジェクトの繰り返し処理にfor-in文が使用できます。
ちなみに、配列に対してfor-in文を使用すると以下のようになります。

実行結果は以下のようになります。

実行エラーにはなりませんが、配列のインデックスが出力されます。

break

JavaScriptでは、for文のブロックを抜けるには”break”を使用します。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

iが3になったらbreakすることで、for文のブロックを抜けていることが分かります。
このように、JavaScriptではfor文のブロックを抜けるには”break”を使用します。

continue

JavaScriptでは、for文のブロックをスキップするには”continue”を使用します。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

iが3の場合に、continueを実行することでfor文のブロックをスキップします。
このように、JavaScriptではfor文のブロックをスキップするには”continue”を使用します。

forEach

JavaScriptでは、forEach文で繰り返し処理が行えます。
forEach文は配列の繰り返し処理にだけ使用できます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

配列の要素数分のデータが出力されていることが分かります。

また、JavaScriptではラムダ式である”アロー演算子”を使って、forEachメソッドを記述することができます。
実際のソースコードを見てみましょう。

実行結果は以下のようになります。

配列の要素数分のデータが出力されていることが分かります。
こちらの方がシンプルですね。

また、配列のインデックスも取得したい場合は以下のように記述します。

実行結果は以下のようになります。

このように、JavaScriptではforEach文で繰り返し処理が行えます。

SE
なるほど!for分を理解すれば繰り返し構文もマスターできそうです!

PM
ご理解いただけたようで安心しました。ぜひ実際にコードを書いてマスターしてください。

まとめ

いかがでしたでしょうか。
JavaScriptの繰り返し構文である、for文の使い方について説明しました。
for文を使用すれば、配列の要素数分繰り返したり、オブジェクトの要素数分繰り返すことができます。

ここで紹介したfor文やforEach文以外にも繰り返し構文があるので勉強してみてください。
ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags