目錄

一、分支結構

1、if語句

1-1、多分支

1-2、巢狀

2、switch語句

二、迴圈結構

1、for迴圈

2、while迴圈

3、do...while迴圈

4、for...in迴圈

5、for...of迴圈

6、break，continue關鍵詞

6-1、break，continue的JavaScript 標籤

三、異常處理

---

一、分支結構

 

1、if語句

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

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

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

1-1、多分支

// 1.雙分支
if (表示式1) {
    程式碼塊1;
} else {
    程式碼塊2;
}

if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
​
// 2.多分支
if (表示式1) {
    
} else if (表示式2) {
    
} 
...
else if (表示式2) {
    
} else {
    
}

if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }

 

1-2、巢狀

if (表示式1) {
    if (表示式2) {
        
    }...
}...

2、switch語句

switch (表示式) {
    case 值1: 程式碼塊1; break;
    case 值2: 程式碼塊2; break;
    default: 程式碼塊3;
}
// 1.表示式可以為 整數表示式 或 字串表示式
// 2.值可以為 整數 或 字串
// 3.break可以省略
// 4.default為預設程式碼塊，需要出現在所有case最下方，在所有case均未被匹配時執行

var day=new Date().getDay();
switch (day)
{
case 6:
  x="Today it's Saturday";
  break;
case 0:
  x="Today it's Sunday";
  break;
default:
  x="Looking forward to the Weekend";
}
 

二、迴圈結構

JavaScript 支援不同型別的迴圈：

• for - 迴圈程式碼塊一定的次數
• for/in - 迴圈遍歷物件的屬性
• while - 當指定的條件為 true 時迴圈指定的程式碼塊
• do/while - 同樣當指定的條件為 true 時迴圈指定的程式碼塊

1、for迴圈

for (迴圈變數①; 條件表示式②; 迴圈變數增量③) {
    程式碼塊④;
}
// 1.迴圈變數可以在外、在內宣告
// 2.執行邏輯 ① ②④③ ... ②④③ ②，入口為①，出口為②，②④③個數為[0, n]

for (var i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br>";
  }


//for 語句內 可以省略變數和增量
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}

2、while迴圈

while (條件表示式) {
    程式碼塊;
}

while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }

3、do...while迴圈

//該迴圈至少會執行一次，即使條件是 false，隱藏程式碼塊會在條件被測試前執行：
do {
    程式碼塊;
} while (條件表示式);

do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5);

4、for...in迴圈

obj = {"name": "zero", "age": 8}
for (k in obj) {
    console.log(k, obj[k])
}
// 用於遍歷物件：遍歷的結果為key，通過[]語法訪問對應的value


var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

5、for...of迴圈

iter = ['a', 'b', 'c'];
for (i of iter) {
    console.log(iter[i])
}
// 1.用於遍歷可迭代物件：遍歷結果為index，通過[]語法訪問對應的value
// 2.ES6新增，可迭代物件有 字串、陣列、Map、Set、Anguments、NodeList等

6、break，continue關鍵詞

• break：結束本層迴圈

• continue：結束本次迴圈進入下一次迴圈

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

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

6-1、break，continue的JavaScript 標籤

正如您在 switch 語句那一章中看到的，可以對 JavaScript 語句進行標記。
如需標記 JavaScript 語句，請在語句之前加上冒號：
 

label:
語句

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

語法

break labelname;

continue labelname;

• continue 語句（帶有或不帶標籤引用）只能用在迴圈中。
• break 語句（不帶標籤引用），只能用在迴圈或 switch 中。
• 通過標籤引用，break 語句可用於跳出任何 JavaScript 程式碼塊：

例項

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>");
}

三、異常處理

• try 語句測試程式碼塊的錯誤。
• catch 語句處理錯誤。
• throw 語句建立自定義錯誤。建立或丟擲異常（exception）。

try {
    易錯程式碼塊;
} catch (err) {
    異常處理程式碼塊;
} finally {
    必須邏輯程式碼塊;
}
// 1.err為儲存錯誤資訊的變數
// 2.finally分支在異常出現與否都會被執行  throw "自定義異常"
// 必要的時候丟擲自定義異常，要結合對應的try...catch使用

<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>