JavaScript的循环语句

时间:2023-03-08 16:28:58

JavaScript的循环语句

1.JavaScript的循环语句

(1)for循环语句 - 循环代码块一定的次数;

(2)for/in循环语句 - 循环遍历对象的属性;

(3)while循环语句 - 指定的条件为true时,循环指定的代码;

(4)do/while循环语句 - 当指定的条件为true时,循环指定的代码。

2.for循环语句

(1)for循环语句的语法

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

语句1:在循环开始前执行;可以省略,也可以初始化多个值。

语句2:定义循环的条件;可以省略,默认初始值为true,当省略此项时,如果在代码块中没有break则该循环无法停下来。

语句3:在循环被执行后执行,当循环代码块中有响应的代码时,可以省略。

(2)示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for循环语句</title>
</head>
<body>
<p>for循环的简单使用</p>
<p id="demo"></p>
<button type="button" onclick="test()">点我开始循环</button>
<script>
function test(){
    var a = "";
    for(var i = 1;i <= 5;i++){
        a = a + "第" + i + "次循环;" + "<br/>"
    }
    document.getElementById("demo").innerHTML = a;
}
</script>
</body>
</html>

3.for/in循环语句

  用于遍历对象的属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for/in - 遍历对象中的属性</title>
</head>
<body>
<p>遍历对象属性</p>
<p id="demo"></p>
<button type="button" onclick="test()">点我遍历对象属性</button>
<script>
    var stu = {
            name : "架构师",
            age : 27,
            sex : "男"
    };
    function test(){
        var a;
        var text = "";
        for(a in stu){
            text = text + stu[a] + "<br/>"
        }
        document.getElementById("demo").innerHTML = text;
    }
</script>
</body>
</html>

4.while循环语句

  while循环语句在指定条件为true时,将循环执行代码块。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while循环</title>
</head>
<body>
<p>while循环</p>
<p id="demo"></p>
<button type="button" onclick="test()">点击开始while循环</button>
<script>
    var count = 0;
    var text ="";
    function test(){
        while(count<5){
            text = text + "值为:" + count + "<br/>";
            count = count + 1;
        }
        document.getElementById("demo").innerHTML = text;
    }
</script>
</body>
</html>

5.do/while循环语句

  do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。

do
{
  //需要执行的代码
}
while (条件);

  示例:

<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮,只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5)
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

6.break语句

  break语句用于跳出循环,当使用break语句跳出循环后,将会执行该循环之后的代码。

//break语句的使用
for(int i=0;i<=10;i++){
    if(i==5){
        //当i=5时,跳出循环
        break;
    }
}
//跳出循环后将执行循环后的代码

7.continue语句

  continue语句用于中断循环中的迭代,跳过指定条件的迭代,然后继续循环中的下一个迭代。

for(int i=0;i<=10;i++){
    if(i==5){
        //跳过此次迭代,continue后的语句不执行
        continue;
    }
    x = x + i;
}