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次操作，用它来计算进行了多少次了

⑴自增运算符的用法：

注意：

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

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

3. 后面 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') // trueconsole.log('aa' < 'ab') // trueconsole.log('aa' < 'aac') // trueconsole.log('-------------------------')</script>
</body></html>

5.逻辑运算符

符号	名称	日常读法	特点	口诀
`&&`	逻辑与	并且	两边都为 `true` 时结果为 `true`	一假则假
`\|\|`	逻辑或	或者	至少一边为 `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 = 10num = num + 1console.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 : numnum = num >= 10 ? num : 0 + numalert(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>