JS循环详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46758732/article/details/119120446

JS 循环

for
For/In 循环
While 循环
Do/While 循环
Break 和 Continue

for

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var cars = ["BMW", "Volvo", "porsche", "Ford"];
var i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

在这里插入图片描述

For/In 循环

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
</head>
<body>
<p id="demo"></p>
<script>
    var txt = "";
    var person = {fname:"Tom", lname:"Gates", age:10};
    var x;
    for (x in person) {
        txt += person[x] + " ";
    }
    document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

在这里插入图片描述

While 循环

只要条件为 true，循环能够一直执行代码块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
</head>
<body>
<p id="demo"></p>
<script>
   var text = "";
   var i = 0;
   while (i < 5){
       text += "<br>数字是 " + i;
       i++;
   }
   document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

在这里插入图片描述

Do/While 循环

do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript do ... while</h2>

<p id="demo"></p>

<script>
var text = ""
var i = 0;

do {
  text += "<br>数字是 " + i;
  i++;
}
while (i < 10);  

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>