JavaScript for 循環

循環可以將代碼塊執行指定的次數。

JavaScript 循環

如果您希望一遍又一遍地運行相同的代碼，并且每次的值都不同，那么使用循環是很方便的。

我們可以這樣輸出數組的值：

一般寫法：

document.write(cars[0] + "<br>");

document.write(cars[1] + "<br>");

document.write(cars[2] + "<br>");

document.write(cars[3] + "<br>");

document.write(cars[4] + "<br>");

document.write(cars[5] + "<br>");

使用for循環

for (var i=0;i<cars.length;i++)

{

document.write(cars[i] + "<br>");

}

不同類型的循環

JavaScript 支持不同類型的循環：

for - 循環代碼塊一定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件為 true 時循環指定的代碼塊
do/while - 同樣當指定的條件為 true 時循環指定的代碼塊

For 循環

for 循環是您在希望創建循環時常會用到的工具。

下面是 for 循環的語法：

for (語句 1; 語句 2; 語句 3)

{

被執行的代碼塊

}

語句 1 （代碼塊）開始前執行 starts.

語句 2 定義運行循環（代碼塊）的條件

語句 3 在循環（代碼塊）已被執行之后執行

實例

for (var i=0; i<5; i++)

{

x=x + "該數字為 " + i + "<br>";

}

從上面的例子中，您可以看到：

Statement 1 在循環開始之前設置變量 (var i=0)。

Statement 2 定義循環運行的條件（i 必須小于 5）。

Statement 3 在每次代碼塊已被執行后增加一個值 (i++)。

語句 1

通常我們會使用語句 1 初始化循環中所用的變量 (var i=0)。

語句 1 是可選的，也就是說不使用語句 1 也可以。

您可以在語句 1 中初始化任意（或者多個）值：

實例:

for (var i=0,len=cars.length; i<len; i++)

{

document.write(cars[i] + "<br>");

}

同時您還可以省略語句 1（比如在循環開始前已經設置了值時）：

實例:

var i=2,len=cars.length;

for (; i<len; i++)

{

document.write(cars[i] + "<br>");

}

語句 2

通常語句 2 用于評估初始變量的條件。

語句 2 同樣是可選的。

如果語句 2 返回 true，則循環再次開始，如果返回 false，則循環將結束。

	如果您省略了語句 2，那么必須在循環內提供 break。否則循環就無法停下來。這樣有可能令瀏覽器崩潰。請在本教程稍后的章節閱讀有關 break 的內容。

語句 3

通常語句 3 會增加初始變量的值。

語句 3 也是可選的。

語句 3 有多種用法。增量可以是負數 (i--)，或者更大 (i=i+15)。

語句 3 也可以省略（比如當循環內部有相應的代碼時）：

實例:

var i=0,len=cars.length;

for (; i<len; )

{

document.write(cars[i] + "<br>");

i++;

}

for/In 循環

JavaScript for/in 語句循環遍歷對象的屬性：

實例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

{

txt=txt + person[x];

}

您將在有關 JavaScript 對象的章節學到更多有關 for / in 循環的知識。

While 循環

我們將在下一章為您講解 while 循環和 do/while 循環。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

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

我們為什么要使用 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 循環中三個語句：

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

此時我們可以一點點來看這個 for 循環：

第一次循環： 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 的總和。

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

示例：

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

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 循環將這些信息遍歷輸出。

lt;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>

<script type='text/javascript'>
//入口函數
window.onload=function(){
alert('hello')
}

/* 在控制臺輸出內容按fn+f12 */
console.log('my world')

//一.循環事件
/*1.循環遍歷1-100*/
for(var i=0;i<=100;i++){
console.log(i);
}

// 2.實現1-100之間的累加求和
var sum = 0;
for(var j = 1;j <= 100;j ++){
sum += j;
}
console.log(sum)

//3.實現1-100之間偶數的和
var sum = 0;
for(var k = 0;k <= 100;k++){
if(k % 2 == 0){
sum += k
}
}
console.log(sum);

//4.循環遍歷一組數組
var names=['jack','mike','milk','hook','nike']
console.log(names.length)
for(var o=0;o<=names.length;o++){
console.log('第'+(o+1)+'個人名為*'+names[o])
}

</script>
</head>
<body>

<button onclick="alert('hello wrold')">點擊</button>
</body>
</html>

在線咨詢

上一篇：Html+CSS - 1段CSS讓表格更漂亮建議收藏
下一篇：Html之position粘性定位

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript for 循環

for 循環語法

示例：

for...in 循環

動手小練習

您的項目需求