JavaScript-----7.循環

1.循環

在JS中主要有以下三種類型的循環

• for循環
• while循環
• do...while循環

2. for循環

2.1 語法結構如下：

for (初始化變量； 條件表達式； 操作表達式) {
    //循環體
}

舉例：打印100句“你好”

for (var i = 1; i <= 100; i++) {
    console.log('你好！');
}

2.2 斷點調試

用於幫助我們觀察程序的運行過程

注意：設置斷點之后要刷新。

2.3 案例

案例1：1+2+3+...+100

var sum = 0;
for (var i = 1; i <= 100; i++) {
    //sum = sum + i;
    sum += i;
}
console.log(sum);

案例2：1到100之間數的平均值

var aver, sum = 0;
for (var i = 1; i <= 100; i++) {
    sum += i;
}
aver = sum / (i - 1);
console.log(aver);

案例3：1到100之間所有奇數值之和and偶數之和

var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 2 == 1) {
        odd += i;
    } else {
        even += i;
    }
}
console.log(odd);
console.log(even);

案例5：1到100之間所有可以被3整除的數之和

var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
        sum += i;
    }
}
console.log(sum);

案例5：求學生成績
要求：用戶輸入班級人數，之后以此輸入每個學生成績，最后打印出該班級總的成績和平均成績。

var sum = 0;
var aver, score;
var num = prompt('請輸入班級總人數');
for (var i = 1; i <= num; i++) {
    score = prompt('請輸入第' + i + '個學生的成績');
    sum += parseFloat(score);
}
aver = sum / num;
alert('班級總成績是' + sum);
alert('班級平均成績是' + aver);

案例6：一行打出五顆星
要求：利用追加字符串的方式

//方法1：
console.log('★★★★★'); //★★★★★

//方法2：
for (var i = 1; i <= 5; i++) {
    console.log('★'); //5★
}

//方法3：
var str = '';
for (var i = 1; i <= 5; i++) {
    str += '★';
}
console.log(str); //★★★★★

3. 雙重for循環

3.1 語法格式如下

for (外層初始化變量; 外層條件表達式; 外層操作表達式) {
    for (里層初始化變量; 里層條件表達式; 里層操作表達式) {
        //執行語句
    }
}

舉例：打印5行5列星星

//打印5行5列的星星
var str = '';
for (var i = 1; i <= 5; i++) {
    for (var j = 1; j <= 5; j++) {
        str = str + '☆';
    }
    str = str + '\n';
}
console.log(str);

案例：打印n行m列是星星
要求：用戶輸入行數和列數，之后在控制台打印用戶輸入的行數和列數的星星。

var n = prompt('請用戶輸入行數');
var m = prompt('請用戶輸入列數');
var str = '';
for (var i = 1; i <= n; i++) {\\
    控制行數
    for (var j = 1; j <= m; j++) {\\
        控制列數
        str = str + '☆';\\
        控制列數
    }
    str = str + '\n';\\
    控制行數
}
console.log(str);

案例：打印到三角形

寫法1：

var row = prompt('輸入行數');
var col = prompt('輸入列數');
var str = '';
for (var i = 1; i <= row; i++) {
    for (var j = 1; j <= col; j++) {
        str = str + '☆';
    }
    str = str + '\n';
    col = col - 1;
}
console.log(str);

寫法2：

var row = prompt('輸入行數');
var col = prompt('輸入列數');
var str = '';
for (var i = 1; i <= row; i++) {
    for (var j = i; j <= col; j++) {
        str = str + '☆';
    }
    str = str + '\n';
}
console.log(str);

案例：打印正三角形

寫法1：

var str = '';
for (var i = 10; i > 0; i--) {
    for (var j = i; j <= 10; j++) {
        str = str + '☆';
    }
    str = str + '\n';
}
console.log(str);

寫法2：

var str = '';
for (var i = 1; i <= 10; i++) {
    for (var j = 1; j <= i; j++) {
        str = str + '☆';
    }
    str = str + '\n';
}
console.log(str);

綜合案例：打印99乘法表

var str = '';
for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        str = str + j + 'x' + i + '=' + i * j + '\t';               \\'t'是tab鍵
    }
    str = str + '\n';
}
console.log(str);

4. while循環

語法格式

while (條件表達式) {
    //循環體
}

相比較for循環的優點之處就在於可以做一些復雜的條件判斷
案例：彈出一個提示框“你愛我嗎？”如果輸入的不是“我愛你”，就一直彈出提示框“你愛我嗎？”

var str = prompt('你愛我嗎？');
while (str != '我愛你') {
    str = prompt('你愛我嗎？');
}
alert('我也愛你呀');

5. do while循環

語法結構

do {
    //循環體
} while (條件表達式)

與while循環的不同之處在於do while是先執行以此循環體再判斷條件，所以do while循環體至少執行一次。
案例：打印人的一生

var age = 1;
do {
    console.log('今年' + age + '歲');
    age++;
} while (age <= 100)

案例：計算1+2+3+...+100

var sum = 0;
var i = 1;
do {
    sum += i;
    i = i + 1;
} while (i <= 100)
console.log(sum);

案例：彈出一個提示框“你愛我嗎？”如果輸入的不是“我愛你”，就一直彈出提示框“你愛我嗎？”

do {
    var mesg = prompt('你愛我嗎？');
} while (mesg !== '我愛你') //若滿足while里面的條件表達式就一直執行  !==是指不全等
alert('我也愛你呀！');

6. continue

用於跳出本次循環，繼續執行下一次循環，本次循環體中continue之后的代碼就會少執行一次。
案例：求1~100之間，除了能被7整除之外的整數和

var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 7 == 0) {
        continue;
    }
    sum += i;
}
console.log(sum);
</script>

7. break

之前提到break可以跳出整個switch語句，break還可以跳出整個for循環

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;
    }
    console.log('我正在吃第' + i + '個包子');
}
// 我正在吃第1個包子
// 我正在吃第2個包子

8. 作業

接收用戶輸入的用戶名和密碼，若用戶名為admin,密碼為123456則提示用戶登陸成功，否則讓用戶一直輸入

do {
    userName = prompt('請輸入用戶名');
    password = prompt('請輸入用戶密碼');
} while (userName != 'admin' && password != '123456')
alert('登陸成功！');

求整數1~100的累加值，但要求跳過所有個位數為3的數（用continue實現）

var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 10 == 3) {
        continue;
    }
    sum = sum + i;
}
console.log(sum);

模擬ATM機

var balance = 100;
flag = 1;
while (flag) {
    var mesg = prompt('請輸入您需要的操作序號\n1.存錢\n2.取錢\n3.顯示余額\n4.退出');
    switch (mesg) {
        case '1':
            save = prompt('請輸入存入金額');
            balance = parseFloat(save) + balance;
            alert('當前余額為' + balance);
            break;
        case '2':
            pay = prompt('請輸入取款金額');
            balance = balance - pay;
            alert('當前余額為' + balance);
            break;
        case '3':
            alert('當前余額為' + balance);
            break;
        case '4':
            alert('正在退出');
            flag = 0;
            break;
        default:
            alert('序號輸入錯誤');
            break;
    }
}