JavaScript运算符与流程控制详解

一、运算符

• 赋值运算符

• 一元运算符

• 比较运算符

• 逻辑运算符

• 运算符优先级

1.算术运算符

数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

注意：在计算失败时，显示的结果是 NaN （not a number）

复制代码

// 算术运算符
console.log(1 + 2 * 3 / 2) //  4 
let num = 10
console.log(num + 10)  // 20
console.log(num + num)  // 20

// 1. 取模(取余数)  使用场景：  用来判断某个数是否能够被整除
console.log(4 % 2) //  0  
console.log(6 % 3) //  0
console.log(5 % 3) //  2
console.log(3 % 5) //  3

// 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
console.log('pink老师' - 2)
console.log('pink老师' * 2)
console.log('pink老师' + 2)   // pink老师2

2. 赋值运算符

赋值运算符：对变量进行赋值的运算符

= 将等号右边的值赋予给左边, 要求左边必须是一个容器

复制代码

<script>
let num = 1
// num = num + 1
// 采取赋值运算符
// num += 1
num += 3
console.log(num)
</script>

3.一元运算符

目标：能够使用一元运算符做自增运算众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

二元运算符：

例：

一元运算符：

例：正负号

问题：我们以前让一个变量每次+1 ，以前我们做的呢？

我们可以有更简便的写法了~~~

自增：

符号：++

作用：让变量的值 +1

自减：

符号：--

作用：让变量的值 -1

使用场景：经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了

⑴自增运算符的用法：

注意：

前置自增和后置自增独立使用时二者并没有差别！

一般开发中我们都是独立使用

后面 i++ 后置自增会使用相对较多,并且都是单独使用

4.比较运算符

⑴.比较运算符列表

运算符	名称	作用
`>`	大于	判断左边是否大于右边
`<`	小于	判断左边是否小于右边
`>=`	大于等于	判断左边是否大于或等于右边
`<=`	小于等于	判断左边是否小于或等于右边
`==`	相等	判断左右两边的值是否相等（忽略类型）
`===`	全等	判断左右两边的值和类型是否都相等
`!==`	不全等	判断左右两边是否不全等

⑵关键区别

= vs == vs ===

=：赋值运算符，将右侧的值赋给左侧变量。

==：值相等比较，忽略数据类型（例如 5 == '5' 返回 true）。

===：严格相等比较，要求值和类型都相同（例如 5 === '5' 返回 false）。

**开发建议：**优先使用 === 和 !==，避免隐式类型转换带来的问题。

⑶注意事项

①字符串比较

基于字符的 ASCII 码逐位比较（如 '2' > '15' 返回 true，因为 '2' 的 ASCII 码大于 '1'）。

从左到右依次比较，若第一位相同则比较第二位，依此类推。

②NaN 的特殊性

NaN 不等于任何值，包括自身（NaN == NaN 或 NaN === NaN 均返回 false）。

③小数精度问题

避免直接比较小数（如 0.1 + 0.2 === 0.3 返回 false），因浮点数精度误差可能导致意外结果。

④隐式类型转换

不同类型比较时，JavaScript 会尝试将值转换为 number 类型后再比较（如 '5' > 4 转换为 5 > 4，返回 true）。

复制代码

<!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>
</head>

<body>
  <script>

    console.log(3 > 5)
    console.log(3 >= 3)
    console.log(2 == 2)
    // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
    console.log(2 == '2')  // true
    // console.log(undefined === null)
    // === 全等 判断 值 和 数据类型都一样才行
    // 以后判断是否相等 请用 ===  
    console.log(2 === '2')
    console.log(NaN === NaN) // NaN 不等于任何人，包括他自己
    console.log(2 !== '2')  // true  
    console.log(2 != '2') // false 
    console.log('-------------------------')
    console.log('a' < 'b') // true
    console.log('aa' < 'ab') // true
    console.log('aa' < 'aac') // true
    console.log('-------------------------')
  </script>
</body>

</html>

5.逻辑运算符

符号	名称	日常读法	特点	口诀
`&&`	逻辑与	并且	两边都为 `true` 时结果为 `true`	一假则假
`		`	逻辑或	或者
`!`	逻辑非	取反	将 `true` 转为 `false`，`false` 转为 `true`	真变假，假变真

二、分支语句

1.if 语句

单分支语法：

复制代码

if (条件) {  
    // 条件为 true 时执行的代码  
}

双分支语法：

复制代码

