JavaScript學習筆記（五）——條件判斷與迴圈

在學習廖雪峰前輩的JavaScript教程中，遇到了一些需要註意的點，因此作為學習筆記列出來，提醒自己註意！

如果大家有需要，歡迎訪問前輩的博客https://www.liaoxuefeng.com/學習。

條件判斷

JavaScript使用if(){......}else{......}來進行條件判斷。

條件判斷需要註意一下幾點：

• 不要漏掉每一個括弧{}；
• if...else...語句的執行特點是二選一，在多個if...else...語句中，如果某個條件成立，則後續就不再繼續判斷了。所以判斷條件設置不能出錯。
• 在JavaScript把null、undefined、0、NaN和空字元串 ‘ ’ 視為false，其他的值一概視為true。

迴圈

JavaScript的迴圈有兩種。一種是for迴圈，另一種是while迴圈。

for迴圈

for迴圈最常用的地方是利用索引來遍曆數組：

var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}

for迴圈的3個條件都是可以省略的，如果沒有退出迴圈的判斷條件，就必須使用break語句退出迴圈，否則就是死迴圈：

var x = 0;
for (;;) { // 將無限迴圈下去
    if (x > 100) {
        break; // 通過if判斷來退出迴圈
    }
    x ++;
}

for ... in

for迴圈的一個變體是for...in迴圈，它可以把一個對象的所有屬性依次迴圈出來：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'city'
}

要過濾掉對象繼承的屬性，用hasOnlyProperty()來實現：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

由於Array也是對象，而它的每個元素的索引被視為對象的屬性，因此，for...in迴圈可以直接迴圈出Array的索引：

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

請註意，for...in對Array的迴圈得到的是String而不是Number。

while

for迴圈在已知迴圈的初始和結束條件時非常有用。而上述忽略了條件的for迴圈容易讓人看不清迴圈的邏輯，此時用while迴圈更佳。

while迴圈只有一個判斷條件，條件滿足，就不斷迴圈，條件不滿足時則退出迴圈。

do ... while

do{...}while()迴圈，它和while迴圈的唯一區別在於，不是在每次迴圈開始的時候判斷條件，而是在每次迴圈完成的時候判斷條件

註意：do{...}while()迴圈體會至少執行1次，而for和while迴圈則可能一次都不執行。

小結

迴圈是讓電腦做重覆任務的有效的方法，有些時候，如果代碼寫得有問題，會讓程式陷入“死迴圈”，也就是永遠迴圈下去。JavaScript的死迴圈會讓瀏覽器無法正常顯示或執行當前頁面的邏輯，有的瀏覽器會直接掛掉，有的瀏覽器會在一段時間後提示你強行終止JavaScript的執行，因此，要特別註意死迴圈的問題。

在編寫迴圈代碼時，務必小心編寫初始條件和判斷條件，尤其是邊界值。特別註意i < 100和i <= 100是不同的判斷邏輯。