JavaScript for循环

2018-09-29 03:54:11来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

JavaScript for 循环


 循环可以将代码块执行指定的次数。

 JavaScript 支持不同类型的循环:

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

 for循环的语法:

  for(语句1;语句2;语句3){

    被执行的代码块

  }

 语句1(代码块)开始前执行

 语句2  定义运行循环(代码块)的条件

 语句3  在循环(代码块)以被执行之后执行

例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
<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>
<body>

</body>
<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>
<body>

</body>
<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不仅可以遍历对象的属性,还可以遍历数组。

 

 -------------------- end ---------------------

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:脚手架vue-cli系列三:vue-cli工程webpack的作用和特点

下一篇:前端 css+js实现返回顶部功能