if (条件) {  
    // 条件为 true 时执行  
} else {  
    // 条件为 false 时执行  
}

案例：用户登录验证：

复制代码

let username = prompt("请输入用户名");  
let password = prompt("请输入密码");  
if (username === "pink" && password === "123456") {  
    alert("登录成功！");  
} else {  
    alert("登录失败！");  
}

多分支语法：

复制代码

if (条件1) {  
    // 代码1  
} else if (条件2) {  
    // 代码2  
} else {  
    // 默认代码  
}

案例：成绩等级划分：

复制代码

let score = prompt("请输入成绩");  
if (score >= 90) {  
    alert("优秀");  
} else if (score >= 70) {  
    alert("良好");  
} else if (score >= 60) {  
    alert("及格");  
} else {  
    alert("不及格");  
}

2.三元运算符

**语法：**条件 ? 满足时执行 : 不满足时执行

特点：简化双分支逻辑，常用于赋值。

案例：判断最大值：

复制代码

let a = prompt("请输入第一个数");  
let b = prompt("请输入第二个数");  
let max = a > b ? a : b;  
console.log("最大值是：" + max);

3.switch 语句

语法：

复制代码

switch (表达式) {  
    case 值1:  
        代码1;  
        break;  
    case 值2:  
        代码2;  
        break;  
    default:  
        默认代码;  
}

特点：
- 适用于等值比较，不适用于区间判断。
- 必须配合 break 防止"case穿透"（未加 break 会继续执行下一个 case）。
案例：简单计算器：
<!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 num1 = +prompt("请输入第一个数字"); let num2 = +prompt("请输入第二个数字"); let operator = prompt("请输入运算符（+ - * /）"); switch (operator) { case "+": alert(num1 + num2); break; case "-": alert(num1 - num2); break; case "*": alert(num1 * num2); break; case "/": alert(num1 / num2); break; default: alert("运算符输入错误！"); } </script> </body> </html>

三、循环语句

1.while 循环

语法：

复制代码

while (循环条件) {  
    // 循环体  
}

循环控制

break：立即退出整个循环。

while (true) {
let input = prompt("你爱我吗？");
if (input === "爱") break; // 输入"爱"时退出循环
}

continue：跳过本次循环，进入下一次循环。

复制代码

let i = 1;  
while (i <= 10) {  
    if (i % 2 === 0) {  
        i++;  
        continue;  // 跳过偶数  
    }  
    console.log(i);  
    i++;  
}

四、调试技巧

断点调试

步骤：

按 F12 打开浏览器开发者工具。

切换到 Sources 标签页。

选择代码文件并设置断点（点击行号）。

作用：

观察代码执行流程，排查逻辑错误。

1.切换到 Sources 标签页。

复制代码

<!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>
</head>

<body>
  <script>
    let num = 10
    num = num + 1
    console.log(num)
  </script>
</body>

</html>

五、综合案例

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>Document</title>
</head>

<body>
  <script>
    // 1. 用户输入
    let year = +prompt('请输入年份')
    // 2. 判断输出
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      alert(`${year}年是闰年`)
    } else {
      alert(`${year}年是平年`)
    }
  </script>
</body>

</html>

2.数字补0案例

需求：用户输入1个数，如果数字小于10，则前面进行补0，比如 09 03 等

分析： ①：为后期页面显示时间做铺垫 ②：利用三元运算符补 0 计算

复制代码

<!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>
</head>

<body>
  <script>
  

    // 1. 用户输入 
    let num = prompt('请您输入一个数字:')
    // 2. 判断输出- 小于10才补0
    // num = num < 10 ? 0 + num : num
    num = num >= 10 ? num : 0 + num
    alert(num)

  </script>
</body>

</html>

3.简易ATM取款机

复制代码

<!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 balance = 1000;  // 初始余额  
        while (true) {
            let choice = prompt(`请选择操作：  
1. 取款  
2. 存款  
3. 查看余额  
4. 退出`);

            switch (choice) {
                case "1":
                    let withdraw = +prompt("请输入取款金额");
                    balance -= withdraw;
                    alert(`剩余余额：${balance}`);
                    break;
                case "2":
                    let deposit = +prompt("请输入存款金额");
                    balance += deposit;
                    alert(`剩余余额：${balance}`);
                    break;
                case "3":
                    alert(`当前余额：${balance}`);
                    break;
                case "4":
                    alert("感谢使用！");
                    break;
                default:
                    alert("输入错误！");
            }
            if (choice === "4") break;  // 退出循环  
        }  
    </script>
