Wikibooks

「JavaScript/制御構造」の版間の差分

履歴の双方向閲覧
← 古い編集次の差分 →
削除された内容 追加された内容
ビジュアルウィキテキスト
編集の要約なし
Ef3 (トーク | 投稿記録)
7,150 回編集
節加筆 for ... in / for ... of / for await... of
1 行
'''[[w:制御構造|制御構造]]'''（せいぎょこうぞう、''control flow''）とは、プログラムの流れのことです。単純なプログラムでは上から下へ順番に処理が実行されていきますが、'''制御構文'''（せいぎょこうぶん、''control flow statement''）と呼ばれる文を用いると、ある条件が成立するときのみにより処理を実行したり、同じ処理をループ繰り返したりすることができます。さらに、'''[[w:無限ループ|無限ループ]]'''（むげんループ、''infinite loop''）についてもこの章で扱います。
 
:※ この節の内容は、冒頭の『概要』から、後半の while 文（ホワイルぶん）まで、初心者に必要な知識です。
 
 
== 概要 ==
24 ⟶ 21行目:
 
== if-else ==
'''[[w:if文|if文]]'''（イフぶん、''if statement''）は「もし〜ならば」を表す制御構文（条件構文）です。if文のブロックはかっこの中に書かれた条件がtrue真であるときのみ実行されます。次のプログラムは、''n'' < 0（''n''が0より小さい）という条件がtrue真であるときのみ「負の数」と表示します。
 
<source lang="javascript">
34 ⟶ 31行目:
</source>
 
if文のあとに'''else文'''（エルスぶん、''else statement''）を置くと、else文のブロックはif文のかっこの中に書かれた条件がfalseであるときのみ実行されます。次のプログラムは、''n'' < 0（''n''が0より小さい）という条件がtrue真であれば「負の数」、さもなくば（''n''が0以上ならば）「自然数」と表示します。計算機科学では一般に0を自然数に含めます。
 
<source lang="javascript">
189 ⟶ 186行目:
 
== while ==
いよいよループの登場です。'''[[w:while文|while文]]'''（ホワイルぶん、''while statement''）は条件がtrue真である間、ブロックを実行しつづけます。
 
<source lang="javascript">
203 ⟶ 200行目:
10回ループが回ると''i''が10になり、''i'' < 10がfalseになるのでループを抜けます。このようにwhile文は''i'' < 10がtrueである間、ブロックを実行しつづけます。よってこのプログラムは0から9までの数字を表示します（10になるとループから抜ける）。
 
while文は条件式がtrueであれば延々とループを回し続けるので、いつまで経ってもfalseにならないような条件を指定すると無限ループになります。無限ループが発生すると処理系がフリーズする場合があるので注意してください。たとえフリーズしなくても、メモリを圧迫してしまい、ループ動作中にパソコンの処理速度を低下させている場合があります。
 
なので、以下の無限ループのプログラムは、絶対に実行しないでください。
 
<source lang="javascript">
while ( true ) {
break;
}
</source>
 
 
もし、上記のような無限ループを実行してしまった場合には、ウェブブラウザ上で実行している場合、ブラウザあるいはタブそのものをクローズするなどして、ブラウザごと終了すれば、なおります。
 
万が一、ブラウザを終了できない場合や、タブを閉じれない場合でも、パソコンそのものを強制終了すれば済みます。もし強制終了できない場合、電源ボタンを押せば済みます。
 
 
また、特に気をつけるべき注意事項として、公開しているウェブページでは、絶対に、上記のような無限ループは、組み込まないでください。
 
なぜなら、一般のページ訪問者は、故障の原因が何か分かりませんので、故障の原因を特定してパソコンを直すのに、多大な時間を浪費してしまうので、迷惑行為になってしまいます。
 
 
どうしても、ウェブブラウザ上のJavaScriptで比較的安全な無限ループがほしい場合は、[[JavaScript/DOM/window/setInterval|window.setInterval]]などのメソッドを使用します。
 
<source lang="javascript">
setInterval(function(){
// ビジーウェイト
}, 0);
</source>
 
JavaScriptではwhile文に空の条件式を指定することはできません。
 
== do-while ==
242 ⟶ 209行目:
alert(i);
i++;
} while ( i < 10 );
}
while ( i < 10 );
</source>
 
255 ⟶ 221行目:
</source>
 
var ''i'' = 0はループに入る前に一度だけ実行されます。次に''i'' < 10がtrueならばブロックを実行し、''i''++を実行して再び条件式に戻ります。''i'' < 10がtrueである間、ブロックの実行と変数の更新が行われるということです。<!--- for文はかっこの中に3つの式を書ける強力な制御構文なので、他の構文はすべてfor文の特別な場合であるとも考えられます。
たとえば、配列の要素を1つずつ取り出して処理をするような場合はfor文を使います。
 
