万州医院网站建设河南seo关键词排名优化
目录
- 运算符
- 赋值运算符
- 自增运算符
- 自减运算符
- 比较运算符
- 逻辑运算符
- 运算符优先级
- 流程控制语句
- 分支语句
- if 语句
- 三元运算符
- 案例：数字补0
- switch 语句
- 循环语句
- while 循环
- 循环退出
- 案例：ATM 存款机
- 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>let num1 = 2num1 += num1document.write(`num1=${num1}<br/>`)let num2 = 2num2 -= num2document.write(`num2=${num2}<br/>`)let num3 = 2num3 *= num3document.write(`num3=${num3}<br/>`)let num4 = 2num4 /= num4document.write(`num4=${num4}<br/>`)let num5 = 2num5 %= num5document.write(`num5=${num5}<br/>`)</script>
</body>
</html>
结果如下：
自增运算符
符号：++
作用：让变量的值 +1
使用场景：用于计数
| 前置自增 | 后置自增 |
|---|---|
| ++i | i++ |
| 每执行一次，当前变量数值加 1 | 每执行一次，当前变量数值加 1 |
| 相当于 num += 1 | 相当于 num += 1 |
| 先自加再使用 | 先使用再自加 |
代码示例：
<!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 = 1document.write(`前置自增的值为${++num1 + 10}<br>`)let num2 = 1document.write(`后置自增的值为${num2++ + 10}`)</script>
</body>
</html>
结果如下：
自减运算符
符号：–
作用：让变量的值 -1
使用场景：用于计数
| 前置自减 | 后置自减 |
|---|---|
| –i | i– |
| 每执行一次，当前变量数值减 1 | 每执行一次，当前变量数值减 1 |
| 相当于 num -= 1 | 相当于 num -= 1 |
| 先自减再使用 | 先使用再自减 |
代码示例：
<!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 = 1document.write(`前置自减的值为${--num1 + 10}<br>`)let num2 = 1document.write(`后置自减的值为${num2-- + 10}`)</script>
</body>
</html>
结果如下：
比较运算符
使用场景：比较两个数据大小、是否相等
比较运算符：
- >：左边是否大于右边
- <：左边是否小于右边
- >=：左边是否大于或等于右边
- <=：左边是否小于或等于右边
- ==：左右两边值是否相等
- !=：左右两边是否不相等
- ===：左右两边是否类型和值都相等
- !==：左右两边是否不全等
- 比较的结果为 boolean 类型，只会得到 true 或 false
代码示例：
<!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>document.write(`3>2: ${3>2}<br>`)document.write(`3<2: ${3<2}<br>`)document.write(`3>=2: ${3>=2}<br>`)document.write(`3<=2: ${3<=2}<br>`)document.write(`3==2: ${3==2}<br>`)document.write(`3!=2: ${3!=2}<br>`)document.write(`3==='2': ${3==='2'}<br>`)document.write(`3!=='2': ${3!=='2'}<br>`)</script>
</body>
</html>
结果如下：
注意事项：
- 字符串比较的是字符对应的 ASCII 码
- 从左往右依次比较
- 如果第一位一样再比较第二位，以此类推
- NaN 不等于任何值，包括它本身，涉及到 NaN 都是 false
- 尽量不要比较小数，因为小数有精度问题
- 不同类型之间比较会发生隐式转换
- 最终把数据隐式转换成 number 类型再比较
- 开发中精确的比较更推荐 === 或者 !==
逻辑运算符
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
|---|---|---|---|---|
| && | 逻辑与 | 并且 | 符号两边都为 true，结果才为 true | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个 true 就为 true | 一真则真 |
| ! | 逻辑非 | 取反 | true 变 false，false 变 true | 真变假，假变真 |
代码示例：
<!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>document.write(`3<5 && 3>2 : ${3<5 && 3>2}<br>`)document.write(`3<5 && 3<2 : ${3<5 && 3<2}<br>`)document.write(`3>5 || 3>2 : ${3>5 || 3>2}<br>`)document.write(`3>5 || 3<2 : ${3>5 || 3<2}<br>`)document.write(`!(3<5) : ${!(3<5)}<br>`)</script>
</body>
</html>
结果如下：
运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++、–、! |
| 3 | 算数运算符 | 先 *、/、% 后 +、- |
| 4 | 关系运算符 | >、>=、<、<= |
| 5 | 相等运算符 | ==、!=、===、!== |
| 6 | 逻辑运算符 | 先 && 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
流程控制语句
以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
有时候要根据条件选择执行代码，这种就叫分支结构
某段代码被重复执行，就叫循环结构
分支语句
if 语句
if 语句有三种使用：单分支、双分支、多分支
单分支使用语法：
if(条件){满足条件要执行的语句
}
- 括号内的条件为 true 时，进入大括号里执行代码
- 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
- 如果大括号只有一个语句，大括号可以省略，但是不提倡这么做
代码示例：
<!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>if(confirm('是否购买')){alert('购买成功')}</script>
</body>
</html>
结果如下：
屏幕录制 2025-03-25 195109
双分支使用语法：
if(条件){满足条件要执行的语句
} else {不满足条件要执行的语句
}
代码示例：
<!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>if(confirm('是否购买')){alert('购买成功')}else{alert('购买失败') }</script>
</body>
</html>
结果如下：
屏幕录制 2025-03-25 195716
多分支使用语法：
if(条件1){满足条件1执行的语句
} else if(条件2){满足条件2执行的语句
} else if(条件3){满足条件3执行的语句
} else {所有条件都不满足执行的语句
}
- 先判断条件 1，若满足条件 1 就执行代码 1，其他不执行
- 若不满足则向下判断条件 2，满足条件 2 执行代码 2，其他不执行
- 若依然不满足继续往下判断，依次类推
- 若以上条件都不满足，执行 else 里的代码 n。
代码示例：
<!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 score = +prompt('请输入成绩')if(score >= 90 && score <= 100){alert('A')}else if(score >= 80 && score < 90){alert('B')}else if(score >= 70 && score < 80){alert('C')}else{alert('D')}</script>
</body>
</html>
结果如下：
屏幕录制 2025-03-25 200834
三元运算符
使用场景：是比 if 双分支更简单的写法，可以使用三元表达式
符号：? 与 : 配合使用
语法：
条件 ? 满足条件执行的代码 : 不满足条件执行的代码
一般用来取值
代码示例：
<!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 num3 = +prompt('请输入第三个数')let max = (num1 > num2) ? ((num1 > num3) ? num1 : num3) : ((num2 > num3) ? num2 : num3)alert(`最大的数为：${max}`)</script>
</body>
</html>
结果如下：
屏幕录制 2025-03-25 202852
案例：数字补0
代码示例：
<!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 num = prompt('请输入一个数')num = num < 10 ? 0 + num : numalert(num)</script>
</body>
</html>
结果如下：
switch 语句
语法：
switch(数据){case 值1:代码1breakcase 值2:代码2breakdefault:代码nbreak
}
-
找到跟小括号里数据全等（===）的 case 值，并执行里面对应的代码
-
若没有全等（===）的，则执行 default 里的代码
代码示例：
<!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>switch(prompt('请输入数字')){case '1':alert('今天是星期一')break case '2':alert('今天是星期二')breakcase '3':alert('今天是星期三')breakcase '4':alert('今天是星期四')breakcase '5':alert('今天是星期五')breakcase '6':alert('今天是星期六')breakcase '7':alert('今天是星期日')breakdefault:alert('输入错误')}</script>
</body>
</html>
结果如下：
注意事项：
- switch case 语句一般用于等值判断，不适合于区间判断
- switch case 一般需要配合 break 关键字使用，没有 break 会造成 case 穿透
循环语句
while 循环
基本语法：
while(循环条件){要重复执行的代码（循环体）
}
- 跟 if 语句很像，都要满足小括号里的条件为
true才会进入 “循环体” 执行代码 - while 大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
while 循环三要素：
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
所以，while 循环需要具备三要素：
- 变量起始值
- 终止条件（没有终止条件，循环会一直执行，造成死循环）
- 变量变化量（用自增或者自减）
代码示例：
<!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 num = +prompt('请输入一个数字')let sum = 0let i = 1 // 起始值while(i<=num){ // 终止条件sum += ii++ // 变量变化}document.write(`1到${num}的和为${sum}`)</script>
</body>
</html>
结果如下：
循环退出
break：退出循环
代码示例：
<!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 num = +prompt('请购买的包子的数量')let i = 1while (i<=num){if(i === 3){document.write('吃了3个包子，吃饱了，不吃了')break} document.write(`吃了${i}个包子<br>`)i++}</script>
</body>
</html>
结果如下：
continue：结束本次循环，继续下次循环
代码示例：
<!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 num = +prompt('请购买的包子的数量')let i = 1while (i<=num){if(i === 3){i++continue} document.write(`吃了${i}个包子<br>`)i++}</script>
</body>
</html>
结果如下：
区别：
- continue 退出本次循环，一般用于排除或者跳过某一个选项时使用
- break 退出整个循环，一般用于结果已得到，后续循环无需执行时使用
案例：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 money = 100while (true) {let num = +prompt(`请输入您的操作：1. 存钱2. 取钱3. 查询余额4. 退出`)if(num === 4){alert('退出成功')break}switch (num) {case 1:let save = +prompt('请输入您要存的钱数')money += savebreakcase 2:let take = +prompt('请输入您要取的钱数')if(money >= take){money -= take}else{alert('余额不足')}breakcase 3:alert(`您的余额为${money}`)break default:alert('输入错误')break}}</script>
</body>
</html>
结果如下：
屏幕录制 2025-03-25 214706
for 循环
语法：
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>let sum = 0for(let i = 1;i <= 10;i++){sum += i}document.write(`1~10的和为${sum}`)</script>
</body>
</html>
结果如下：
遍历数组
代码示例：
<!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 arr = ['刘德华','张学友','周星驰','黎明','郭富城','周华健','周杰伦','王力宏','陶喆']for(let i = 0;i < arr.length;i++){document.write(arr[i] + ` `) }</script>
</body>
</html>
结果如下：
循环嵌套
语法：
for(外部声明记录循环次数的变量;循环条件;变化值){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><style>span{display: inline-block;width: 135px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px pink;text-align: center;}</style>
</head>
<body><script>for(let i = 1; i <= 9; i++){for(let j = 1; j <= i; j++){document.write(`<span>${i} X ${j} = ${i*j}</span>`)}document.write('<br>')}</script>
</body>
</html>
结果如下：