</body>

</html>

六、for循环

1. for循环基本语法

**作用：**重复执行代码块。

语法结构：

复制代码

for (变量起始值; 终止条件; 变量变化量) {
  // 循环体
}

2. 退出循环控制

continue：跳过本次循环，继续下一次循环。

复制代码

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue; // 跳过i=3时的循环体
  console.log(i); // 输出1,2,4,5
}

break：终止整个循环。

复制代码

for (let i = 1; i <= 5; i++) {
  if (i === 3) break; // 循环终止
  console.log(i); // 输出1,2
}

无限循环 （需配合break使用）：

复制代码

for (;;) {
  // 循环体
  if (条件) break;
}

3.练习

⑴打印5行5列的星星

**需求：**页面中打印出5行5列的星星

分析：

①：利用双重for循环来做

②：外层循环控制打印行，内层循环控制每行打印几个（列）

复制代码

<!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>
        // 外层循环打印行数
        for (let i = 1; i <= 5; i++) {
            // 里层循环打印几个星星
            for (let j = 1; j <= 5; j++) {
                document.write('☆')
            }
            // 进行换行显示
            document.write('<br>')
        }
    </script>

</body>

</html>

升级版本： 用户输入行数和列数，打印对应的星星！

复制代码

<!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>
</head>

<body>
  <script>
    // // 外层循环打印行数
    // for (let i = 1; i <= 5; i++) {
    //   // 里层循环打印几个星星
    //   for (let j = 1; j <= 5; j++) {
    //     document.write('☆')
    //   }
    //   // 进行换行显示
    //   document.write('<br>')
    // }

    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>

</html>

⑵打印直角三角形

复制代码

<!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>
</head>

<body>
  <script>
    // 1. 外层循环控制行数
    for (let i = 1; i <= 5; i++) {
      // 2. 里层循环控制列数（几个星星）
      for (let j = 1; j <= i; j++) {
        document.write('◆')
      }
      // 换行
      document.write('<br>')
    }

  </script>
</body>

</html>

⑶.九九乘法表

复制代码

<!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: 60px;
            /* 若还想更紧凑，可继续调小宽度 */
            padding: 5px 10px;
            border: 1px solid pink;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
            background-color: rgba(255, 192, 203, .1);
            text-align: center;
            color: hotpink;
            font-size: 12px;
            /* 新增：设置字体大小，可按需调整数值 */
        }
    </style>
</head>

