Javascript筆記之循環

內容來自廖雪峯大神官網：https://www.liaoxuefeng.com/wiki/1022910821149312/1023023924160384

---

循環

要計算1+2+3，我們可以直接寫表達式：

1 + 2 + 3; // 6

要計算1+2+3+...+10，勉強也能寫出來。

但是，要計算1+2+3+...+10000，直接寫表達式就不可能了。

爲了讓計算機能計算成千上萬次的重複運算，我們就需要循環語句。

JavaScript的循環有兩種，一種是for循環，通過初始條件、結束條件和遞增條件來循環執行語句塊：

var x = 0;
var i;
for (i=1; i<=10000; i++) {
    x = x + i;
}
x; // 50005000

讓我們來分析一下for循環的控制條件：

• i=1 這是初始條件，將變量i置爲1；
• i<=10000 這是判斷條件，滿足時就繼續循環，不滿足就退出循環；
• i++ 這是每次循環後的遞增條件，由於每次循環後變量i都會加1，因此它終將在若干次循環後不滿足判斷條件i<=10000而退出循環。

 

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'
}

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

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循環只有一個判斷條件，條件滿足，就不斷循環，條件不滿足時則退出循環。比如我們要計算100以內所有奇數之和，可以用while循環實現：

var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500

在循環內部變量n不斷自減，直到變爲-1時，不再滿足while條件，循環退出。

do ... while

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

var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100

用do { ... } while()循環要小心，循環體會至少執行1次，而for和while循環則可能一次都不執行。