.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文が使用できます。

 

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

 

// 配列の要素数分繰り返し
for ( let i = 0; i < array.length; i++ ) {
console.log ( array[ i ] );
}

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

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

 

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

 

// 配列の要素数分繰り返し
for( var item of array ) {
console.log( item );
}

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

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

for-in文

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

 

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

 

// personオブジェクトの要素を取り出す
for( var item in person ) {
console.log( item + “” : “” + person[ item ] );
}

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

 

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

 

// 配列の要素数分繰り返し
for( var item in array ) {
console.log( item );
}

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

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

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メソッドを記述することができます。
実際のソースコードを見てみましょう。

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

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

 

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

 

array.forEach( function( item, index ) {
console.log( ‘index: ‘ + index + ‘, item: ‘ + item );
});

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

 

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

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

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

まとめ

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

 

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


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

求人一覧

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

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