みこむらめもむらむらむら

なんかHTML5とかJS勉強とかやりながらめもを綴るブログ

【JavaScript】制御命令②

JavaScript

はい、ちょっと長くなってきたので制御命令も記事を分けるよ！
どんどんいくわよー！

条件式によってループを制御する(while/do..while命令)

JSには繰り返し処理(反復処理)が複数ある
個々の構文はもちろん違いを理解しないといけない、はい！

まず、while/do..while命令
あらかじめ与えられた条件式が
trueである間ループを繰り返す
以下構文

while (条件式) {
  条件式がtrueである時に実行される命令(群)
}
do {
  条件式がtrueである時に実行される命令(群)
} while (条件式);

do..while命令のセミコロンを忘れやすいので注意

はい、具体例！

var x = 8;
while (x < 10) {
  document.writeln('xの値は' + x);
  x++;
}
var x = 8;
do {
  document.writeln('xの値は' + x);
  x++;
} while (x < 10);

この処理を実行するとどちらも

xの値は8
xの値は9

と表示される、確かにされました
これだけ見ると同じ処理に見えるけれども
変数xの初期値を10にしてみると

var x = 10;
while (x < 10) {
  document.writeln('xの値は' + x);
  x++;
}

上記は何も返さないのに対し

var x = 10;
do {
  document.writeln('xの値は' + x);
  x++;
} while (x < 10);

こちらは

xの値は10

と表示される

  • while命令
    • ループの最初で条件式を判定する(前置判定)
    • 条件によっては一度もループを実行しない
  • do..while命令
    • ループも最後で条件式を判定する(後置判定)
    • 条件に関わらず、最低1回はループを実行する

この違いは「ループが開始される前から条件式がfalseである場合」に
結果として現れる

ふむ、はあく！

補足:無限ループ

永遠に終了しない(終了条件がtrueにならない)ループのこと
うむ、これはよく聞く言葉なので分かる！
無限ループはブラウザに極端な負担を与え
フリーズさせる原因にもなるため
繰り返し処理を記述する場合
ループが正しく終了するかをあらかじめ確認すること

指定回数だけループを処理する(for命令)

以下構文

for (初期化式; ループ継続条件式; 増減式) {
  ループ内で実行する命令(群)
}

具体例も連続でいくます

for (var x = 8; x < 10; x++){
  document.writeln('xの値は' + x);
}

実行すると

xの値は8
xの値は9

と表示される
さっきのwhile/do..while命令で使った例を
for命令で書き換えたもの
変数の値によってループを制御する場合には
while/do..while命令で書くよりもコンパクトに記述できる

さっきの構文でもあったようにfor命令は
カッコ内の「初期化式」「ループ継続条件式」「増減式」の3つで
ループを制御する

  1. forブロックに入った最初のループで初期化式を一回だけ実行する
    • 例題では変数xに8をセット
    • 一般的にはこの初期化式でfor命令によるループ回数を管理するカウンタ変数を初期化する
  2. ループ継続条件式はブロック内の処理を継続するための条件式を表す
    • 例題では「x < 10」と指定されている、カウンタ変数xが10未満である間だけ繰り返しループする
  3. ブロック内の処理が1回実行されるたびに増減式が実行される
    • 通常カウンタ変数の増減を行うインクリメント/デクリメント演算子、または代入演算子を指定する
    • 例題では「x++」、ループの都度カウンタ変数xに1が加算される
    • 「x += 2」としてカウンタ変数を2ずつ加算することや、「x--」として1ずつ減算することもできる

これらの式には基本的に
任意の式を指定することができるが
式の組む合わせによっては
無限ループにもなりえるので注意が必要

for (var x = 0; x < 5; x--){..}
for (;;){..}

一行目のようなforループは
カウンタ変数xの初期値が0で
その後、ループの度にデクリメントされていくので
ループ継続条件である「x < 5」がfalseになることは
永遠にありえない
二行目は初期化式、ループ継続条件式、増減式が
省略されたパターン
この場合for命令は無条件にループを継続する

for命令苦手だ、これは例題たくさんやったほうが
良さげな気がするなーうむむ

配列内の要素を順に処理する(for..in命令)

指定された配列/連想配列やオブジェクト配下の
要素/メンバに対して先頭から順番に繰り返し処理を行う

以下構文

for(仮変数 in 配列/オブジェクト) {
  ループ内で実行する命令(群)
}

仮変数には、配列/連想配列やオブジェクトから取り出された要素の
インデックス番号やキー名、メンバ名が格納され
for..inブロックの中で要素値を
参照する際に使用することができる
仮変数に格納されるのが
要素値そのものではないことに注意

どうしよう何言ってるかわからない←
とりあえず具体例みてみることにする

var member = ['山田', '鈴木', '佐藤'];
for (var i in member) {
  document.writeln('名前は'+ member[i]);
}

var triangle = {width:30, height:50};
for (var j in triangle) {
  document.writeln(j + '=' + triangle[j]);
}

var book = new Object();
book.title = 'JavaScript 本格入門';
book.publish = '技術理論社';
book.price = '3000';
for (var k in book) {
  document.writeln(k + 'は' + book[k]);
}

名前は山田
名前は鈴木
名前は佐藤
width=30
height=50
titleはJavaScript 本格入門
publishは技術理論社
priceは3000

あ、わかったなるほどなるほどふむー

triangleの例の場合仮変数に入っているのは
要素値そのものである30や50じゃなく
要素のキー名であるwidthとかheightなのね

通常配列の内容をfor..inループで
取り出さない方がいいらしい
じゃあなんで例に上げたんだｗ

  • for..inループは配列のインデックス番号を取り出すだけなのでコードがあまりシンプルにならない(値そのものではないので、却って誤解を招く)
  • コードによっては正しく動作しない場合がある

らしい、ほう‥

たしかにmemberの例でいくとわざわざ
インデックス番号をとってきているだけだから
仮変数iの中身をあえて表示したりしていないし
する必要もない、よなー
通常配列でほしいのってインデックス番号より
要素値そのものだからこの取り方は無駄が多い

for..inループを利用するのは
連想配列、オブジェクトのキーを走査する場合に留め
通常配列を走査する場合は原則として
forループを利用するようにする
はーい！きをつけます！



長いな制御命令‥記事わけます