编程语言中,代码须根据不同的输入信息做出决策并执行相应的动作。允许程序根据不同的条件执行不同的代码路径。以游戏为例,当玩家的生命值降至零时,游戏便会宣告结束。类似地,在天气预报应用中,根据是清晨还是夜晚,会分别展示日出或星空的图片。JavaScript提供了多种条件语句,包括if...elseswitch和三目运算符,这些语句使得JavaScript代码能够根据不同的输入和状态做出响应。

创建JavaScript“条件语句”代码块做决定——WEB开发系列47_switch


只需一个条件你就可以……!

只要是有自我意识的生物都是无时无刻不在做决定,这些决定都影响着他们的生活,从小事(比如:“我应该去某个公司做牛马,还是去继承家里的公司过着一眼望到头的生活;该去北大软微还是去清华微电子”)到重要的大事(例如:“我应该选择哪种支付方式给博主刷个小小的小礼物”)。

创建JavaScript“条件语句”代码块做决定——WEB开发系列47_JavaScript_02

条件语句结构允许我们来描述在 JavaScript 中这样的选择,从不得不作出的选择(例如:“选择吱吱宝”)到产生的结果或这些选择(也许是“刷一个”可能会“仍然感觉少”,或者是“刷两个”可能会“感觉好像也还是少了哈哈哈哈”。)


if...else 语句

if...else语句是JavaScript中最基本的条件语句。它允许程序在满足特定条件时执行一段代码,如果不满足条件,则执行另一段代码。

基本 if...else 语法

if (条件) {
    // 条件为真时执行的代码
} else {
    // 条件为假时执行的代码
}
  1. 关键字 if,并且后面跟随括号。
  2. 要测试的条件,放到括号里(通常是“这个值大于另一个值吗”或者“这个值存在吗”)。这个条件会利用比较运算符(我们会在最后的模块中讨论)进行比较,并且返回 true 或者 false
  3. 一组花括号,在里面我们有一些代码——可以是任何我们喜欢的代码,并且只会在条件语句返回 true 的时候运行。
  4. 关键字 else
  5. 另一组花括号,在里面我们有一些代码——可以是任何我们喜欢的代码,并且当条件语句返回值不是 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块中的代码。


比较运算符

比较运算符用于比较两个值,并返回一个布尔值(truefalse)。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时执行的代码
}
  1. 关键字 switch, 后跟一组括号。
  2. 括号内可以是表达式或值。
  3. 关键字 case, 后跟一个选项的表达式/值,后面跟一个冒号。
  4. 如果选项与表达式匹配,则运行一些代码。
  5. 一个 break 语句,分号结尾。如果先前的选择与表达式/值匹配,则浏览器在此停止执行代码块,并执行 switch 语句之后的代码。
  6. 你可以添加任意的 case 选项(选项 3-5 个)。
  7. 关键字 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>

创建JavaScript“条件语句”代码块做决定——WEB开发系列47_ifelse_03

我们使用了一个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>

创建JavaScript“条件语句”代码块做决定——WEB开发系列47_switch_04

我们使用了一个switch语句来根据用户的选择调用update函数,该函数负责更新页面的背景颜色和文本颜色。