JavaScript中的for循環

時間 2020-07-25

原文原文鏈接

JavaScript 語言中的 for 循環用於屢次執行代碼塊，它是 JavaScript 中最經常使用的一個循環工具，還可用於數組的遍歷循環等。html

咱們爲何要使用 for 循環呢？打個比方，例如咱們想要控制檯輸出1到1000之間的全部數字，若是單寫輸出語句，要寫1000句代碼，可是若是使用 for 循環，幾句代碼就能實現。總之，使用 for 循環可以讓咱們寫代碼更方便快捷（固然啦，不然要它幹嗎）。程序員

for 循環語法

語法以下所示：數組

for(變量初始化; 條件表達式; 變量更新) {
    // 條件表達式爲true時執行的語句塊
}

變量初始化，表示代碼塊開始前執行。
條件表達式，定義運行循環代碼塊的條件。
變量更新，在循環代碼塊每次被執行以後再執行。

示例：

例如咱們在一個HTML文件中，編寫以下代碼，實現計算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 循環中三個語句：spa

變量初始化 i = 1，表示從 1 開始計算。
條件表達式 i <= 100，表示只要 i 小於等於 100 循環就會一直執行，當 i 大於 100 循環會中止。
變量更新 i++，以前咱們學運算符的時候學過，這是遞增運算符 ++，表示爲其操做數增長 1。

此時咱們能夠一點點來看這個 for 循環：code

第一次循環： result = 0 + 1   // 此時result值爲0，  i的值爲1
第二次循環： result = 1 + 2   // 此時result值爲0+1，i的值爲2
第三次循環： result = 3 + 3   // 此時result值爲1+2，i的值爲3
第四次循環： result = 6 + 4   // 此時result值爲3+3，i的值爲4
第五次循環： result = 10 + 5  // 此時result值爲6+4，i的值爲5
...

咱們只須要搞清楚 for 循環中的執行原理，不須要手動來計算求和，只要寫好代碼，執行代碼後計算機會很快會告訴咱們1到 100 的總和。htm

再補充一下，上述代碼中result = result + i，咱們也能夠寫成 result += i，這是咱們以前學過的加賦值運算符，還記得嗎？對象

示例：

再來看一個例子，例如咱們可使用 for 循環來實現數組遍歷，首先定義一個數組 lst：blog

var lst = ["a", "b", "c", "d", "e"];

在寫 for 循環時，首先就是要搞清楚小括號裏面的三個語句，由於咱們能夠經過數組中元素的下標索引來獲取元素的值，而數組的索引又是從 0 開始，因此變量初始化能夠設置爲i = 0。第二個條件表達式，由於數組中最後一個索引爲 lst.length - 1，因此只要小於等於 lst.length - 1，循環就會一直執行。而i <= lst.length - 1 就至關於 i<lst.length。第三個變量更新，當循環每循環一次，索引值就加一，因此爲 i++。

因此循環能夠像下面這樣寫：

for(i = 0; i<lst.length; i++){
    console.log(lst[i]);  // 輸出數組中的元素值，從索引爲0的值開始輸出，每次加1，一直到lst.length-1
}

輸出：

a
b
c
d
e

其實遍歷數組還有一種更好的方法，就是使用 for...in 循環語句來遍歷數組。

for...in 循環

for...in 循環主要用於遍歷數組或對象屬性，對數組或對象的屬性進行循環操做。for...in 循環中的代碼每執行一次，就會對數組的元素或者對象的屬性進行一次操做。

語法以下：

for (變量 in 對象) {
    // 代碼塊
}

for 循環括號內的變量是用來指定變量，指定的能夠是數組對象或者是對象屬性。

示例：

使用 for...in 循環遍歷咱們定義好的 lst 數組：

var lst = ["a", "b", "c", "d", "e"];
for(var l in lst){
    console.log(lst[l]);
}

輸出：

a
b
c
d
e

除了數組，for...in 循環還能夠遍歷對象，例如咱們遍歷 俠俠 的我的基本信息：

var object = {
    姓名:'俠俠',
    年齡:'22',
    性別:'男',
    出生日期:'1997-08-05',
    職業:'程序員',
    特長:'跳舞'
}

for(var i in object) {
    console.log(i + ":" + object[i]);
}

輸出：

姓名: 俠俠
年齡: 22
性別: 男
出生日期: 1997-08-05
職業:程序員
特長:跳舞

動手小練習

請自定義一個長度爲7的數組，而後經過 for 循環將數組中的元素遍歷出來。
求和：1~100的奇數和。
求和：1~100的偶數和。
使用對象定義一我的的我的信息（包括姓名、性別、年齡、出生日期、興趣愛好、職業、特長等），而後使用 for...in 循環將這些信息遍歷輸出。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。