一、if else

定义：根据条件表达式的结果执行不同的代码块

特点：

  • 支持单分支、双分支和多分支结构
  • 条件表达式会被隐式转换为布尔值（Truthy/Falsy）
  • 可嵌套使用处理复杂逻辑

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-1.JavaScript运算符-if else.html

<!DOCTYPE html>
<html>
    <script>
        let a = 1
        let b = 2
        let c = "xx"
        let d = "yy"
        if (a > b) {
            alert("a > b")
        } else if (a == b) {
            alert("a == b")
        } else {
            alert("a < b")
        }
        // 三元运算符
        // 格式：判断语句?xxx:xxx
        // 执行顺序：如果成立则执行?后面的内容；如果不成立则执行:后面的内容
        a>b?console.log("a大于b"):console.log("a大于b")
    </script>
</html>

2、双击【7-1.JavaScript运算符-if else.html】后，输出a<b结果

image-20250520125022062

二、switch

定义：基于相同变量的不同取值执行对应代码块

特点：

  • 使用严格相等（===）进行匹配
  • 必须配合break防止穿透执行
  • default处理未匹配情况

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-2.JavaScript运算符-switch.html

<!DOCTYPE html>
<html>
    <script>
        let a = 2
        let b = 2
        let c = "xx"
        let d = "yy"
        switch (a) {
            case 1:
                alert("a等于1")
                break;
            case 2:
                alert("a等于2")
                break;
            case 3:
                alert("a等于3")
                break;
            default:
                alert("a不等于1、2和3")
                break;
        }
    </script>
</html>

2、双击【7-2.JavaScript运算符-switch.html】后，输出a等于2结果

image-20250520125838238

三、for/forEach

3.1 for循环

定义：已知迭代次数的循环控制

特点：

  • 包含初始化、条件判断、迭代器三部分
  • 可使用break和continue控制流程
  • 支持多层嵌套

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-3.JavaScript运算符-for.html

<!DOCTYPE html>
<html>
<body>
    <script>
        let a = 1
        for (let index = 0; index < 101; index++) {
            console.log("当前数",index);
        }

        let myArray = [1,2,3,4,5]
        for (let index = 0; index < myArray.length; index++) {
            console.log("当前数",index);
        }

        // 打印对象数据
        let myObject = {
            name: "zq",
            age: 18,
            QQ: "12345678"
        }

        // 第一种方法：for in
        for (let key in myObject) {
            console.log(myObject[key])
        }

        // 第二种方法
        for (let [key,value] of Object.entries(myObject)) {
            console.log(key + ":" + value)
        }
    </script>
</body>
</html>

2、双击【7-3.JavaScript运算符-for.html】后按F12，点击【控制台】可以展示相关输出结果

image-20250520143213042

3.2 forEach循环

定义：数组遍历的迭代方法

特点：

  • 更简洁的语法
  • 无法使用break和continue
  • 回调函数参数：元素、索引、数组本身

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-4.JavaScript运算符-forEach.html

<!DOCTYPE html>
<html>
<body>
    <script>
        // forEach一般常用于数组
        let myArray2 = [1,2,3,4,5,6,7,8]
        myArray2.forEach(function(value){
            console.log(value)
        })

    </script>
</body>
</html>

2、双击【7-4.JavaScript运算符-forEach.html】后按F12，点击【控制台】可以展示相关输出结果

image-20250520143720188

四、while

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-5.JavaScript运算符-while.html

<!DOCTYPE html>
<html>
<body>
    <script>
        // while循环
        let a = 1;
        while (a < 101) {
            // 只要是a<101，执行下面语句
            console.log("当前数:",a)
            a++
        }
    </script>
</body>
</html>

2、双击【7-5.JavaScript运算符-while.html】后按F12，点击【控制台】可以展示相关输出结果，会输出1到100

五、continue/break

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为7-6.JavaScript运算符-continue-break.html

<!DOCTYPE html>
<html>
<body>
    <script>
        // break示例
        for (let i = 0; i < 10; i++) {
            if (i === 5) break;
            console.log(i);  // 0-4
        }

        // continue示例
        for (let i = 0; i < 5; i++) {
            if (i % 2 === 0) continue;
            console.log(i);  // 1,3
        }

        // 标签语句（慎用）
        outer: for (let i = 1; i <= 3; i++) {
            inner: for (let j = 1; j <= 3; j++) {
                if (i * j === 4) break outer;
                console.log(i, j);
            }
        }
    </script>
</body>
</html>

2、双击【7-6.JavaScript运算符-continue-break.html】后按F12，点击【控制台】可以展示相关输出结果

image-20250520143854268