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

M
fix lint error (use script)
({{コラム|0以外にもfailyが}})
M (fix lint error (use script))
と表示します。
 
<sourcesyntaxhighlight lang="javascript">
let n = 0;
 
console.log("0");
}
</syntaxhighlight>
</source>
 
この様な、分岐を始めとする制御構造はプログラミングを行う上で欠かせません。
次のプログラムは、''n'' < 0(''n''が0より小さい)という条件が真であるときのみ「負の数」と表示します。
 
<sourcesyntaxhighlight lang="javascript">
let n = -1;
 
console.log("負の数");
}
</syntaxhighlight>
</source>
 
if文のあとに'''else節'''(エルスせつ、''else clause'')を置くと、else節の文はif文の条件が [[JavaScript/falsy|falsy]] であるときのみ実行されます。
次のプログラムは、''n'' < 0(''n''が0より小さい)という条件が真であれば「負の数」、さもなくば(''n''が0以上あるいはNaN(略 ならば)「自然数」と表示します<ref>計算機科学では一般に0を自然数に含め、曖昧さを避けたいときは非負整数とも言います</ref>。
 
<sourcesyntaxhighlight lang="javascript">
let n = 0;
 
console.log("自然数");
}
</syntaxhighlight>
</source>
 
if文とelse節をあわせてif/else文と呼びます。else節は必ず直前のif文に対応するので、if文とelse節の間に余計な文を入れることはできません。
if/else文は次のように何個もつらねることができます。
 
<sourcesyntaxhighlight lang="javascript">
let n = 0;
 
console.log("0");
}
</syntaxhighlight>
</source>
 
このプログラムは''n'' < 0ならば「負の数」、そうでなく''n'' > 0ならば「正の数」、そうでもないならば「0」と表示します。
単文(1つの文)しか入っていない場合は、次のように書いても同じことです。
 
<sourcesyntaxhighlight lang="javascript">
let n = 0;
 
else
console.log("0");
</syntaxhighlight>
</source>
 
なお、この場合は条件演算子を用いて簡潔に書けます。
 
<sourcesyntaxhighlight lang="javascript">
let n = 0;
 
: n > 0 ? "正の数"
: "0");
</syntaxhighlight>
</source>
 
if文の条件式はすべてtrueかfalseの[[JavaScript/Boolean|真偽値]]として評価されます。たとえば、数値の0は真偽値に変換するとfalseになるので<ref>falsy</ref>、次のif文のブロックは絶対に実行されません([[w:到達不能コード|デッドコード]])。
 
<sourcesyntaxhighlight lang="javascript">
if (0) {
// たどりつけない
}
</syntaxhighlight>
</source>
 
