7.JS里表达式,if条件判断,三元运算符,switch语句,断点调试

news2024/12/26 0:05:02

表达式和语句的区别

表达式就是可以被求值的代码比如什么a = 1
语句就是一段可以执行的代码比如什么if else
直接给B站的黑马程序员的老师引流一波总结的真好
在这里插入图片描述

分支语句

在这里插入图片描述

就是基本上所有的语言都会有的if else 语句就是满足不同的条件执行不同的代码，让计算机有条件判断的能力。
注意在if的括号里面除了数字0之外所有的数字直接写的话都是true下面直接看代码把

<!DOCTYPE html>
<html>
<head>
  <title>条件判断示例</title>
</head>
<body>
  <script>
    let age = Number(prompt("请输入您的年龄："))
    if (age > 18) {
        alert('你成年了')
    } else if (age === 18) {  // 注意是===
        alert('你刚刚满18岁')
    } else {
        alert('你没有成年')
    }
    // if 后面的括号里除了空字符串和数字0之外其他都是true
    if (0){
      console.log('0是true')
    } else {
      console.log('0不是true')
    }
    
    if (''){
      console.log('空字符串是true')
    } else {
      console.log('空字符串不是true')
    }
  </script>
</body>
</html>

运行结果
这里还会看见弹窗让输入年龄
在这里插入图片描述

三元运算符

一些简单的条件判断使用三元运算符可以增加代码的可读性，但是复杂的条件判断一定要杜绝使用三元运算符！！！！一般在开发过程中都是为了取值的，反我是这样
上代码：

<!DOCTYPE html>
<html>
<head>
  <title>条件判断示例</title>
</head>
<body>
  <script>
    console.log(1>5 ? '1大于5' : '1小于5')
    let num = 10 > 5 ? 10 : 5  // 开发过程中一般都是用于取值
    console.log(num)
  </script>
</body>
</html>

结果

在这里插入图片描述

switch语句

主要用于各种分支判断，主要用于那种等值判断其实开发过程中不推荐使用switch语句

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>switch 语句示例</title>
</head>
<body>
  <script>
    let userInput = prompt("请输入一个数字");

    if (userInput !== null) {
      userInput = parseInt(userInput);
      
      switch (userInput) {
        case 1:
          alert("您输入的数字是 1");
          break;
        case 2:
          alert("您输入的数字是 2");
          break;
        case 3:
          alert("您输入的数字是 3");
          break;
        default:
          alert("您输入的数字不在范围内");
      }
    } else {
      alert("您取消了输入");
    }
  </script>
</body>
</html>

在这个示例中，页面加载后会弹出一个 prompt 输入框，用户可以在输入框中输入数字。根据用户输入的数字，使用 switch 语句进行判断，并弹出不同的提示框信息。如果用户点击了 prompt 的取消按钮，则会提示用户取消了输入。

断点调试

断点调试是开发过程中非常重要的一个环节
首先写一个小案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>断点调试</title>
</head>
<body>
  <script>
    let num = 10
    num = num + 1
    console.log(num)
  </script>
</body>
</html>