JavaScript If...Else、Switch、For、While、Break、Continue語句

本文轉載自查看原文 2016-08-30 17:58 1634 JavaScript

一，JavaScript If...Else 語句

條件語句

通常在寫代碼時，您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該任務。

在 JavaScript 中，我們可使用以下條件語句：

if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
if...else if....else 語句 - 使用該語句來選擇多個代碼塊之一來執行
switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

If 語句

只有當指定條件為 true 時，該語句才會執行代碼。

語法

if (條件)
  {
  只有當條件為 true 時執行的代碼
  }

注意：請使用小寫的 if。使用大寫字母（IF）會生成 JavaScript 錯誤！

實例

當時間小於 20:00 時，生成一個“Good day”問候：

if (time<20)
  {
  x="Good day";
  }

If...else 語句

<html>
<body>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

if (time < 10) 
{
document.write("<b>早安</b>")
}
else
{
document.write("<b>祝您愉快</b>")
}
</script>

<p>本例演示 If...Else 語句。</p>

<p>如果瀏覽器時間小於 10，那么會向您問“早安”，否則會向您問候“祝您愉快”。</p>

</body>
</html>

If...else if....else 語句

<html>
<body>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>

<p>本例演示 if..else if...else 語句。</p>

</body>
</html>

二，JavaScript Switch 語句

JavaScript Switch 語句

請使用 switch 語句來選擇要執行的多個代碼塊之一。

語法

switch(n)
{
case 1:
  執行代碼塊 1
  break;
case 2:
  執行代碼塊 2
  break;
default:
  n 與 case 1 和 case 2 不同時執行的代碼
}

工作原理：首先設置表達式 n（通常是一個變量）。隨后表達式的值會與結構中的每個 case 的值做比較。如果存在匹配，則與該 case 關聯的代碼塊會被執行。請使用 break 來阻止代碼自動地向下一個 case 運行。

實例

顯示今日的周名稱。請注意 Sunday=0, Monday=1, Tuesday=2, 等等：

var day=new Date().getDay();
switch (day)
{
case 0:
  x="Today it's Sunday";
  break;
case 1:
  x="Today it's Monday";
  break;
case 2:
  x="Today it's Tuesday";
  break;
case 3:
  x="Today it's Wednesday";
  break;
case 4:
  x="Today it's Thursday";
  break;
case 5:
  x="Today it's Friday";
  break;
case 6:
  x="Today it's Saturday";
  break;
}

三，JavaScript For 循環

JavaScript 循環

如果您希望一遍又一遍地運行相同的代碼，並且每次的值都不同，那么使用循環是很方便的。

循環可以將代碼塊執行指定的次數。

不同類型的循環

JavaScript 支持不同類型的循環：

for - 循環代碼塊一定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件為 true 時循環指定的代碼塊
do/while - 同樣當指定的條件為 true 時循環指定的代碼塊

For 循環

for 循環是您在希望創建循環時常會用到的工具。

下面是 for 循環的語法：

for (語句 1; 語句 2; 語句 3)
  {
  被執行的代碼塊
  }

語句 1 在循環（代碼塊）開始前執行

語句 2 定義運行循環（代碼塊）的條件

語句 3 在循環（代碼塊）已被執行之后執行

實例

<!DOCTYPE html>
<html>
<body>

<p>點擊下面的按鈕，將代碼塊循環五次：</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="";
for (var i=0;i<5;i++)
  {
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

語句 1

通常我們會使用語句 1 初始化循環中所用的變量 (var i=0)。

語句 1 是可選的，也就是說不使用語句 1 也可以。

您可以在語句 1 中初始化任意（或者多個）值：

實例:

<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0,l=cars.length; i<l; i++)
{
document.write(cars[i] + "<br>");
}
</script>

</body>
</html>

同時您還可以省略語句 1（比如在循環開始前已經設置了值時）：

實例:

<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=2,len=cars.length;
for (; i<len; i++)
{
document.write(cars[i] + "<br>");
}
</script>

</body>
</html>

語句 2

通常語句 2 用於評估初始變量的條件。

語句 2 同樣是可選的。

如果語句 2 返回 true，則循環再次開始，如果返回 false，則循環將結束。

提示：如果您省略了語句 2，那么必須在循環內提供 break。否則循環就無法停下來。這樣有可能令瀏覽器崩潰。

語句 3

通常語句 3 會增加初始變量的值。

語句 3 也是可選的。

語句 3 有多種用法。增量可以是負數 (i--)，或者更大 (i=i+15)。

