JavaScript 再入門(その10) ループ

ループ

JavaScript の ループ処理には while と for の2つがあります。

while

while ループは評価が true の間、ループの処理(イテレーション)を繰り返します。

while ( 評価 ) {
  イテレーション // 評価が true の間 ループの処理を繰り返す
}
let i = 0 ;
while ( i < 3 ) {
	console.log( i ) ;
	++i ;
}
// 0
// 1
// 2

do…while ループ

評価をイテレーションの下に持っていくことにより、必ず1回はイテレーションを実行する。

let i = 3 ;
do {
	console.log( i ) ;
} while ( i < 3 )
// 3

for

for ループは、初期値から評価が true の間指定された間隔でループの処理(イテレーション)を繰り返します。

for( 初期値 ; 評価 ; 間隔 ) {
 イテレーション // 評価が true の間 ループの処理を繰り返す
}
for ( let i = 0 ; i < 3 ; ++i ) {
	console.log( i ) ;
}
// 0
// 1
// 2

for の式は省略可能です。

let i = 0 ;
for ( ; ; ) {
	if ( i > 3 ) break ;
	console.log( i ) ;
	++i ;
}
// 0
// 1
// 2
// 3

for…in *ES2015

for…in 文はオブジェクトからプロパティを取り出します。

let obj = {
	name: 'さくら',
	age: 50,
	company: 'とらや',
	country: '葛飾柴又',
}
for ( let pro in obj ) {
	console.log( pro + ': ' + obj[pro] ) ;
}
// name: さくら
// age: 50
// company: とらや
// country: 葛飾柴又

for…of *ES2015

for…of 文は反復可能なオブジェクト( Array / String / Map 等)に対してループを作成します。

Array (配列)に対して for…of

let ary = [ '寅次郎' , 'さくら' ,  'タコ社長' , 'ひろし' , 'みつお' , 'ごぜんさま' ] ;
for ( let val of ary ) {
	console.log( val ) ;
}
// 寅次郎
// さくら
// タコ社長
// ひろし
// みつお
// ごぜんさま

String (文字列)に対して for…of

let str = 'タコ社長' ;
for ( let val of str ) {
	console.log( val ) ;
}
// タ
// コ
// 社
// 長

Map (Mapオブジェクト)に対して for…of

let map = new Map( [
[ '車寅次郎' , '渥美清' ] ,
[ '諏訪さくら' , '倍賞千恵子' ] ,
[ 'タコ社長' , '太宰久雄' ] ,
[ '諏訪博' , '前田吟' ] ,
[ '諏訪満男' , '吉岡秀隆' ] ,
[ '御前様' , '笠智衆' ] ,
]) ;
for ( let val of map ) {
	console.log( val ) ;
}
// ['車寅次郎', '渥美清']
// ['諏訪さくら', '倍賞千恵子']
// ['タコ社長', '太宰久雄']
// ['諏訪博', '前田吟']
// ['諏訪満男', '吉岡秀隆']
// ['御前様', '笠智衆']

ループにおける break と continue

ループにおける break はループを終了します。 continueは現在のイテレーションを中断して次のイテレーションに移ります。

for ( let i = 0 ; ; ) {
	++i ;
	if ( i < 3 ) continue ;
	if ( i > 3 ) break ;
	console.log( i ) ;
}
// 3

参考リンク

MDN 開発者向けのウェブ技術 > while
MDN 開発者向けのウェブ技術 > do…while
MDN 開発者向けのウェブ技術 > for
MDN 開発者向けのウェブ技術 > for…in
MDN 開発者向けのウェブ技術 > for…of
MDN 開発者向けのウェブ技術 > Map
MDN 開発者向けのウェブ技術 > 式と演算子
MDN 開発者向けのウェブ技術 > JavaScript「再」入門