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

精选原创

一条晒干的咸魚 2024-10-16 14:04:01 博主文章分类：WEB前端 ©著作权

文章标签 条件语句 ifelse switch JavaScript web前端 文章分类 JavaScript 前端开发 指尖人生

©著作权归作者所有：来自51CTO博客作者一条晒干的咸魚的原创作品，如需转载，请与作者联系，否则将追究法律责任

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

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

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

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

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

条件语句结构允许我们来描述在 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>

创建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函数，该函数负责更新页面的背景颜色和文本颜色。

上一篇：数组：灵活的数据容器高效操作的工具——WEB开发系列46

下一篇：用 JavaScript 循环快速解决问题——WEB开发系列48

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