JavaScript(二)：選擇、迴圈結構

一、概述

• 程式結構有三種：順序結構、選擇結構、迴圈結構

• 根據條件進行判斷，從而執行不同的操作，稱為選擇結構（分支結構），其實就是條件判斷

• 選擇結構的型別：if、switch

二、選擇結構

1.if選擇

分為：單分支結構、二分支結構、多分支結構、巢狀if結構

語法：

if(){
 // dosomething
}

if(){
 // dosomething
}else{
 // dosomething   
}

if(條件1){
	程式碼塊1 
}else if(條件2){
    程式碼塊2
}else if(條件3){
    程式碼塊3
}
...
else{
 	程式碼塊n   
}

if(){
   // do something
   if(){
      // do something
	}
}

示例：

// 單分支結構，if
var age = 25;
if(age>=18){
    console.log('您已成年');
    console.log('您今年'+age+'歲');
} 

// 案例：如果有任意兩門課程的成績大於95分，則獎勵一個iPhone手機    
var html = 90,css = 100,js = 96;
if(html>=95&&css>=95 || html>=95&&js>=95 || css>=95&&js>=95){
    console.log('獎勵一個iPhone手機');
}

// 二分支結構，if...else
if(age>=18){
    console.log('您已成年');
}else{
    console.log('您尚未成年');
} 

// 案例：提示使用者輸入兩個整數a、b，如果a能被b整除 或 a加b大於100，則輸出a的值，否則輸出b的值
var a = Number(prompt('請輸入第一個整數：'));    
var b = Number(prompt('請輸入第二個整數：'));    
if(a%b==0 || a+b>100){
    console.log(a);
}else{
    console.log(b);
}

// 多分支結構，if...else if...else if...else
if(age>=60){ // 將嚴格的條件放在最前面
    console.log('老年');
}else if(age>=40){
    console.log('中年');
}else if(age>=18){
    console.log('青年');
}else{
    console.log('童年');
}

// 巢狀if結構
var day = '週三';
var weather = '雨';
if(day=='週末'){
    if(weather=='晴'){
        console.log('今天出去浪裡個浪！');
    }else{
        console.log('今天睡覺!');
    }
}else{
    console.log('今天要上課，心情很沉重！');
}

2.switch選擇

用來進行等值判斷

語法：

switch (表示式) {  // 表示式為要判斷的內容
    case 常量1:
        程式碼塊1
        break;
    case 常量 2:
        程式碼塊2
        break;
    …

   	default:  // 當所有常量都無法匹配時會執行default語句
        語句;
}

示例:

// 使用if結構
if(today==1){
    console.log('今天吃包子');
}else if(today==2){
    console.log('今天吃油條');
}else if(today==3||today==4||today==5){
    console.log('今天吃煎餅');
}else{
    console.log('今天吃毛線，睡到自然醒');
}

// 使用switch結構
switch(today){
    case 1:
        console.log('今天吃包子');  
        // break; // 如果不寫break，則一旦匹配後就會一直往下執行，直到遇到break為止 
    case 2:
        console.log('今天吃油條');  
        // break;
    case 3: 
    case 4: 
    case 5: 
        console.log('今天吃煎餅');
        break; 
    default: // 如果前面的case都不匹配，才會執行default
        console.log('今天吃毛線，睡到自然醒'); 
        break;    
}

• switch只適應於等值的判斷，更直觀

三、迴圈結構

概述：

• 重複性的執行某個操作，就是迴圈，稱為迴圈結構

• 迴圈結構的型別：while、do…while、for、for…in、for…of

1.while迴圈

特點：先判斷，再執行，只要條件成立就不停的執行

語法：

while(條件){
	// 程式碼塊
}

示例：

// 迴圈輸出10次：好好學習，天天向上
var i=1;
while(i<=10){
    console.log('好好學習，天天向上'+i);
    i++; // 自增
} 

// 案例1：計算100以內所有正整數之和
var sum=0;
var i=1;
while(i<=100){
    sum+=i; // 累加求和，等價於sum=sum+i
    i++;
}
console.log('100以內所有正整數之和為：'+sum); 

2.do…while

特點：先執行，再判斷，迴圈操作至少會執行一次