語句 3 也可以省略（比如當循環內部有相應的代碼時）：

實例:

<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}
</script>

</body>
</html>

四，JavaScript for...in 語句

JavaScript for...in 語句

for...in 語句用於對數組或者對象的屬性進行循環操作，遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。

for ... in 循環中的代碼每執行一次，就會對數組的元素或者對象的屬性進行一次操作。

語法：

for (變量 in 對象)
{
    在此執行代碼
}

“變量”用來指定變量，指定的變量可以是數組元素，也可以是對象的屬性。

實例，使用 for ... in 循環遍歷數組：

<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "寶馬"
mycars[1] = "奔馳"
mycars[2] = "賓利"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>

效果如下：

五，JavaScript While 循環

while 循環

While 循環會在指定條件為真時循環執行代碼塊。

只要指定條件為 true，循環就可以一直執行代碼。

語法

while (條件)
  {
  需要執行的代碼
  }

實例

本例中的循環將繼續運行，只要變量 i 小於 5：

<!DOCTYPE html>
<html>
<body>

<p>點擊下面的按鈕，只要 i 小於 5 就一直循環代碼塊。</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

提示：如果您忘記增加條件中所用變量的值，該循環永遠不會結束。該可能導致瀏覽器崩潰。

do/while 循環

do/while 循環是 while 循環的變體。該循環會執行一次代碼塊，在檢查條件是否為真之前，然后如果條件為真的話，就會重復這個循環。

語法

do
  {
  需要執行的代碼
  }
while (條件);

實例

下面的例子使用 do/while 循環。該循環至少會執行一次，即使條件是 false，隱藏代碼塊會在條件被測試前執行：

<!DOCTYPE html>
<html>
<body>

<p>點擊下面的按鈕，只要 i 小於 5 就一直循環代碼塊。</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5)  
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

別忘記增加條件中所用變量的值，否則循環永遠不會結束！

比較 for 和 while

如果您已經閱讀了前面那一章關於 for 循環的內容，您會發現 while 循環與 for 循環很像。

for 語句實例

本例中的循環使用 for 循環來顯示 cars 數組中的所有值：

<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + "<br>");
i++;
}
</script>

</body>
</html>

while 語句實例

本例中的循環使用使用 while 循環來顯示 cars 數組中的所有值：

<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
document.write(cars[i] + "<br>");
i++;
}
</script>

</body>
</html>

六，JavaScript Break 和 Continue 語句

break 語句用於跳出循環。

continue 用於跳過循環中的一個迭代。

Break 語句

我們已經在本教程稍早的章節中見到過 break 語句。它用於跳出 switch() 語句。

break 語句可用於跳出循環。

break 語句跳出循環后，會繼續執行該循環之后的代碼（如果有的話）：

實例

<!DOCTYPE html>
<html>
<body>

<p>點擊按鈕，測試帶有 break 語句的循環。</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    break;
    }
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

效果如下：

由於這個 if 語句中只有一行代碼，所以可以省略花括號：

for (i=0;i<10;i++)
  {
  if (i==3) break;
  x=x + "The number is " + i + "<br>";
  }

Continue 語句

continue 語句中斷循環中的迭代，如果出現了指定的條件，然后繼續循環中的下一個迭代。

該例子跳過了值 3：

實例

<!DOCTYPE html>
<html>
<body>

<p>點擊下面的按鈕來執行循環，該循環會跳過 i=3 的步進。</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    continue;
    }
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

效果如下：

JavaScript 標簽（可參考博客http://blog.sina.com.cn/s/blog_70a3539f01015yh9.html）

正如您在 switch 語句那一章中看到的，可以對 JavaScript 語句進行標記。

如需標記 JavaScript 語句，請在語句之前加上冒號：

label:
語句

break 和 continue 語句僅僅是能夠跳出代碼塊的語句。

語法

break labelname;

continue labelname;

continue 語句（帶有或不帶標簽引用）只能用在循環中。

break 語句（不帶標簽引用），只能用在循環或 switch 中。

通過標簽引用，break 語句可用於跳出任何 JavaScript 代碼塊：

實例：

<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
break list;
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>"); 
}
</script>

</body>
</html>

效果如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 javascript switch continue break 執行語句 while語句 break和continue Python——while、break、continue、else Python——while、continue、break、while-else、or、and、not if else 和switch case以及continue，break的區別 while循環中的break、continue和else Python if while continue break語句 if語句，if...else if語句和switch...case語句的區別和分析 if語句，if...else if語句和switch...case語句的區別和分析 JavaScript-判斷語句（if...else）