条件语句
2025-02-17
概述
条件语句是编程中的基础控制结构，用于根据不同条件执行不同的代码。JavaScript 提供了多种条件语句：
- if...else 语句
- switch 语句
- 三元运算符
if...else语句
if else 基本格式
最基本的条件语句形式：
if (condition) {
// 条件为真时执行的代码
}
else {
// 条件为假时执行的代码
}示例
let shoppingData = false
let childAllowance
if (shoppingData === true) {
childAllowance = 10;
} else {
childAllowance = 5
}else if语句
处理多个条件的情况：
<label for='weather'>今天的天气是:</label>
<select id='weather'>
<option value='sunny'>晴天</option>
<option value='cloudy'>阴天</option>
<option value='rainy'>雨天</option>
<option value='stormy'>暴风雨</option>
</select>
<p></p>const select = document.querySelector('select')
const para = document.querySelector('p')
function setWeather() {
const choice = select.value
if (choice === "sunny") {
para.textContent = "今天是晴天"
} else if (choice === "cloudy") {
para.textContent = "今天是阴天"
} else if (choice === "rainy") {
para.textContent = "今天是雨天"
} else if (choice === "stormy") {
para.textContent = "今天是暴风雨"
} else {
para.textContent = ""
}
}比较运算符
| 运算符 | 说明 | 示例 |
|---|---|---|
=== | 严格相等 | a === b |
!== | 严格不等 | a !== b |
< | 小于 | a < b |
> | 大于 | a > b |
<= | 小于等于 | a <= b |
>= | 大于等于 | a >= b |
示例
let cheese = "cheddar"
if (cheese) {
console.log("true")
} else {
console.log('False')
}嵌套 if...else
if (choice === 'sunny') {
if (temperature < 86) {
para.textContent = `外面现在是 ${temperature} 华氏度——风和日丽。`;
} else if (temperature >= 86) {
para.textContent = `外面现在是 ${temperature} 华氏度——很热！`;
}
}逻辑关系
| 运算符 | 名称 | 说明 | 示例 |
|---|---|---|---|
&& | 逻辑与 | 两个条件都为真 | a && b |
|| | 逻辑或 | 至少一个条件为真 | a || b |
! | 逻辑非 | 取反 | !a |
switch
基本语法
switch (表达式) {
case 选择1:
运行这段代码
break;
case 选择2:
否则，运行这段代码
break;
// 可以有更多的 case
default:
// 所有 case 都不匹配时执行
}示例
<label for="weather">选择今天的天气：</label>
<select id="weather">
<option value="">--作出选择--</option>
<option value="sunny">晴天</option>
<option value="rainy">雨天</option>
<option value="snowing">雪天</option>
<option value="overcast">阴天</option>
</select>
<p></p>const select = document.querySelector("select");
const para = document.querySelector("p");
select.addEventListener("change", setWeather);
function setWeather() {
const choice = select.value;
switch (choice) {
case "sunny":
para.textContent = "阳光明媚，适合外出";
break;
case "rainy":
para.textContent = "下雨天，记得带伞";
break;
case "snowing":
para.textContent = "下雪天，注意保暖";
break;
case "overcast":
para.textContent = "阴天，可能会下雨";
break;
default:
para.textContent = "";
}
}三元运算符
三元运算符是 if-else 的简写形式：
// 语法
condition ? expressionIfTrue : expressionIfFalse示例 1
const greeting = isBrithday
? "Happy birthday!"
: "Good day!";示例 2
<label for="theme">选择主题：</label>
<select id="theme">
<option value='while'>白</option>
<option value='black'>黑</option>
</select>
<h1>this is home page</h1>const select = document.querySelector("select");
const html = document.querySelector("html");
function update(bgColor, textColor) {
html.style.background = bgColor
html.style.color = textColor
}
select.addEventListener("change", () => {
select.value === "black"
? update("black", "white")
: update("white", "black")
})