二、JS 基础知识之流程控制（4）--- 循环语句详解

J_Tiffany
68 阅读2分钟

断点调试

断点调试 可以帮助我们更快的找到 bug ，也能帮助我们更好的理解代码运行

在代码上加的标记称为 断点 ，当程序运行到带有标记的代码语句时会暂停

在浏览器打开 调试界面 ，按 F12 打开开发者工具（这里用的是谷歌浏览器），点到 源代码（ 有的电脑是 sources） 一栏，在右边选择要调试的代码文件，然后在需要暂停的语句前打上 断点 ，这里选择了第 14 行：

image.png

当程序运行到断点时，会暂停，鼠标放到变量上，会显示变量的值，如下图：按 F11 或 右边向下的箭头（红框中），就会执行下一步

image.png

while 循环

循环执行某段代码，语法：

image.png

while 循环 与分支语句有点相似，都是要满足小括号内的条件为 true ,才会去执行循环体代码

while 大括号里的代码执行完毕之后不会跳出，而是继续回到小括号里面再次判断条件是否满足，如果满足循环条件，又会去执行循环体，直到循环条件不满足，就会自动跳出循环体

循环的本质 是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程

循环需要具备三要素：

image.png

  <body>
    <script>
      let time = 5
      while (time <= 10) {
        document.write(`${time} <br>`)
        time++
      }
    </script>
  </body>

image.png

示例：计算 1 - 100 的总和，并输出结果

  <body>
    <script>
      let num = 1
      let sum = 0
      while (num <= 100) {
        sum += num
        num++
      }
      console.log(`1 - 100 的总和为：${sum}`);
    </script>
  </body>

image.png

实现思路：声明变量 sum ，把每次累加的和赋值给 sum

示例：计算 1 - 100 之间的所有偶数和

  <body>
    <script>
      let num = 1
      let sum = 0
      while (num <= 100) {
        if (num % 2 === 0) {
          sum += num
        }
        num++
      }
      console.log(`1 - 100 之间的所有偶数和为：${sum}`)
    </script>
  </body>

image.png

实现思路：在求和的基础上，通过 if 语句把 num 里的偶数筛选出来，将筛选出来的数据累加到 sum

循环退出

  • continue 是结束本次循环，继续下次循环；
  • break 是直接跳出所在的循环

示例：计算 1-10 内所有奇数的和

  <body>
    <script>
      let num = 1
      let sum = 0
      while (num <= 10) {
        if (num % 2 === 0) {
          num++
          continue
        }
        sum += num
        console.log(num);
        num++
      }

      console.log(`1 - 10 之间的所有奇数和为：${sum}`)
    </script>
  </body>

image.png

示例：打印前 5 个数：

  <body>
    <script>
      let num = 1
      while (num <= 10) {
        if (num === 6) {
          num++
          break
        }
        console.log(num);
        num++
      }
    </script>
  </body>

image.png

示例：做一个简易版的取款功能，用户可以存款、取款、查看余额、退出

<!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>Document</title>
    <style></style>
  </head>
  <body>
    <script>
      let money = +prompt('请输入初始金额：')

      while (true) {
        let strNum = prompt(`请选择要进行的操作（输入编号即可）：
        1. 存款
        2. 查询余额
        3. 取款
        4. 退出
        `)

        switch (strNum) {
          case '1':
            let save = +prompt('请输入存款金额：')
            money += save
            break
          case '2':
            alert(`您的余额：${money}`)
            break
          case '3':
            let stu = +prompt('请输入取款金额：')
            money -= stu
            break
        }

        if (strNum === '4') {
          break
        }
      }
    </script>
  </body>
</html>

实现思路：

  • 准备一个初始值，需要先预存金额
  • 循环条件永远为 true ，将提示用户需要操作的信息写在循环体内，因为它需要反复输入，只有在操作数为 "4" 的情况下，才能可以结束循环，不再弹出提示框，这里需要单独进行判断
  • 由于输入的操作不一样就会有对应的程序执行，因此选用 switch 来执行不同的操作： 取钱减法运算、存钱加法运算、查看余额直接显示

for 循环

for 循环也是重复执行代码，把声明起始值、循环条件、变化值写到一起，看起来更清晰

语法：

image.png

for 循环练习

练习1：求 1-100 之间所有偶数的和

  <body>
    <script>
      let sum = 0
      for (let i = 0; i <= 100; i++) {
        if (i % 2 === 0) {
          sum += i
        }
      }
      console.log('1-100 的和为：' + sum)
    </script>
  </body>

image.png

练习2：在浏览器页面打印一行 “ ♥ ”

    <script>
      for (let i = 1; i <= 6; i++) {
        document.write('♥')
      }
    </script>

image.png

练习3：将数组里的颜色依次打印出来

    <script>
      let arr = ['red', 'yellow', ' blue', 'green', 'pink']
      for (let color = 0; color < arr.length; color++) {
        document.write(arr[color])
        document.write(`<br>`)
      }
    </script>

image.png

for 循环嵌套

for 循环嵌套，就是一个循环里面再嵌套一个循环，一般在 for 循环里用的最多

练习1：打印 5 行 5 列 的 ♥

 <script>
      for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
          document.write('♥')
        }
        document.write(`<br>`)
      }
    </script>

image.png

练习2：利用 for 双循环打印三角形

    <script>
      for (let i = 0; i < 5; i++) {
        for (let j = 0; j <= i; j++) {
          document.write('♥')
        }
        document.write(`<br>`)
      }
    </script>

image.png

练习3：打印九九乘法表

<!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>Document</title>
    <style>
      span {
        display: inline-block;
        width: 92px;
        height: 30px;
        background-color: rgb(252, 162, 177);
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        margin-bottom: 5px;
      }
    </style>
  </head>
  <body>
    <script>
      for (let i = 1; i < 10; i++) {
        for (let j = 1; j <= i; j++) {
          document.write(`<span>${j} * ${i} = ${j * i}</span>&nbsp;&nbsp;`)
        }
        document.write(`<br>`)
      }
    </script>
  </body>
</html>

image.png

avatar
文章
阅读
粉丝