编程语言中，代码须根据不同的输入信息做出决策并执行相应的动作。允许程序根据不同的条件执行不同的代码路径。以游戏为例，当玩家的生命值降至零时，游戏便会宣告结束。类似地，在天气预报应用中，根据是清晨还是夜晚，会分别展示日出或星空的图片。JavaScript提供了多种条件语句，包括if...else、switch和三目运算符，这些语句使得JavaScript代码能够根据不同的输入和状态做出响应。
只需一个条件你就可以……！
只要是有自我意识的生物都是无时无刻不在做决定，这些决定都影响着他们的生活，从小事（比如：“我应该去某个公司做牛马，还是去继承家里的公司过着一眼望到头的生活；该去北大软微还是去清华微电子”）到重要的大事（例如：“我应该选择哪种支付方式给博主刷个小小的小礼物”）。
条件语句结构允许我们来描述在 JavaScript 中这样的选择，从不得不作出的选择（例如：“选择吱吱宝”）到产生的结果或这些选择（也许是“刷一个”可能会“仍然感觉少”，或者是“刷两个”可能会“感觉好像也还是少了哈哈哈哈”。）
if...else 语句
if...else语句是JavaScript中最基本的条件语句。它允许程序在满足特定条件时执行一段代码，如果不满足条件，则执行另一段代码。
基本 if...else 语法
if (条件) {// 条件为真时执行的代码
} else {// 条件为假时执行的代码
}- 关键字
if，并且后面跟随括号。 - 要测试的条件，放到括号里（通常是“这个值大于另一个值吗”或者“这个值存在吗”）。这个条件会利用比较运算符（我们会在最后的模块中讨论）进行比较，并且返回
true 或者 false。 - 一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且只会在条件语句返回
true 的时候运行。 - 关键字
else。 - 另一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且当条件语句返回值不是
true（换句话说，这个返回值为 false）的话，它才会运行。
在这个语法中，条件是一个布尔表达式，如果它返回true，则执行if块中的代码；如果返回false，则执行else块中的代码。
举例说明
以下是一个简单的例子，它检查一个数字是否大于10：
let number = 15;
if (number > 10) {console.log("数字大于10");
} else {console.log("数字不大于10");
}由于number的值是15，所以条件number > 10为真，因此会输出“数字大于10”。
else if 的使用
else if语句可以用来添加更多的条件分支。它必须紧跟在if语句之后。
if (条件1) {// 条件1为真时执行的代码
} else if (条件2) {// 条件2为真时执行的代码
} else {// 所有条件都为假时执行的代码
}else if语句可以用来处理多个条件，只有当所有前面的条件都为假时，才会执行else if块中的代码。
比较运算符
比较运算符用于比较两个值，并返回一个布尔值（true或false）。JavaScript中常用的比较运算符包括：
-
==：等于 -
!=：不等于 -
>：大于 -
<：小于 -
>=：大于等于 -
<=：小于等于
比较运算符可以用来在if...else语句中设置条件。
嵌套 if...else
有时候，你可能需要在if...else语句内部再嵌套一个if...else语句。
if (条件1) {if (条件2) {// 条件1和条件2都为真时执行的代码} else {// 条件1为真，但条件2为假时执行的代码}
} else {// 条件1为假时执行的代码
}嵌套的if...else语句可以用来处理更复杂的逻辑。
switch 语句
if...else语句在实现条件代码方面非常有效，但也存在一些缺点。它们最适合处理选项较少且每个选项需要较多代码的场景，或是在条件较为复杂时（例如涉及多个逻辑运算符）。对于仅需将变量赋值为特定值或根据条件输出特定语句的情况，语法可能显得冗长，尤其是在选项数量较多时。switch语句允许根据不同的值执行不同的代码块。它通常用于处理多个可能的值。
switch 语句语法
switch (表达式) {case 值1:// 当表达式的值等于值1时执行的代码break;case 值2:// 当表达式的值等于值2时执行的代码break;// ...default:// 当表达式的值不匹配任何case时执行的代码
}- 关键字
switch, 后跟一组括号。 - 括号内可以是表达式或值。
- 关键字
case, 后跟一个选项的表达式/值，后面跟一个冒号。 - 如果选项与表达式匹配，则运行一些代码。
- 一个
break 语句，分号结尾。如果先前的选择与表达式/值匹配，则浏览器在此停止执行代码块，并执行 switch 语句之后的代码。 - 你可以添加任意的 case 选项（选项 3-5 个）。
- 关键字
default, 后面跟随和 case 完全相同的代码模式（选项 3–5 个），default 之后不需要再有选项，并且不需要 break 语句，因为之后没有任何运行代码。如果之前没有选项匹配，则运行 default 选项。
表达式是任何可以返回值的JavaScript表达式，而case块定义了当表达式的值与某个特定值匹配时要执行的代码。
switch 语句示例
以下是一个使用switch语句的例子，它根据用户选择的星期几输出相应的问候语：
let day = "周三";
switch (day) {case "周一":console.log("早上好！");break;case "周二":case "周三":case "周四":case "周五":console.log("工作日，加油！");break;case "周六":case "周日":console.log("周末愉快！");break;default:console.log("未知的日子，祝你有个好心情！");
}在这个例子中，根据day变量的值，程序会输出不同的问候语。
三目运算符
三目运算符是一种语法结构，用于检查一个条件并返回相应的值或表达式。如果条件为真，则返回第一个值；如果为假，则返回第二个值。这在某些情况下非常实用，因为它通过 true/false 条件进行选择，能够显著减少代码量，相比于传统的 if...else 语句更加简洁。
三目运算符语法
条件 ? 表达式1 : 表达式2;如果条件为真，则返回表达式1的值；如果条件为假，则返回表达式2的值。
三目运算符示例
以下是一个使用三目运算符的例子，它根据年龄判断一个人是否可以投票：
let age = 18;
let canVote = (age >= 18) ? "可以投票" : "不能投票";
console.log(canVote); // 输出：可以投票如果age大于或等于18，则canVote变量的值将是“可以投票”，否则是“不能投票”。
实例：制作一个简单的日历
在这个实例中，我们将创建一个简单的日历，允许用户选择不同的月份，并在页面上显示所选月份的天数。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简单日历</title>
</head>
<body><select id="monthSelect"><option value="1 月">1 月</option><option value="2 月">2 月</option><option value="3 月">3 月</option><option value="4 月">4 月</option><option value="5 月">5 月</option><option value="6 月">6 月</option><option value="7 月">7 月</option><option value="8 月">8 月</option><option value="9 月">9 月</option><option value="10 月">10 月</option><option value="11 月">11 月</option><option value="12 月">12 月</option></select><h1 id="calendar"></h1><script>let monthSelect = document.getElementById("monthSelect");let calendar = document.getElementById("calendar");monthSelect.onchange = function() {let choice = monthSelect.value;let days;switch (choice) {case "1 月":case "3 月":case "5 月":case "7 月":case "8 月":case "10 月":case "12 月":days = 31;break;case "4 月":case "6 月":case "9 月":case "11 月":days = 30;break;case "2 月":days = 28;break;default:days = 0;}calendar.textContent = `${choice} 有 ${days} 天`;};</script>
</body>
</html>
我们使用了一个switch语句来根据用户选择的月份设置days变量的值。
实例：更多颜色选择
在这个实例中，我们将使用switch语句来根据用户的选择更新网站的主题颜色。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>颜色选择</title>
</head>
<body><select id="themeSelect"><option value="white">白色</option><option value="black">黑色</option><option value="purple">紫色</option><option value="yellow">黄色</option><option value="psychedelic">迷幻</option></select><script>let themeSelect = document.getElementById("themeSelect");themeSelect.onchange = function() {let choice = themeSelect.value;switch (choice) {case "white":update("white", "black");break;case "black":update("black", "white");break;case "purple":update("purple", "white");break;case "yellow":update("yellow", "black");break;case "psychedelic":update("black", "white");break;}};function update(bgColor, textColor) {document.body.style.backgroundColor = bgColor;document.body.style.color = textColor;}</script>
</body>
</html>
我们使用了一个switch语句来根据用户的选择调用update函数，该函数负责更新页面的背景颜色和文本颜色。
