JavaScript基础语法--循环

最新推荐文章于 2022-06-28 19:35:27 发布

柠檬味D

最新推荐文章于 2022-06-28 19:35:27 发布

阅读量179

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_50909662/article/details/120442205

版权

-- 循环结构，就是根据某些给出的条件，重复的执行同一段代码
-- 循环必须要有某些固定的内容组成

初始化
条件判断
要执行的代码
自身改

while循环

语法：while (条件) { 满足条件就执行 }
注意：

此语句是先判断条件，再决定是否执行语句或程序块
当条件为true时，执行循环体的语句或程序块，反之不执行循环体
在循环体中要有改变条件的语句，否则会成为死循环

// 1. 初始化条件
var num = 0
// 2. 条件判断
while (num < 10) {
    // 3. 要执行的代码
    console.log('当前的 num 的值是 ' + num)
    // 4. 自身改变
    num = num + 1
  }

案例：倒序输出 5 4 3 2 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒序输出 5 4 3 2 1</title>
</head>
<body>
    <script>
        var num = 5
        while (num > 0) {
            console.log(num)
            num--
        }
    </script>
</body>
</html>

do-while循环

语法： do { 要执行的代码 } while (条件)
do-while与while的区别

while循环会先进行条件判断，满足就执行，不满足就不执行了
do-while循环不管条件，先执行一回，然后在开始进行条件判断

var num = 10
    do {
        console.log('我执行了一次')
        num = num + 1
      } while (num < 10)

案例：正序输出1-10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正序输出</title>
</head>
<body>
    <script>
        var num = 1
        do {
            console.log(num)
            num++
        } while (num <= 10)
    </script>
</body>
</html>

for循环

语法： for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始化，条件判断，自身改变，写在了一起
for (var i = 1; i <= 10; i++) {
    // 这里写的是要执行的代码
    console.log(i)
}
// 控制台会依次输出 1 ~ 10

执行顺序

案例一：1+2+3+4+...100的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1+2+3+4+...100的和</title>
</head>
<body>
    <script>
        var sum = 0
        for (var i = 1; i <= 100; i++) {
            sum += i
        }
        console.log(sum)
    </script>
</body>
</html>

案例二：打印出1000-2000年中所有的闰年，并以每行四个数的形式输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印出1000-2000年中所有的闰年，并以每行四个数的形式输出</title>
</head>
<body>
  <script>
        var count = 0
        for (var year = 1000; year <= 2000; year++) {
            if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
                document.write(year + '\t')
                count++
            }
            if (count === 4) {
                document.write('<br>')
                count = 0
            }
        }
    </script>
</body>
</html>

双重for循环

for循环可以重复执行一个操作，当然也可以重复执行另一个循环，即for循环里面嵌套for循环
循环的嵌套：外层循环循环一次，内层就要循环完
代表：九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
</head>
<body>
    <script>
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                document.write(i + 'x' + j + '=' + i * j + '&emsp;')
            }
            document.write('<br>')
        }
    </script>
</body>
</html>

终止循环 break

在循环没有进行完毕的时候，只要设置的条件满足，可提前终止循环
比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情
要终止循环，直接使用break关键字

for (var i = 1; i <= 5; i++) {
    // 没循环一次，吃一个包子
    console.log('我吃了一个包子')
    // 当 i 的值为 3 的时候，条件为 true，执行 {} 里面的代码终止循环
    // 循环就不会继续向下执行了，也就没有 4 和 5 了
    if (i === 3) {
      break
    }
}

案例：打印100内能被4整除的前5个数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印100内能被4整除的前5个数</title>
</head>
<body>
    <script>
        var count = 0
        for (var i = 1; i <= 100; i++) {
            if (i % 4 == 0) {
                console.log(i)
                count++
            }
            if (count == 5) {
                break
            }
        }
    </script>
</body>
</html>

结束本次循环 continue

在循环中，把循环的本次跳过去，继续执行后续的循环
比如：吃五个包子，吃第三个的时候，包子掉地下了不能吃了，跳过第三个，继续吃第四个和第五个包子
跳过本次循环，使用continue关键字

for (var i = 1; i <= 5; i++) {
    // 当 i 的值为 3 的时候，执行 {} 里面的代码
    // {} 里面有 continue，那么本次循环后面的代码就都不执行了
    // 自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了
    if (i === 3) {
      console.log('这个是第三个包子，掉地下了，我不吃了')
      continue
    }
    console.log('我吃了一个包子')
}

案例：打印1-10内,除了5的所有数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印1-10内,除了5的所有数</title>
</head>
<body>
    <script>
        for (var i = 1; i <= 10; i++) {
            if (i == 5) {
                continue
            }
            console.log(i)
        }
    </script>
</body>
</html>

柠檬味D

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript基础语法--循环

-- 循环结构，就是根据某些给出的条件，重复的执行同一段代码-- 循环必须要有某些固定的内容组成初始化条件判断要执行的代码自身改目录while循环do-while循环for循环双重for循环终止循环break结束本次循环continuewhile循环语法：while(条件){满足条件就执行} 注意：此语句是先判断条件，再决定是否执行语句或程序块当条件为true时，执行循环体的语句或程序块，反之不执行循环...
复制链接

扫一扫