亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

全部開發者教程

JavaScript 入門教程

for 語句

for 語句是循環語句中的一種。

for 語句可以使程序在某一個條件下重復執行一段代碼。

1. 基本語法

for 語句相對于 if 語句稍微復雜,通常為以下格式:

for (初始語句; 條件; 條件為真值時執行的語句) {
  // 循環體
}

初始語句會在循環開始前進行執行。

條件會在每次循環結束后執行,結果影響循環語句是否要繼續執行。

條件為真時執行的語句通常會用來影響下一次計算條件的結果。

2. 為什么需要循環語句

循環的應用非常廣泛,如果有學習過數據結構與算法,會發現大部分的算法都需要循環介入,否則會使程序變得冗余復雜。

如我們需要生成一段 HTML 列表代碼:

實例演示
預覽 復制
復制成功!
<div id="container"></div>

<script>
  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  var li1 = '<li>' + arr[0] + '</li>';
  var li2 = '<li>' + arr[1] + '</li>';
  var li3 = '<li>' + arr[2] + '</li>';
  var li4 = '<li>' + arr[3] + '</li>';
  var li5 = '<li>' + arr[4] + '</li>';
  var li6 = '<li>' + arr[5] + '</li>';
  var li7 = '<li>' + arr[6] + '</li>';
  var li8 = '<li>' + arr[7] + '</li>';
  var li9 = '<li>' + arr[8] + '</li>';

  var ul = '<ul>'+ li1 + li2 + li3 + li4 + li5 + li6 + li7 + li8 + li9 + '</ul>';

  document.getElementById('container').innerHTML = ul;
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

可以發現這里生成列表的代碼很冗余,都是重復的操作,如果使用 for 循環,代碼可以改成這樣:

實例演示
預覽 復制
復制成功!
<div id="container"></div>
<script>
  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  var lis = '';

  // 單獨拿到數組的長度
  var len = arr.length;
  // 聲明變量i用來計數
  var i;
  for (i = 0; i < len; i++) {
    lis = lis + ('<li>' + arr[i] + '</li>');
  }

  var ul = '<ul>' + lis + '</ul>';

  document.getElementById('container').innerHTML = ul;
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

這里使用 for 循環生成了一個列表,效果和上述聲明九個變量然后做拼接的方式是一樣的。

循環開始前先聲明的變量i用于計數,表示當前循環到第幾次。

在循環開始前先將i設置為0,這只會執行一次,隨后比較當前循環的次數是否小于數組長度,如果比數組長度小則執行i++,i++會先使用i的值,再做累加 ( i = i + 1) 操作,隨后執行循環體,重復上述操作。

具體的流程如下:

len 的值為 9

  • 第一次循環
    • i 的值為 0,i是小于 len 變量的,所以 arr[0] 的值就是 1,這個時候 lis 被累加了<li>1</li>。
  • 第二次循環
    • i的值為 1,i 是小于 len 變量的,所以 arr[1] 的值就是 2,這個時候 lis 被累加了<li>2</li>。
  • 第三次循環
    • i 的值為 2,i 是小于 len 變量的,所以 arr[2] 的值就是 3,這個時候 lis 被累加了<li>3</li>
  • 第四次循環
    • i 的值為 3,i是小于 len 變量的,所以 arr[3] 的值就是 4,這個時候 lis 被累加了<li>4</li>。
  • 第五次循環
    • i的值為 4,i 是小于 len 變量的,所以arr[4]的值就是5,這個時候lis被累加了<li>5</li>。
  • 第六次循環
    • i的值為 5,i 是小于 len 變量的,所以 arr[5] 的值就是 6,這個時候 lis 被累加了<li>6</li>。
  • 第七次循環
    • i的值為 6,i 是小于 len 變量的,所以 arr[6] 的值就是 7,這個時候 lis 被累加了<li>7</li>。
  • 第八次循環
    • i 的值為 7,i 是小于 len 變量的,所以 arr[7] 的值就是 8,這個時候 lis 被累加了<li>8</li>。
  • 第九次循環
    • i的值為 8,i 是小于 len 變量的,所以 arr[8] 的值就是 9,這個時候 lis 被累加了<li>9</li>。
  • 第十次循環
    • i 的值為 9,i 等于 len 變量,不再小于 len,條件不成立,循環結束。

雖然流程看起來復雜,但是代碼的可維護性得到了提高,冗余代碼也減少了,如果這個時候li標簽需要加一些屬性,如class或者style,只需要修改循環體中的一行代碼即可。

這種形式的 for 循環還有一種語法:

for (初始語句; 條件; 條件為真值時執行的語句) 需要循環的語句;

和 if 語句很像,這種屬于行循環語句,這種用到的比較少,因為代碼的可閱讀性比較低,而且一般用到循環的場景都不止一行代碼。

3. for … in

for…in 循環可以用來遍歷對象的屬性名。

var obj = {
  name: '小紅',
  age: 12,
  hobby: ['打籃球', '唱歌'],
};

for (key in obj) {
  console.log(obj[key]);
}

// 輸出:
//   "小紅"
//   12
//   ["打籃球", "唱歌"]

每一次遍歷拿到的 key 就是對象的某一個屬性名,當屬性名被遍歷完后會自動退出循環。

有部分 key 是無法遍歷到的,具體規則可以參閱對象章節。

4. 無限循環

for (;;) {
  console.log('loop...');
}

這樣的循環語句會陷入無限循環。

圖片描述

大部分無限循環會讓瀏覽器卡死,需要強制退出瀏覽器!

5. 循環應用的例子

5.1 判斷一個數是不是質數

var num = 17;

var flag = false;

var len;
var i;

for (i = 2, len = 17 -1; i <= len; i++) {
  if (num % i === 0) {
    flag = true;
    break; // break可以中斷循環
  }
}

if (flag) {
  console.log(num + '不是質數');
} else {
  console.log(num + '是質數');
}

// 輸出:"17是質數"

首先要知道什么是質數,質數就是只能被1和本身整除的數。

所以如果要判斷num是不是質數,只需要去掉頭尾,從2循環到num - 1,用num對每一個循環數做取余操作,如果存在余數為 0 的,就說明中間有個數可以被整除,那就不是質數,反之就是質數。

5.2 計算階乘

var num = 4;

var result = 1;

var i;
for (i = num; i > 1; i--) {
  result = result * i;
}

console.log(result); // 輸出:24

階乘是所有小于及等于某一數的正整數的積,如4的階乘,在數學中表示為4!,結果為4 * 3 * 2 * 1。

在代碼中,就可以用一個變量來保存每次做乘法的結果,如 4 的階乘,就可以用變量result記錄結果,初始值為 1,循環可以從 4 循環到 1,每次將循環到的值乘以result,循環結束后就可以得到結果。

6. 小結

循環語句和條件語句一樣,是給語言帶來處理業務能力的重要特性之一。

通常如果需要連續執行多次的重復操作,都應該考慮使用循環來解決。