語法：

do{
    // 程式碼塊
}while(條件);

示例：

// 迴圈輸出10次：好好學習，天天向上
var i=1;
do{
    console.log('好好學習，天天向上'+i);
    i++;
}while(i<=10); 

// 案例1：計算1到50之間6的倍數之和
var sum=0;
var i=1;
do{
    if(i%6==0){
        sum+=i;
    }
    i++;
}while(i<=50);
console.log('1到50之間6的倍數之和：'+sum); 

3.for迴圈

更適合對資料進行遍歷

語法：

for(初始化;條件;迭代){
    程式碼塊
}

示例：

// 迴圈輸出10次：好好學習，天天向上
for(var i=1;i<=10;i++){
    console.log('好好學習，天天向上'+i);
} 

// 小括號中的三個部分都可以省略，但分號不能省略
// 這樣做會一直迴圈下去
for(;;){
    console.log('好好學習，天天向上');
} 

// 案例1：迴圈輸入五門課程的成績，並計算平均分
var sum=0;
for(var i=1;i<=5;i++){
    var score=Number(prompt('請輸入第'+i+'門課程的成績:'));
    sum+=score;
}
var avg=sum/5;
console.log('五門課程的平均分為：'+avg);

// 案例2：輸出[1,100]之間不能被3整除的數字之和
var sum=0;
for(var i=1;i<=100;i++){
    if(i%3!=0){
        sum+=i;
    }
}
console.log('不能被3整除的數字之和：'+sum);

4.for…in

對集合資料進行迭代遍歷，迴圈變數是遍歷到的資料在集合中的索引順序（從0開始），而非資料本身

語法：

for(迴圈變數 in 集合){
   迴圈操作
}

示例：

// 字串，可以將字串看作是由許多字元組成的集合
var str = "welcome";  
// index表示集合中每個元素的索引/序號，索引從0開始，並不是元素本身
for(var index in str){ 
    console.log(index,str[index]);
} 

5.for…of

對集合資料進行迭代遍歷,迴圈變數就是遍歷到的資料本身

語法：

for(迴圈變數 of 集合){
   迴圈操作
}

示例：

var str = "welcome";
for(var c of str){ 
    // c表示集合中的每個元素
    console.log(c);
} 

6.迴圈控制

• break：跳出整個迴圈，執行迴圈之後的程式碼，一般與if一起使用

• continue：跳出本次迴圈，執行下一次迴圈（本次尚未執行完的程式碼不再執行）

示例：

// 將1-20之間的整數相加，當累加值大於50時停止相加，輸出當前整數和累加值 
var sum=0;
for(var i=1;i<=20;i++){
    sum+=i;
    if(sum>50){
        console.log('當前整數：'+i+'，累加值：'+sum);
        break; // 停止迴圈的執行
    }
}

// 計算1-10之間所有偶數和
var sum=0;
for(var i=1;i<=10;i++){
    if(i%2!=0){
        continue; // 如果i是奇數，則跳過本次迴圈，不累加，執行下一次迴圈
    }
    sum+=i;
} 
console.log(sum);

7.二重迴圈

一個迴圈中巢狀著另一個迴圈，稱為二重迴圈，各種迴圈可以相互巢狀

• 外層迴圈變數變化一次，內層迴圈變數要變化一遍
• 二重迴圈中的break和continue，遵循就近原則

示例：

// 案例：列印九九乘法表
for(var i=1;i<=9;i++){
    for(var j=1;j<=i;j++){
        document.write(j+'*'+i+'='+i*j+'&nbsp;&nbsp;');
    }
    document.write('<br>')
}

/**
 *  1.用*列印直角三角形（1,2,3,4,5....）
 */
var rows = Number(prompt('請輸入要列印的行數：')); 
// 外層迴圈控制行數
for(var i=1;i<=rows;i++){
    // 內層迴圈控制每行*的數量
    for(var j=1;j<=i;j++){
        document.write('*');
    }
    document.write('<br>'); // 每列印一行，換一行
} 

8.for迴圈、for-in、forEach、for-of四大迴圈

• 詳細使用與解析請參考：https://www.cnblogs.com/amujoe/p/8875053.html