16JavaScript for循环

时间 2020-05-23

标签 16javascript javascript 循环栏目 JavaScript 繁體版

原文原文链接

1.JavaScript 循环

若是但愿一遍又一遍地运行相同的代码，而且每次的值都不一样，那么使用循环是很方便的。html

咱们能够这样输出数组的值：数组

通常写法：浏览器

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循环写法：工具

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba</title>
</head>        
<body>

<script> arr=["1","2","3","4","5","6"]; for (var i=0;i<arr.length;i++){ document.write(arr[i] + "<br>"); } </script>

</body>
</html>

结果：spa

2.不一样类型的循环

JavaScript 支持不一样类型的循环：code

for - 循环代码块必定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 一样当指定的条件为 true 时循环指定的代码块

3.For 循环

for 循环是您在但愿建立循环时常会用到的工具。htm

下面是 for 循环的语法：对象

for (语句 1; 语句 2; 语句 3) { 被执行的代码块 }

语句 1 （代码块）开始前执行blog

语句 2 定义运行循环（代码块）的条件ip

语句 3 在循环（代码块）已被执行以后执行

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Yubaba</title>
 6 </head>
 7 <body>
 8 
 9 <p>点击按钮循环代码6次。</p>
10 <button onclick="myFunction()">点击这里</button>
11 <p id="demo"></p>
12 <script>
13 function myFunction(){ 14     var x=""; 15     for (var i=0;i<6;i++){ 16  x=x+"该数字为 " + i + "<br>"; 17  } 18  document.getElementById("demo").innerHTML=x; 19 } 20 </script>
21 
22 </body>
23 </html>

运行结果：

for中的语句 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>"); }

for中的语句 2

一般语句 2 用于评估初始变量的条件。

语句 2 一样是可选的。

若是语句 2 返回 true，则循环再次开始，若是返回 false，则循环将结束。

注意：若是咱们省略了语句 2，那么必须在循环内提供 break。不然循环就没法停下来。这样有可能令浏览器崩溃。

for中的语句 3

一般语句 3 会增长初始变量的值。

语句 3 也是可选的。

语句 3 有多种用法。增量能够是负数 (i--)，或者更大 (i=i+15)。

语句 3 也能够省略（好比当循环内部有相应的代码时）：

var i=0,len=cars.length; for (; i<len; ) { document.write(cars[i] + "<br>"); i++; }

4.For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Yubaba</title>
 6 </head>
 7 <body>
 8     
 9 <p>点击下面的按钮，经过for in循环遍历对象 "person" 的属性。</p>
10 <button onclick="myFunction()">点击这里</button>
11 <p id="demo"></p>
12 <script>
13 function myFunction(){ 14     var x; 15     var txt=""; 16     var person={fname:"Bill",lname:"Gates",age:56}; 17     for (x in person){ 18  txt=txt + person[x]+" "; 19  } 20  document.getElementById("demo").innerHTML=txt; 21 } 22 </script>
23     
24 </body>
25 </html>