JS循环与控制语句-优快云博客

本文详细介绍JavaScript中的for循环、while循环、do...while循环，以及break和continue语句的使用方法。通过实例演示了如何利用for循环输出HTML标题，遍历数组元素，并展示了循环控制语句在实际编程中的应用。

for循环

<p>for循环</p>
	<button type="button" onclick="myFunction()">Try it!</button>
	<p id="demo">0</p>
	<script type="text/javascript">
		function myFunction(){
			var x="",i;
			for(i=0;i<5;i++){
				x =x + "The number is " + i + "<br>";
			}
			document.getElementById("demo").innerHTML=x;
		}
	</script>

2.延伸：for循环输出html标题

<button type="button" onclick="myFunction()">Try it!</button>
	<p id="demo">0</p>
	<script type="text/javascript">
		function myFunction(){
			var x="",i;
			for(i=1;i<6;i++){
				x =x+"<h"+i+">Heading "+i+"</h"+i+">";
			}
			document.getElementById("demo").innerHTML=x;
		}
	</script>

3.while循环

<p>点击这个按钮，只要i小于5则一直执行代码块</p>
	<button type="button" onclick="myFunction()">Try it!</button>
	<p id="demo">0</p>
	<script type="text/javascript">
		function myFunction(){
			var x="",i=0;
			while(i<5){
				x=x+"该数字为 "+i+"<br>";
				i++;
			}
			document.getElementById("demo").innerHTML=x;
		}
	</script>

4.do while循环

<p>点击下面的按钮，只要i小于5就一直循环代码块</p>
	<button onclick="myFunction()">点我</button>
	<p id="demo"></p>
	<script type="text/javascript">
		function myFunction(){
			var x="",i=0;
			do{
				x=x+"该数字为 "+i+"<br>";
				i++;
			}while(i<5)
			document.getElementById("demo").innerHTML=x;
		}
	</script>

5.break语句

<p>点击按钮，测试带有break语句的循环</p>
	<button onclick="myFunction()">点我</button>
	<p id="demo"></p>
	<script type="text/javascript">
		function myFunction(){
			var x="",i=0;
			for(i=0;i<10;i++){
				if(i==3){
					break;
				}
				x=x+"该数字为 "+i+"<br>";
			}
			document.getElementById("demo").innerHTML=x;
		}
	</script>

6.continue语句

<p>点击按钮来执行循环，该循环会跳过i=3的步进</p>
	<button onclick="myFunction()">点我</button>
	<p id="demo"></p>
	<script type="text/javascript">
		function myFunction(){
			var x="",i=0;
			for(i=0;i<10;i++){
				if(i==3){
					continue;
				}
				x=x+"该数字为 "+i+"<br>";
			}
			document.getElementById("demo").innerHTML=x;
		}
	</script>

7.for in声明遍历数组内的元素

<p>点击下面的按钮，循环遍历"person"的属性</p>
	<button onclick="myFunction()">点我</button>
	<p id="demo"></p>
	<script type="text/javascript">
		function myFunction(){
			var x;
			var txt="";
			var person={fname:"加油 ",lame:"周周 ",age:"88"};
			for(x in person){
				txt=txt+person[x];
			}
			document.getElementById("demo").innerHTML=txt;
		}
	</script>

JS06-各种循环