<body>
    <script>
        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<span>${j} X ${i} = ${i * j}</span>`)
            }
            document.write('<br>')
        }
    </script>
</body>

</html>

七、数组

1.数组的声明与初始化

字面量声明：

let arr1 = [1, "apple", true]; // 混合类型
let arr2 = new Array("a", "b", "c"); // 使用构造函数

空数组：

复制代码

let emptyArr = [];
let emptyArr2 = new Array();

2.数组的访问与遍历

访问元素：

let names = ["Alice", "Bob", "Charlie"];
console.log(names[0]); // "Alice"
console.log(names[names.length - 1]); // "Charlie"（最后一个元素）

遍历数组 （使用for循环）：

复制代码

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

3. 数组的常用操作

JavaScript 的数组长度是可变的。主要体现在以下几个方面：

通过修改 length 属性：可以直接设置数组名.length来改变数组长度。若设置的值大于原长度，数组会新增空元素来填充多出的索引位置；若设置的值小于原长度，索引大于或等于新长度的元素将被舍弃。例如：

复制代码

let arr = [1, 2, 3];
arr.length = 5; 
console.log(arr); 
// 输出: [1, 2, 3, undefined, undefined]

arr.length = 2; 
console.log(arr); 
// 输出: [1, 2]

⑴.新增元素

末尾添加：push()

复制代码

let fruits = ["apple"];
fruits.push("banana"); // ["apple", "banana"]

开头添加：unshift()

复制代码

fruits.unshift("orange"); // ["orange", "apple", "banana"]

⑵.删除元素

末尾删除 ：pop()

复制代码

let last = fruits.pop(); // "banana", 数组变为["orange", "apple"]

开头删除 ：shift()

复制代码

let first = fruits.shift(); // "orange", 数组变为["apple"]

指定删除 ：splice()

复制代码

let arr = [10, 20, 30, 40];
arr.splice(1, 2); // 从索引1开始删除2个元素 → [10, 40]

⑶.修改元素

复制代码

let colors = ["red", "green"];
colors[1] = "blue"; // ["red", "blue"]

4.数组的常见应用案例

⑴. 数组求和与平均值

复制代码

let nums = [2, 6, 1, 7, 4];
let sum = 0;
for (let i = 0; i < nums.length; i++) {
  sum += nums[i];
}
let average = sum / nums.length; // 4

⑵.求最大值与最小值

复制代码

let arr = [2, 6, 1, 77, 25];
let max = arr[0];
let min = arr[0];
for (let i = 1; i < arr.length; i++) {
  if (arr[i] > max) max = arr[i];
  if (arr[i] < min) min = arr[i];
}
console.log(max, min); // 77, 1

⑶.筛选数据

复制代码

// 筛选大于10的元素
let oldArr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
let newArr = [];
for (let i = 0; i < oldArr.length; i++) {
  if (oldArr[i] > 10) {
    newArr.push(oldArr[i]);
  }
}
console.log(newArr); // [77, 52, 25]

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>Document</title>
    <style>
        /* 通用样式：将所有元素的外边距和内边距都设置为0，避免浏览器默认样式的影响 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 定义类名为box的元素样式 */
        .box {
            /* 使用flex布局，让子元素可以灵活排列 */
            display: flex;
            /* 设置盒子的宽度为700px */
            width: 700px;
            /* 设置盒子的高度为300px */
            height: 300px;
            /* 给盒子的左边添加一条1px宽的粉色边框 */
            border-left: 1px solid pink;
            /* 给盒子的底部添加一条1px宽的粉色边框 */
            border-bottom: 1px solid pink;
            /* 让盒子在水平方向上居中显示，上下外边距为50px */
            margin: 50px auto;
            /* 子元素在主轴上均匀分布 */
            justify-content: space-around;
            /* 子元素在交叉轴上靠底部对齐 */
            align-items: flex-end;
            /* 文本居中对齐 */
            text-align: center;
        }

        /* 选择box类下的直接子元素div */
        .box>div {
            /* 使用flex布局，让子元素可以灵活排列 */
            display: flex;
            /* 设置子元素的宽度为50px */
            width: 50px;
            /* 设置子元素的背景颜色为粉色 */
            background-color: pink;
            /* 子元素在垂直方向上排列 */
            flex-direction: column;
            /* 子元素在主轴上均匀分布 */
            justify-content: space-between;
        }

        /* 选择box类下的div元素内的span元素 */
        .box div span {
            /* 让span元素向上偏移20px */
            margin-top: -20px;
        }

        /* 选择box类下的div元素内的h4元素 */
        .box div h4 {
            /* 让h4元素向下偏移35px */
            margin-bottom: -35px;
            /* 设置h4元素的宽度为70px */
            width: 70px;
            /* 让h4元素向左偏移10px */
            margin-left: -10px;
        }
    </style>
</head>

<body>

    <script>
        // 1. 四次弹框效果
        // 声明一个新的空数组，用于存储用户输入的数据
        let arr = [];
        // 使用for循环四次，实现四次弹框让用户输入数据
        for (let i = 1; i <= 4; i++) {
            // 弹出提示框，让用户输入第i季度的数据，并将输入的数据添加到数组arr中
            // 这里可以写成下面两行代码的形式，也可以写成一行代码，推荐使用一行代码的形式
            // let num = prompt(`请输入第${i}季度的数据:`);
            // arr.push(num);
            arr.push(prompt(`请输入第${i}季度的数据:`));
            // 注意：push是数组的方法，需要加小括号，不是等号赋值的形式
        }
        // 打印数组arr，方便调试查看用户输入的数据，例如：['123','135','345','234']
        // console.log(arr);

        // 向文档中写入一个类名为box的div元素的开头标签，用于后续动态生成柱状图
        document.write(` <div class="box">`);

        // 利用循环遍历数组arr，根据数组中的数据动态生成柱状图的柱子
        for (let i = 0; i < arr.length; i++) {
            // 向文档中写入一个div元素，作为柱状图的柱子
            // 设置div元素的高度为数组中对应的数据，同时在柱子上方显示数据，下方显示季度信息
            document.write(`
              <div style="height: ${arr[i]}px;">
                <span>${arr[i]}</span>
                <h4>第${i + 1}季度</h4>
              </div>          
            `);
        }
        // 向文档中写入类名为box的div元素的结尾标签，完成柱状图的创建
        document.write(` </div>`);
    </script>
</body>

</html>