2020-7-31 seo達(dá)人
JavaScript 語(yǔ)言中的 for 循環(huán)用于多次執(zhí)行代碼塊,它是 JavaScript 中最常用的一個(gè)循環(huán)工具,還可用于數(shù)組的遍歷循環(huán)等。
我們?yōu)槭裁匆褂?for 循環(huán)呢?打個(gè)比方,例如我們想要控制臺(tái)輸出1到1000之間的所有數(shù)字,如果單寫輸出語(yǔ)句,要寫1000句代碼,但是如果使用 for 循環(huán),幾句代碼就能實(shí)現(xiàn)。總之,使用 for 循環(huán)能夠讓我們寫代碼更方便快捷(當(dāng)然啦,否則要它干嘛)。
for 循環(huán)語(yǔ)法
語(yǔ)法如下所示:
for(變量初始化; 條件表達(dá)式; 變量更新) {
// 條件表達(dá)式為true時(shí)執(zhí)行的語(yǔ)句塊
}
變量初始化,表示代碼塊開(kāi)始前執(zhí)行。
條件表達(dá)式,定義運(yùn)行循環(huán)代碼塊的條件。
變量更新,在循環(huán)代碼塊每次被執(zhí)行之后再執(zhí)行。
示例:
例如我們?cè)谝粋€(gè)HTML文件中,編寫如下代碼,實(shí)現(xiàn)計(jì)算1到100的總和:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_俠課島(9xkd.com)</title>
</head>
<body>
<script>
var result = 0;
for(var i = 1; i <= 100; i++) {
result = result + i;
}
alert(result);
</script>
</body>
</html>
在瀏覽器中打開(kāi)這個(gè)文件,會(huì)彈出一個(gè)彈出層,彈出層中顯示的是1到100的總和:
上述代碼中,我們聲明了一個(gè)變量 result 并給它賦值為 0,表示初始的總和為 0 。
然后在 for 循環(huán)中三個(gè)語(yǔ)句:
變量初始化 i = 1,表示從 1 開(kāi)始計(jì)算。
條件表達(dá)式 i <= 100,表示只要 i 小于等于 100 循環(huán)就會(huì)一直執(zhí)行,當(dāng) i 大于 100 循環(huán)會(huì)停止。
變量更新 i++,之前我們學(xué)運(yùn)算符的時(shí)候?qū)W過(guò),這是遞增運(yùn)算符 ++,表示為其操作數(shù)增加 1。
此時(shí)我們可以一點(diǎn)點(diǎn)來(lái)看這個(gè) for 循環(huán):
第一次循環(huán): result = 0 + 1 // 此時(shí)result值為0, i的值為1
第二次循環(huán): result = 1 + 2 // 此時(shí)result值為0+1,i的值為2
第三次循環(huán): result = 3 + 3 // 此時(shí)result值為1+2,i的值為3
第四次循環(huán): result = 6 + 4 // 此時(shí)result值為3+3,i的值為4
第五次循環(huán): result = 10 + 5 // 此時(shí)result值為6+4,i的值為5
...
我們只需要搞清楚 for 循環(huán)中的執(zhí)行原理,不需要手動(dòng)來(lái)計(jì)算求和,只要寫好代碼,執(zhí)行代碼后計(jì)算機(jī)會(huì)很快會(huì)告訴我們1到 100 的總和。
再補(bǔ)充一下,上述代碼中result = result + i,我們也可以寫成 result += i,這是我們之前學(xué)過(guò)的加賦值運(yùn)算符,還記得嗎?
示例:
再來(lái)看一個(gè)例子,例如我們可以使用 for 循環(huán)來(lái)實(shí)現(xiàn)數(shù)組遍歷,首先定義一個(gè)數(shù)組 lst:
var lst = ["a", "b", "c", "d", "e"];
在寫 for 循環(huán)時(shí),首先就是要搞清楚小括號(hào)里面的三個(gè)語(yǔ)句,因?yàn)槲覀兛梢酝ㄟ^(guò)數(shù)組中元素的下標(biāo)索引來(lái)獲取元素的值,而數(shù)組的索引又是從 0 開(kāi)始,所以變量初始化可以設(shè)置為i = 0。第二個(gè)條件表達(dá)式,因?yàn)閿?shù)組中最后一個(gè)索引為 lst.length - 1,所以只要小于等于 lst.length - 1,循環(huán)就會(huì)一直執(zhí)行。而i <= lst.length - 1 就相當(dāng)于 i<lst.length。第三個(gè)變量更新,當(dāng)循環(huán)每循環(huán)一次,索引值就加一,所以為 i++。
所以循環(huán)可以像下面這樣寫:
for(i = 0; i<lst.length; i++){
console.log(lst[i]); // 輸出數(shù)組中的元素值,從索引為0的值開(kāi)始輸出,每次加1,一直到lst.length-1
}
輸出:
a
b
c
d
e
其實(shí)遍歷數(shù)組還有一種更好的方法,就是使用 for...in 循環(huán)語(yǔ)句來(lái)遍歷數(shù)組。
for...in 循環(huán)
for...in 循環(huán)主要用于遍歷數(shù)組或?qū)ο髮傩裕瑢?duì)數(shù)組或?qū)ο蟮膶傩赃M(jìn)行循環(huán)操作。for...in 循環(huán)中的代碼每執(zhí)行一次,就會(huì)對(duì)數(shù)組的元素或者對(duì)象的屬性進(jìn)行一次操作。
語(yǔ)法如下:
for (變量 in 對(duì)象) {
// 代碼塊
}
for 循環(huán)括號(hào)內(nèi)的變量是用來(lái)指定變量,指定的可以是數(shù)組對(duì)象或者是對(duì)象屬性。
示例:
使用 for...in 循環(huán)遍歷我們定義好的 lst 數(shù)組:
var lst = ["a", "b", "c", "d", "e"];
for(var l in lst){
console.log(lst[l]);
}
輸出:
a
b
c
d
e
除了數(shù)組,for...in 循環(huán)還可以遍歷對(duì)象,例如我們遍歷 俠俠 的個(gè)人基本信息:
var object = {
姓名:'俠俠',
年齡:'22',
性別:'男',
出生日期:'1997-08-05',
職業(yè):'程序員',
特長(zhǎng):'跳舞'
}
for(var i in object) {
console.log(i + ":" + object[i]);
}
輸出:
姓名: 俠俠
年齡: 22
性別: 男
出生日期: 1997-08-05
職業(yè):程序員
特長(zhǎng):跳舞
動(dòng)手小練習(xí)
請(qǐng)自定義一個(gè)長(zhǎng)度為7的數(shù)組,然后通過(guò) for 循環(huán)將數(shù)組中的元素遍歷出來(lái)。
求和:1~100的奇數(shù)和。
求和:1~100的偶數(shù)和。
使用對(duì)象定義一個(gè)人的個(gè)人信息(包括姓名、性別、年齡、出生日期、興趣愛(ài)好、職業(yè)、特長(zhǎng)等),然后使用 for...in 循環(huán)將這些信息遍歷輸出。
藍(lán)藍(lán)設(shè)計(jì)( m.ssll180.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.ssll180.com