循環 · 廖雪峰 JavaScript Python Git 教程

# 循環 ## 循環要計算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`循環計算`1 * 2 * 3 * ... * 10`的結果： ``` 'use strict'; var x = ?; var i; for ... if (x === 3628800) { alert('1 x 2 x 3 x ... x 10 = ' + x); } else { alert('計算錯誤'); } ``` `for`循環最常用的地方是利用索引來遍歷數組： ``` var arr = ['Apple', 'Google', 'Microsoft']; var i, x; for (i=0; i<arr.length; i++) { x = arr[i]; alert(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) { alert(key); // 'name', 'age', 'city' } ``` 要過濾掉對象繼承的屬性，用`hasOwnProperty()`來實現： ``` var o = { name: 'Jack', age: 20, city: 'Beijing' }; for (var key in o) { if (o.hasOwnProperty(key)) { alert(key); // 'name', 'age', 'city' } } ``` 由于`Array`也是對象，而它的每個元素的索引被視為對象的屬性，因此，`for ... in`循環可以直接循環出`Array`的索引： ``` var a = ['A', 'B', 'C']; for (var i in a) { alert(i); // '0', '1', '2' alert(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`循環則可能一次都不執行。 ## 練習請利用循環遍歷數組中的每個名字，并顯示`Hello, xxx!`： ``` 'use strict'; var arr = ['Bart', 'Lisa', 'Adam']; ``` 請嘗試`for`循環和`while`循環，并以正序、倒序兩種方式遍歷。 ## 小結循環是讓計算機做重復任務的有效的方法，有些時候，如果代碼寫得有問題，會讓程序陷入“死循環”，也就是永遠循環下去。JavaScript的死循環會讓瀏覽器無法正常顯示或執行當前頁面的邏輯，有的瀏覽器會直接掛掉，有的瀏覽器會在一段時間后提示你強行終止JavaScript的執行，因此，要特別注意死循環的問題。在編寫循環代碼時，務必小心編寫初始條件和判斷條件，尤其是邊界值。特別注意`i < 100`和`i <= 100`是不同的判斷邏輯。