{{コラム|0以外にもfailyが|他の言語(例えばC言語)では、''n''が0に等しいかどうかは
<sourcesyntaxhighlight lang="c">if (n == 0) { /* ... */ } </sourcesyntaxhighlight>
のほかに
<sourcesyntaxhighlight lang="c">if (!n) { /* ... */ }</sourcesyntaxhighlight>
と書けます、同様に ''n''が0に等しくないかどうかは
<sourcesyntaxhighlight lang="c">if (n != 0) { /* ... */ }</sourcesyntaxhighlight>
のほかに <sourcesyntaxhighlight lang="c">if (n) { /* ... */ }</sourcesyntaxhighlight>
とも書けます。
 
if/else文を用いる場合は、
 
<sourcesyntaxhighlight lang="javascript">
if (n % 2 == 0) {
console.log("偶数");
console.log("奇数");
}
</syntaxhighlight>
</source>
 
または
 
<sourcesyntaxhighlight lang="javascript">
if (n % 2) {
console.log("奇数");
console.log("偶数");
}
</syntaxhighlight>
</source>
 
条件演算子を用いる場合は、
 
<sourcesyntaxhighlight lang="javascript">
console.log(n % 2 == 0 ? "偶数"
: "奇数");
</syntaxhighlight>
</source>
 
または
 
<sourcesyntaxhighlight lang="javascript">
console.log(n % 2 ? "奇数"
: "偶数");
</syntaxhighlight>
</source>
 
または
 
<sourcesyntaxhighlight lang="javascript">
console.log((n % 2 ? "奇"
: "偶") + "数");
</syntaxhighlight>
</source>
または
 
<sourcesyntaxhighlight lang="javascript">
console.log("偶奇"[n % 2] + "数");
</syntaxhighlight>
</source>
など。
 
=== if-else 文の構文===
<sourcesyntaxhighlight lang="javascript">
if (条件式)
文1
[else
文2]
</syntaxhighlight>
</source>
{{code|[}}から{{code|]}}までは省略可能を意味し、この場合は「else節は省略可能」を意味します。
 
'''[[w:switch文|switch文]]'''(スイッチぶん、''switch statement'')は、if/else文を何個もつらねて書くことが冗長な場合に用いられます。
 
<sourcesyntaxhighlight lang="javascript">
if (keyCode == 37) {
console.log("←");
console.log("?");
}
</syntaxhighlight>
</source>
 
これはswitch文を使って次のように書くことができます。
<sourcesyntaxhighlight lang="javascript">
switch (keyCode) {
case 37:
default:
console.log("?");
}</sourcesyntaxhighlight>
 
必ずcase節の最後にbreak文を書くのを忘れないでください。
switch文はここぞというときに使ってください<ref>JavaScriptのswitch文は、動的なのに静的なC言語の構文を倣ったので'''コラム:switch文の限界と限界突破'''の様なハックを使わない限り恩恵を受けられません。</ref>。
 
<sourcesyntaxhighlight lang="javascript">
console.log({ 37: "←", 38: "↑", 39: "→", 40: "↓" }[keyCode] || "?");
</syntaxhighlight>
</source>
 
=== switch 文の構文===
<sourcesyntaxhighlight lang="javascript">
switch (式) {
case 値1 :
文x]
}
</syntaxhighlight>
</source>
switch文に与えられた式に一致するcase句の値を上から順に厳密一致厳密比較演算子で評価され、true を返すcase句に対応する文が実行され、'''break文などの中断制御文が見つからない限り次の文が実行されます'''。
 
この為、式に対応する範囲や正規表現を直接的に表現することはできません。
この制限はややトリッキーな方法で回避できます。
<sourcesyntaxhighlight lang="javascript" highlight=3 line>
let age = prompt("年齢は?"),
text = "";
}
console.log(text);
</syntaxhighlight>
</source>
ポイントは
<sourcesyntaxhighlight lang="javascript" start=3 highlight=1 line>
switch (true) {
</syntaxhighlight>
</source>
と式として true を与えているところで
真となっている式を持ったケース節を上から探す
いよいよループの登場です。'''[[w:while文|while文]]'''(ホワイルぶん、''while statement'')は条件が真である間、文を実行しつづけます。
 
<sourcesyntaxhighlight lang="javascript">
let i = 0;
while (i < 10) {
i++;
}
</syntaxhighlight>
</source>
 
''i''はinteger(整数)の頭文字です。このプログラムはまず、
 
=== while 文の構文 ===
<sourcesyntaxhighlight lang="javascript">
while (式)
</syntaxhighlight>
</source>
while文に与えられた式が truthy の間、繰り返し文を実行します。
 
'''[[w:do-while文|do-while文]]'''(ドゥ・ホワイル文、''do-while statement'')は、まずdo文のブロックを実行し、次にwhile文の条件式を確認してループします。次のプログラムは0から9までの数字を表示します。
 
<sourcesyntaxhighlight lang="javascript">
let i = 0;
do {
i++;
} while (i < 10);
</syntaxhighlight>
</source>
 
=== do-while 文の構文 ===
<sourcesyntaxhighlight lang="javascript">
do
while (式)
</syntaxhighlight>
</source>
まず文を無条件に実行し、while文に与えられた式が truthy の間、繰り返し文を実行します。
 
次のプログラムは0から9までの数字を表示します。
 
<sourcesyntaxhighlight lang="javascript">
for (let i = 0; i < 10; i++) {
console.log(i);
}
</syntaxhighlight>
</source>
 
最初の式、let ''i'' = 0はループに入る前に一度だけ実行されます。
結果、''i'' < 10がtruthyである間、ブロックの実行と変数の更新が行われます。
 
<sourcesyntaxhighlight lang="javascript">
const array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
for (let i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}
</syntaxhighlight>
</source>
 
ブロック文は文の特殊なケースで単文でももちろん有効です<ref>文 ⊇ ブロック文</ref>。
 
<sourcesyntaxhighlight lang="javascript">
const array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
for (let i = 0, len = array.length; i < len; i++)
console.log(array[i]);
</syntaxhighlight>
</source>
 
後置インクリメント演算子は変数の値を1増やし、増やす前の値を返すので、次のように書けます。
 
<sourcesyntaxhighlight lang="javascript">
const array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
for (let i = 0, len = array.length: i < len; console.log(array[i++]))
;
</syntaxhighlight>
</source>
 
このような書き方を好み人もいますが、文意を汲むなら...
<sourcesyntaxhighlight lang="javascript">
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ].forEach(x => console.log(x));
</syntaxhighlight>
</source>
のような、iterableオブジェクト<ref>この場合は Array オブジェクト</ref>の[[JavaScript/イテレーションメソッド|イテレーションメソッド]]を使うことも検討に値します。
 