JS にはイテレターオブジェクトがあるのでfor(;;)文で直接表現出来ない制御構造もある。また非同期関数も -->
たとえば、配列の要素を1つずつ取り出して処理をするような場合はfor文を使います。
 
<source lang="javascript">
var array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
for ( var i = 0; i <= array.length; i++ ) {
alert( array[i] );
}
270 ⟶ 237行目:
<source lang="javascript">
var array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
for ( var i = 0; i <= array.length; i++ )
alert( array[i] );
</source>
278 ⟶ 245行目:
<source lang="javascript">
var array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
for ( var i = 0; i <= array.length; alert( array[i++] ) );
;
</source>
 
このような書き方をしても読みにくいだけですが、こちらの方が簡潔だという人もいるでしょう。
 
== for ... in ==
for ... in 文は、オブジェクトのプロパティのうちキーが文字列で列挙可能なもの全てに反復処理を行う。
<source lang="javascript">
const obj = { x: 2, y: 3, z: 5 };
 
for (const prop in obj) {
console.log(`${prop}: ${obj[prop]}`);
}
// x: 2
// y: 3
// z: 5
</source>
 
== for ... of ==
for ... of 文は、Iteratableオブジェクト（たとえば String や Array）に対して、反復処理を行う。
<source lang="javascript">
const ary = [..."XYZ"];
 
for (const el of ary) {
console.log(el);
}
// X
// Y
// Z
</source>
 
== for await... of ==
for await... of 文は、非同期関数用の for ... of です。
<source lang="javascript">
async function* asyncShift() {
for (let i = 1; i < 2**16; yield i <<= 3)
;
}
 
(async function() {
for await (let num of asyncShift()) {
console.log(num);
}
})();
// 8
// 64
// 512
// 4096
// 32768
// 262144
</source>
 
== break ==
288 ⟶ 303行目:
<source lang="javascript">
for ( var i = 0; i < 10; i++ ) {
if ( i == 5 )
break;
alert(i);
}
</source>
 
すぐに気づいた人もいるでしょうが、while文の無限ループの例は実際には無限ループになっていません。
 
== continue ==
'''[[w:continue文|continue文]]'''（コンティニュー文、''continue statement''）はループを次に進めます。次のプログラムは0から9までの数字を表示しますが、[[w:四の字|4]]うち3の倍数だけは死に通じるため表示しませんす。
 
<source lang="javascript">
for ( var i = 0; i < 10; i++ ) {
if ( i ==% 43 )
continue;
alert(i);
}
312 ⟶ 327行目:
for ( var x = 0; x < 10; x++ ) {
for ( var y = 0; y < 10; y++ ) {
if ( y == 5 )
break LOOP;
alert( [ x, y ] );
}
321 ⟶ 337行目:
 
=== with文 ===
曖昧さを持ち込むため'''with 文の使用は推奨されない'''。
 
with文の用途は、実際のコードを見ると良い。次の２つの関数は同じ意味である。
 
<syntaxhighlight lang="html5">
<nowiki>
function math1(){
document.write( Math.ceil(10.5) ); //　小数点切り上げの値を表示
331 ⟶ 348行目:
 
function math2(){
with　( Math ){
document.write( ceil(10.5) ); //　小数点切り上げの値を表示
document.write( PI ); // 円周率πを表示
338 ⟶ 355行目:
math1();
math2();
</syntaxhighlight>
</nowiki>
 
この様に、あらかじめオブジェクトをwith文で予約しておく指定することで、それに続く文ブロックの間では、親オブジェクトの名前を省略することが出来る。
これはVBScript Pascal などの言語から採用されたものである。
with は、with により修飾名が省略されたことにより識別子に曖昧さを持ち込む事で、意図しないプロパティが使われるなど問題を生じることが知られており、'''with 文の使用は推奨されない'''。
 
<!-- with 文以外は、文ではなく「演算子」。「演算子」「式」「文」の違いをしっかり理解しましょう。
=== void文 ===
この=== void演算子はundefinedを返す。 ===
void演算子は与えられた式を評価し undefined を返す。
 
典型的な用途は、
何も処理を行わないことをプログラム中で明示したい場合にこの演算子を利用する。
<syntaxhighlight lang="html5">
実際の用途は非常に限られる。
<a href="javascript:void(0);">
押されても何も起こらない。
</a>
</syntaxhighlight>
 
=== new演算子 ===
オブジェクトのクローンを作成する。
 
=== delete文演算子 ===
delete演算子
オブジェクトからプロパティを取り除く演算子である。
この演算子はまた、配列オブジェクト指向を理解してから利用すべきの要素を取り除く演算子でもあるので説明は後の項に回す。
C++等の他の言語と異なり、オブジェクト指向ともメモリ管理とは直接関連しない（リファレンスが1つ減る事で間接的にGCの挙動に関連する）。
-->
 
[[Category:JavaScript|せいきよこうそう]]
"https://ja.wikibooks.org/wiki/JavaScript/制御構造" より作成