JavaScriptでの「if」「switch」「for」「while」の使い方

switchやwhileをあまり使わなくて記述方法をよく忘れるので、「if」「switch」「for」「while」の使い方をまとめてみます。

if文

まずはif文で条件分岐をしてみます。
条件分岐のパターンは以前記事を書いているので、そちらを参考ください。
if文の使い方いろいろ | cly7796.net

JavaScript

var character = '丈槍由紀';
if(character == '丈槍由紀') {
	console.log('ゆき');
} else if(character == '恵飛須沢胡桃') {
	console.log('くるみ');
} else if(character == '若狭悠里') {
	console.log('りーさん');
} else if(character == '直樹美紀') {
	console.log('みーくん');
} else {
	console.log('分かりません');
}

if文のデモページ
　

switch文

if文と同じ条件分岐ですが、特定の式に対する値を比較する場合、switch文の方がすっきり記述できます。

JavaScript

var character = '恵飛須沢胡桃';
switch (character) {
	case '丈槍由紀':
		console.log('ゆき');
		break;
	case '恵飛須沢胡桃':
		console.log('くるみ');
		break;
	case '若狭悠里':
		console.log('りーさん');
		break;
	case '直樹美紀':
		console.log('みーくん');
		break;
	default:
		console.log('分かりません');
		break;
}

switch文のデモページ
　

for文

特定の回数だけ繰り返し処理を行う場合、for文が使えます。

JavaScript

var character = ['丈槍由紀', '恵飛須沢胡桃', '若狭悠里', '直樹美紀'];
var nickname = ['ゆき', 'くるみ', 'りーさん', 'みーくん'];
for (var i = 0; i < character.length; i++) {
	console.log(character[i] + ':' + nickname[i]);
}

この場合、変数iに初期値として0を代入して、繰り返し処理毎にiに1をプラスしていき、iがcharacterの数以上になったら繰り返し処理を終了します。
for文のデモページ
　

上記とは反対に、繰り返し処理毎にiを減らしていくこともできます。

JavaScript

var character = ['丈槍由紀', '恵飛須沢胡桃', '若狭悠里', '直樹美紀'];
var nickname = ['ゆき', 'くるみ', 'りーさん', 'みーくん'];
for (var i = character.length - 1; i >= 0; i--) {
	console.log(character[i] + ':' + nickname[i]);
}

for文のデモページ2
　

またfor文では、特定回数で処理を飛ばすcontinueと、特定回数でfor文を終了させるbreakも使えます。

JavaScript

var character = ['丈槍由紀', '恵飛須沢胡桃', '若狭悠里', '直樹美紀'];
var nickname = ['ゆき', 'くるみ', 'りーさん', 'みーくん'];
for (var i = 0; i < character.length; i++) {
	if(i == 0) {
		continue;
	}
	if(i >= 3) {
		break;
	}
	console.log(character[i] + ':' + nickname[i]);
}

for文のデモページ3
　

while文

for文と同じく、while文でも繰り返し処理が行えます。
while文の場合、特定の終了条件になるまで繰り返し処理を行いたい場合に使用することが多い印象です。

JavaScript

var character = ['丈槍由紀', '恵飛須沢胡桃', '若狭悠里', '直樹美紀'];
var nickname = ['ゆき', 'くるみ', 'りーさん', 'みーくん'];
var i = 0;
while(i < character.length) {
	console.log(character[i] + ':' + nickname[i]);
	i++;
}

while文のデモページ
　

for文や上記のwhile文と違い、do…while文を使用すると必ず1回は処理を行うようになります。

JavaScript

var character = ['丈槍由紀', '恵飛須沢胡桃', '若狭悠里', '直樹美紀'];
var nickname = ['ゆき', 'くるみ', 'りーさん', 'みーくん'];
var i = 0;
do {
	console.log(character[i] + ':' + nickname[i]);
	i++;
} while(i < 0);

while文のデモページ2
　

【参考サイト】

• 文 – JavaScript | MDN