JavaScript循環(huán)_動力節(jié)點Java學(xué)院整理
要計算1+2+3,我們可以直接寫表達(dá)式:
1 + 2 + 3; // 6
要計算1+2+3+...+10,勉強也能寫出來。
但是,要計算1+2+3+...+10000,直接寫表達(dá)式就不可能了。
為了讓計算機能計算成千上萬次的重復(fù)運算,我們就需要循環(huán)語句。
JavaScript的循環(huán)有兩種,一種是for循環(huán),通過初始條件、結(jié)束條件和遞增條件來循環(huán)執(zhí)行語句塊:
var x = 0; var i; for (i=1; i<=10000; i++) { x = x + i; } x; // 50005000
讓我們來分析一下for循環(huán)的控制條件:
i=1 這是初始條件,將變量i置為1;
i<=10000 這是判斷條件,滿足時就繼續(xù)循環(huán),不滿足就退出循環(huán);
i++ 這是每次循環(huán)后的遞增條件,由于每次循環(huán)后變量i都會加1,因此它終將在若干次循環(huán)后不滿足判斷條件i<=10000而退出循環(huán)。
練習(xí)
利用for循環(huán)計算1 * 2 * 3 * ... * 10的結(jié)果。
for循環(huán)最常用的地方是利用索引來遍歷數(shù)組:
var arr = ['Apple', 'Google', 'Microsoft']; var i, x; for (i=0; i<arr.length; i++) { x = arr[i]; alert(x); }
for循環(huán)的3個條件都是可以省略的,如果沒有退出循環(huán)的判斷條件,就必須使用break語句退出循環(huán),否則就是死循環(huán):
var x = 0; for (;;) { // 將無限循環(huán)下去 if (x > 100) { break; // 通過if判斷來退出循環(huán) } x ++; }
for ... in
for循環(huán)的一個變體是for ... in循環(huán),它可以把一個對象的所有屬性依次循環(huán)出來:
var o = { name: 'Jack', age: 20, city: 'Beijing' }; for (var key in o) { alert(key); // 'name', 'age', 'city' }
要過濾掉對象繼承的屬性,用hasOwnProperty()來實現(xiàn):
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循環(huán)可以直接循環(huán)出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的循環(huán)得到的是String而不是Number。
while
for循環(huán)在已知循環(huán)的初始和結(jié)束條件時非常有用。而上述忽略了條件的for循環(huán)容易讓人看不清循環(huán)的邏輯,此時用while循環(huán)更佳。
while循環(huán)只有一個判斷條件,條件滿足,就不斷循環(huán),條件不滿足時則退出循環(huán)。比如我們要計算100以內(nèi)所有奇數(shù)之和,可以用while循環(huán)實現(xiàn):
var x = 0; var n = 99; while (n > 0) { x = x + n; n = n - 2; } x; // 2500
在循環(huán)內(nèi)部變量n不斷自減,直到變?yōu)?1時,不再滿足while條件,循環(huán)退出。
do ... while
最后一種循環(huán)是do { ... } while()循環(huán),它和while循環(huán)的唯一區(qū)別在于,不是在每次循環(huán)開始的時候判斷條件,而是在每次循環(huán)完成的時候判斷條件:
var n = 0; do { n = n + 1; } while (n < 100); n; // 100
用do { ... } while()循環(huán)要小心,循環(huán)體會至少執(zhí)行1次,而for和while循環(huán)則可能一次都不執(zhí)行。
練習(xí)
請利用循環(huán)遍歷數(shù)組中的每個名字,并顯示Hello, xxx!
請嘗試for循環(huán)和while循環(huán),并以正序、倒序兩種方式遍歷。
小結(jié)
循環(huán)是讓計算機做重復(fù)任務(wù)的有效的方法,有些時候,如果代碼寫得有問題,會讓程序陷入“死循環(huán)”,也就是永遠(yuǎn)循環(huán)下去。JavaScript的死循環(huán)會讓瀏覽器無法正常顯示或執(zhí)行當(dāng)前頁面的邏輯,有的瀏覽器會直接掛掉,有的瀏覽器會在一段時間后提示你強行終止JavaScript的執(zhí)行,因此,要特別注意死循環(huán)的問題。
在編寫循環(huán)代碼時,務(wù)必小心編寫初始條件和判斷條件,尤其是邊界值。特別注意i < 100和i <= 100是不同的判斷邏輯。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js數(shù)組循環(huán)遍歷數(shù)組內(nèi)所有元素的方法
- Js setInterval與setTimeout(定時執(zhí)行與循環(huán)執(zhí)行)的代碼(可以傳入?yún)?shù))
- JS數(shù)組的遍歷方式for循環(huán)與for...in
- js 數(shù)組的for循環(huán)到底應(yīng)該怎么寫?
- javascript 循環(huán)讀取JSON數(shù)據(jù)的代碼
- js和jquery中循環(huán)的退出和繼續(xù)下一個循環(huán)
- JavaScript中循環(huán)遍歷Array與Map的方法小結(jié)
- javaScript如何跳出多重循環(huán)break、continue
- javascript forEach通用循環(huán)遍歷方法
- javascript下for循環(huán)用法小結(jié)
相關(guān)文章
javascript使用substring實現(xiàn)的展開與收縮文字功能示例
這篇文章主要介紹了javascript使用substring實現(xiàn)的展開與收縮文字功能,涉及javascript元素遍歷與屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2019-06-06JavaScript面向?qū)ο笾w會[總結(jié)]
看過很多JavaScript書,對JavaScript的面向?qū)ο笾v的都比較深入,但是并沒有做到深入淺出,總結(jié)了我做的一些JavaScript程序的經(jīng)驗,以簡潔明了的文字使大家明白JavaScript面向?qū)ο蟮膶崿F(xiàn)。2008-11-11electronjs實現(xiàn)打開的網(wǎng)頁密碼自動保存功能(實現(xiàn)步驟)
在 Electron 的渲染進(jìn)程中,可以使用 webContents 對象來監(jiān)聽網(wǎng)絡(luò)請求,在 Electron 中實現(xiàn)自動保存網(wǎng)頁密碼的功能涉及到幾個步驟,下面給大家分享實現(xiàn)思路,感興趣的朋友跟隨小編一起看看吧2024-08-08