=== for 文の構文 ===
<sourcesyntaxhighlight lang="javascript">
for ( 式1; 式2; 式3)
</syntaxhighlight>
</source>
* 式1を評価します
* 式2が turuthy な間、以下を繰り返します
== for-in ==
for-in 文は、オブジェクトのプロパティのうちキーが文字列で列挙可能なもの全てに反復処理を行います。
<sourcesyntaxhighlight lang="javascript">
const obj = { x: 2, y: 3, z: 5 };
 
// y: 3
// z: 5
</syntaxhighlight>
</source>
 
== for-of ==
for-of 文は、Iterableオブジェクト(たとえば String Array や NodeList)に対して、反復処理を行います<ref>ES2015で追加</ref>。
 
<sourcesyntaxhighlight lang="javascript" line>
const ary = [..."XYZ"];
 
// Y
// Z
</syntaxhighlight>
</source>
 
Iterableでないオブジェクトが右の項に与えらてた場合、TypeError が throw されます。
<sourcesyntaxhighlight lang="javascript" highlight=3 line>
const obj = { a: 0, b: 1, c: 2};
 
console.log(el);
}
</syntaxhighlight>
</source>
Object はItableではないので
TypeError: obj is not iterable
== for await-of ==
for await-of 文は、非同期関数用の for-of です。
<sourcesyntaxhighlight lang="javascript">
async function* asyncShift() {
for (let i = 1, len = 2 ** 16; i < len; yield i <<= 3)
// 32768
// 262144
</syntaxhighlight>
</source>
 
== for each-in ==
次のプログラムは''i''が5になった時点でfor文のループを抜けるので、0から4までの数字を表示します。
 
<sourcesyntaxhighlight lang="javascript">
for (let i = 0; i < 10; i++) {
if (i == 5)
console.log(i);
}
</syntaxhighlight>
</source>
 
== continue ==
次のプログラムは0から9までの数字のうち3の倍数だけ表示します。
 
<sourcesyntaxhighlight lang="javascript">
for (let i = 0; i < 10; i++) {
if (i % 3)
console.log(i);
}
</syntaxhighlight>
</source>
 
== ラベル ==
ラベルを使用すると深いループを一気に抜けることができます。
 
<sourcesyntaxhighlight lang="javascript">
LOOP:
for (let x = 0; x < 10; x++) {
}
}
</syntaxhighlight>
</source>
 
{{コラム|URLが有効なJavaScript?|
次は有効な JavaScript のコードです。
 
<sourcesyntaxhighlight lang="javascript" highlight=="1" line>
https://ja.wikibooks.org/
for (let i = 0; i < 3; i++) {
console.log(i);
}
</syntaxhighlight>
</source>
1行目の URL がエラーになりません。
 
733

回編集