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