首頁 > web前端 > js教程 > 主體

JavaScript學習之for迴圈與for/in迴圈介紹

青灯夜游
發布: 2018-10-16 17:07:48
轉載
1738 人瀏覽過

本篇文章就帶給大家JavaScript學習之for迴圈與for/in迴圈介紹。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

迴圈可以將程式碼區塊執行指定的次數。

JavaScript 支援不同類型的迴圈:

  • for - 循環程式碼區塊一定的次數

  • for/in - 循環遍歷物件的屬性

  • #while - 當指定的條件為true,循環指定的程式碼區塊

  • do/while - 當指定的條件為true,循環指定的程式碼區塊

#for迴圈

for迴圈的語法:

for(语句1;语句2;语句3){
    被执行的代码块
  }
登入後複製

說明:

# 語句1(程式碼區塊)開始前執行

 語句2  定義執行迴圈(程式碼區塊)的條件

 語句3  在迴圈(程式碼區塊)以便執行後執行

#例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        alert("我是for循环");
    }
</script>
</html>
登入後複製

從上面的範例中,可以看出:

在迴圈開始前設定變數(var i = 0; )

定義循環運行的條件(i 必須小於5)

在每次程式碼區塊已執行後增加一個值(i )

一般使用語句1初始化循環中所使用的變數  ==》(var i = 0;)

也可以不寫語句1,可以在語句1中初始化任意多個值。

也可以省略語句1,例如在迴圈之前就已經定義了初始值。

例如:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<script type="text/javascript">
		var i = 0
		for(; i < 5; i++) {
			alert("我是for循环");
		}
	</script>

</html>
登入後複製

但是語句1後面的 ==》; 不能省略。

語句2用於評估初始變數的條件。語句2也是可選的。如果語句回傳true則迴圈再次開始,如果傳回false,則循環結束。

如果省略了語句2,name必須在循環內提供break,否則循環就無法停下來,有可能會讓瀏覽器奔潰。

語句3通常會增加或減少初始變數的值,語句3也是可選的,有多種用法,增量可以是負數(i--)或更大( i = i 15)

語句3也可以省略,(例如當迴圈內部有對應的程式碼)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<script type="text/javascript">
		var i = 0,
			len = cc.length;
		for(; i < len;) {
			alert("我是for循环");
			i++;
		}
	</script>

</html>
登入後複製

for/in 循環

JavaScript for/in 語句循環遍歷物件的屬性:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>

	<body></body>
	<script type="text/javascript">
		var person = {
			name: "haha",
			age: 16
		};
		for(x in person) {
			text = text + person[x];
		}
	</script>

</html>
登入後複製

JavaScript中for/in不僅可以遍歷物件的屬性,還可以遍歷數組。 總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。更多相關教學請造訪JavaScript影片教學jQuery影片教學

,###bootstrap教學###! ###

以上是JavaScript學習之for迴圈與for/in迴圈介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板