【JavaScript】五、流程控制语句

-代号9527

于 2025-03-21 01:04:44 发布

阅读量1.1k

点赞数 27

分类专栏：前端基础文章标签： javascript 开发语言 ecmascript

年轻人不要Copy------CSDN@-代号9527

本文链接：https://blog.csdn.net/llg___/article/details/146356706

版权

前端基础专栏收录该内容

32 篇文章

订阅专栏

文章目录

1、分支语句
2、断点调试
3、循环语句

流程控制语句：

1、分支语句

1.1 语法1：单分支IF

在这里插入图片描述

<body>
  <script>
    if (1 === 1) {
      console.log("条件成立，执行！")
    }
  </script>
</body>

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型，除了0和空字符串''，所有的数字都是true

if (999) {		//true
  console.log("条件成立，执行！")
}

if ('') {		//false
  console.log("条件成立，执行！")
}

1.2 语法2：双分支IF

在这里插入图片描述

<body>
  <script>
    let uname = prompt('input username:')
    let password = prompt('input password:')
    if (uname === 'root' && password === '123') {
      alert("登陆成功！")
    } else {
      alert("账户或密码错误！")
    }
  </script>
</body>

1.3 语法3：多分枝IF

在这里插入图片描述

1.4 语法4：三元运算符

在这里插入图片描述

常用于赋值：

let sum = 3 > 5 ? 3 : 5

练习1：用户输入2个数，控制台输出最大的值

<body>
  <script>
    let num1 = +prompt('input the first num: ')
    let num2 = +prompt('input the second num: ')
    alert(num1 > num2 ? num1 : num2)
  </script>
</body>

练习2：实现用户输入1个数，如果数字小于10，则前面进行补0，比如 09、03

<body>
  <script>
    let num = +prompt('input a num: ')
    alert(num < 10 ? '0' + num : num)
  </script>
</body>

也可以用类型隐式转换的特点，写成这样：

<body>
  <script>
    let num = prompt('input a num: ')
    alert(num < 10 ? 0 + num : num)
  </script>
</body>

在这里插入图片描述

1.5 语法5：switch语句

找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有全等 === 的则执行default里的代码
switch case一般需要配合break关键字来退出switch，没有break会造成case穿透
和if-else相比，switch更适合于等值判断，而不是区间判断

在这里插入图片描述

练习：用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果

<body>
  <script>
    let num1 = +prompt('input num1: ')
    let num2 = +prompt('input num2: ')
    let operation = prompt('input operation: + - * /')
    switch (operation) {
      case '+':
        alert(`相加结果是${num1 + num2}`)		// 顺手复习下模板字符串
        break
      case '-':
        alert(`相减结果是${num1 - num2}`)
        break
      case '*':
        alert(`相乘结果是${num1 * num2}`)
        break
      case '/':
        alert(`相除结果是${num1 / num2}`)
        break
      default:
        alert('运算符错误！')
    }
  </script>
</body>

2、断点调试

F12打开开发者工具，在source一栏，选择代码文件，点击对应的行号打断点，程序执行到断点处会暂停下来，点对应的调试按钮，debug代码

在这里插入图片描述

3、循环语句

3.1 while循环

跟if语句很像，都要满足小括号里的条件为true才会进入循环体执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

在这里插入图片描述

在这里插入图片描述
计算1-100之间的所有偶数和

<body>
  <script>
    let i = 1
    let sum = 0
    while (i <= 100) {
      if (i % 2 === 0) {
        sum = sum + i
      }
      i++
    }
    alert(`结果是${sum}`)
  </script>
</body>

</html>

在这里插入图片描述

3.2 do-while循环

上来先执行一次循环体，然后判断条件，如果成立，则继续执行
一直循环，直到条件不成立

do
  statement
while (condition);

和while循环的区别是：do-while上来至少会执行一次循环体

var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

3.3 循环退出

break：退出整个循环
continue：从continue处结束本次循环体的执行（本次循环，continue下的代码不再执行），直接进行下次循环

区别详解：

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

练习1： 页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框

<body>
  <script>
    let result
    while (true) {
      result = prompt('do you love me?')
      if (result === 'yes') {
        break
      }
    }
  </script>
</body>

练习2： 用户A有10000元，可以选择存钱、取钱、查看余额和退出功能，如果不是退出，则一直给弹窗

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let money = 10000
    let result
    while (true) {
      result = prompt(`
      please select: 
        1、存钱
        2、取钱
        3、查看余额
        4、退出
      `)
      if (result === '4') {
        break
      }
      switch (result) {
        case '1':
          let input = +prompt('输入存款金额')
          money = money + input
          break
        case '2':
          let output = +prompt('输入存款金额')
          money > output ? money = money - output : alert('余额不足')
          break
        case '3':
          alert(`余额为：${money}`)
          break
        default:
          alert('错误的输入')
      }

    }
  </script>
</body>

</html>

在这里插入图片描述

3.3 for循环

相比while，把声明起始值、循环条件、变化值写到一起，一目了然

在这里插入图片描述

举例：遍历数组

<body>
  <script>
    let array = ['a', 'b', 'c', 'd']
    for (let i = 0; i < array.length; i++) {
      document.write(array[i])
    }
  </script>
</body>

// 死循环
while (true) {
}

for (;;) {
}

3.5 for循环的嵌套

内层循环全部执行完成，算外层循环执行了一次循环
把内层循环的所有代码，看成是外层循环的循环体

在这里插入图片描述

练习一：打印一个m * n的星星列阵

<body>
  <script>
    let row = +prompt('打印行数：')
    let col = +prompt('打印列数：')
    for (let i = 1; i <= row; i++) {
      for (let j = 1; j <= col; j++) {
        document.write('✨')
      }
      document.write('<br>')
    }
  </script>
</body>

测试下3行10列：

在这里插入图片描述

练习二：打印倒三角星星

在这里插入图片描述

<body>
  <script>
    let row = +prompt('打印行数：')
    for (let i = 1; i <= row; i++) {
      // 第一行一个，第二个二个，第i行i个
      for (let j = 1; j <= i; j++) {
        document.write('✨')
      }
      document.write('<br>')
    }
  </script>
</body>

测试输入9:

在这里插入图片描述

练习三：打印九九乘法表

在这里插入图片描述
和倒三角很相似：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      display: inline-block;
      width: 90px;
      padding: 5px 10px;
      border: 2px solid black;
      margin: 2px;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px yellowgreen;
    }
  </style>
</head>

<body>
  <script>
    for (let i = 1; i <= 9; i++) {
      // 第一行一个，第二个二个，第i行i个
      for (let j = 1; j <= i; j++) {
        document.write(`<span>${j} x ${i} = ${i * j} </span>`)
        document.write(' ')
      }
      document.write('<br>')
    }
  </script>
</body>

</html>