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

来源:http://www.cnblogs.com/iceflorence/archive/2016/08/30/5822858.html
-Advertisement-
Play Games

一，JavaScript If...Else 語句 條件語句 通常在寫代碼時，您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該任務。 在 JavaScript 中，我們可使用以下條件語句： if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼 if...el ...


一，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";
  }

 

二，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>
效果如下：     

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jquery實現拖拽以及jquery監聽事件的寫法
    很久之前寫了一個jquery3D樓盤線上選擇，這麼一個插件，插件很簡單，因為後期項目中沒有實際用到，因此，有些地方不是很完善，後面也懶得再進行修改維護了。最近放到github上面，但是也少有人問津及star。昨天，有個網友問我，這個插件中關於拖拽的一些寫法！ ...
  • 響應式佈局的見解
    對於響應式佈局呢，我相信每個人都有自己不同的見解，有的呢認為響應式佈局就是一種網頁，但是我們真正的響應式佈局是可以隨網頁的大小，從而自己調節的一種網頁，在PC端的時候網頁上的所有的東西都呈一排顯示，或者是分為有兩個側欄，或一個側欄，還有主題內容組成的，在PC端的時候是整體一排顯示的，但是隨著屏幕的縮 ...
  • 深度解析響應式佈局
    概念 響應式佈局，就是響應式設計方案的呈現。具體點就是在不同的設備上，網頁能自動識別屏幕寬度、並根據設備的顯示面積（一般情況下是指的屏幕寬度，當然，也可以是其他的，可以在下麵詳細解釋）顯示出不同的效果。通俗點就是設計一套佈局，在PC端和移動端都可以使用。 如何實現響應式佈局？ 通俗的有三種方法 1、 ...
  • 關於響應式佈局
    響應式佈局，就是一個網站可以相容多類型終端，但不是需要為每一個終端做一個特定的網頁版本。響應式佈局可以為不同終端的用戶提供更舒適的界面和用戶體驗，目前越來越多的大屏幕移動設備的出現，響應式也隨之成為開發人員廣泛使用的WEB技術。 優點： 面對不同解析度設備靈活性強 能夠快捷解決多設備顯示適應問題 缺 ...
  • 使用Vue編寫點擊數字小游戲
    使用vue編寫一個點擊數字計時小游戲,列入你在文本框中輸入3,點擊開始會生成一個3行3列的表格,表格數據為1-9隨機排列,這時候從1開始點擊,按順序點到9,當按正確順序點擊完畢,會提示所用的時間,如果順序沒有按對,會提示游戲結束. 1.首先下載vue源碼,下載地址http://cn.vuejs.or ...
  • jQuery動畫特效實例教程
    本文以實例形式詳細講述了jQuery動畫特效的實現方法。 1.自製摺疊內容塊 內容塊如下： <div class="module"> <div class="caption"> <span>標題</span> <img src="rollup.gif" alt="rollup" title="rol ...
  • 深入剖析響應式佈局的原理
    說到響應式佈局，相信大家都有一定的瞭解，響應式佈局是今年很流行的一個設計理念，隨著移動互聯網的盛行，為解決如今各式各樣的瀏覽器解析度以及不同移動 設備的顯示效果，設計師提出了響應式佈局的設計方案。今天就和大家來講講響應式佈局這件小事，包含什麼是響應式佈局、響應式佈局的優點和缺點以及響應式布 局該怎麼 ...
  • Javascript面向對象編程（三) --- 非構造函數的繼承
    一、什麼是"非構造函數"的繼承？ 比如，現在有一個對象，叫做"中國人"。 還有一個對象，叫做"醫生"。 請問怎樣才能讓"醫生"去繼承"中國人"，也就是說，我怎樣才能生成一個"中國醫生"的對象？ 這裡要註意，這兩個對象都是普通對象，不是構造函數，無法使用構造函數方法實現"繼承"。 object()方法 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類