在 Javascript 中切换多个案例

Nithin Krishnan 2023年1月30日 2021年11月23日
  1. 在 Javascript 中使用 Fall Through 模型使用多个案例的切换
  2. 使用 JavaScript 中的数学表达式处理 Switch 中的多个案例
  3. 使用 Javascript 中的字符串表达式处理 Switch 中的多个 case
  4. 使用 Javascript 中的逻辑表达式处理 Switch 中的多个案例
在 Javascript 中切换多个案例

Switch case 的性能比 if-else 阶梯高得多。它们有一个从变量值的直接映射,在 switch(variable) 块中,到它们对应的值,在 case: value 块中。我们熟悉单值映射的常见 switch-case 用法,但它可以支持多种情况吗?让我们看看在 javascript 中,我们可以在 switch-case 块中有多个 case 的几种方法。

在 Javascript 中使用 Fall Through 模型使用多个案例的切换

Fall through 模型是在 JavaScript 中使用多个 case 块支持 switch 的第一步。在这里,我们通过多种情况捕获切换变量的多个值。我们将 break 关键字应用于一组有效的情况。例如,如果我们想根据过去的月份记录一年的季度名称,我们将根据季度对月份指数进行分组。参考以下代码。

window.onload = function() {
    findQuarter("2021-08-08");
    findQuarter("2021-05-12");
    findQuarter("2021-02-28");
    findQuarter("2021-11-30");
}

function findQuarter(dateString) {
    var monthIndex = new Date(dateString).getMonth();
    switch(monthIndex) {
        case 0:
        case 1:
        case 2:
            console.log("First Quarter");
            break;
        case 3:
        case 4:
        case 5:
            console.log("Second Quarter");
            break;
        case 6:
        case 7:
        case 8:
            console.log("Third Quarter");
            break;
        case 9:
        case 10:
        case 11:
            console.log("Fourth Quarter");
            break;
    }
}

输出:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

findQuarter() 函数接受格式为 yyyy-mm-dd 的日期字符串。然后它通过首先将其转换为 javascript 日期对象,然后从日期对象中获取月份索引,从 dateString 参数中提取月份索引。getMonth() 是一个 javascript 函数,它应用于 Date 对象并返回从 0 开始的月份索引。我们在这里使用多个案例,一个堆叠在另一个下面以捕获输出的多个值。

例如,对于从 1 月到 3 月的月份,根据 getMonth() 函数返回的输出,相应的月份索引的范围是 0 到 2。我们在没有 break 关键字的情况下将所有情况从 0 堆叠到 2。因此,他们会绊倒并在遇到 break 时打破 switch-case,该 break 恰好在 case 2: 行中,它记录了值 First Quarter。这组代码看起来很笨重。我们可以按如下方式重写相同的内容以减少行数。

window.onload = function() {
    findQuarter("2021-08-08");
    findQuarter("2021-05-12");
    findQuarter("2021-02-28");
    findQuarter("2021-11-30");
}

function findQuarter(dateString) {
    var monthIndex = new Date(dateString).getMonth();
    switch(monthIndex) {
        case 0: case 1: case 2:
            console.log("First Quarter");
            break;
        case 3: case 4: case 5:
            console.log("Second Quarter");
            break;
        case 6: case 7: case 8:
            console.log("Third Quarter");
            break;
        case 9: case 10: case 11:
            console.log("Fourth Quarter");
            break;
    }
}

输出:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

请注意,这里的输出保持不变。这只是编写 Fall through switch-case 模型的另一种方式。它使代码现在看起来更干净并节省空间。

使用 JavaScript 中的数学表达式处理 Switch 中的多个案例

我们正在按照前面部分中提到的示例处理一个月的数值。我们可以在 case 块中使用 expressions 吗?绝对是的!在解释功能之前,让我们参考以下代码。

window.onload = function() {
    findQuarter("2021-08-08");
    findQuarter("2021-05-12");
    findQuarter("2021-02-28");
    findQuarter("2021-11-30");
    findQuarter("2021-2-30");
}

function findQuarter(dateString) {
    var monthIndex = new Date(dateString).getMonth();
    switch(monthIndex) {
        case ( (monthIndex < 2) ? monthIndex : -1 ):
            console.log("First Quarter");
            break;
        case ( ((monthIndex > 2) && (monthIndex < 5)) ?  monthIndex : -1):
            console.log("Second Quarter");
            break;
        case ( ((monthIndex > 5) && (monthIndex < 8)) ?  monthIndex : -1):
            console.log("Third Quarter");
            break;
        case ( ((monthIndex > 8) && (monthIndex < 11)) ?  monthIndex : -1):
            console.log("Fourth Quarter");
            break;
        default:
            console.log("Invalid date");
            break;
    }
}

输出:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

如果我们在 switch case 中使用表达式,它们必须返回一个数字值,否则为 -1。在上面的代码片段中,我们在 case 块中添加了数字表达式而不是它们的实际值。这些表达式计算月份的相应季度并记录季度名称。在这里,我们在 switch case 中包含了 default 子句来处理 Invalid date。如果 date 中的 month 有效(在 112 的范围内),JavaScript 中的 getMonth() 方法返回一个值(介于 011 之间),否则它将返回 NaNdefault 块将捕获此类无效日期场景。

使用 Javascript 中的字符串表达式处理 Switch 中的多个 case

我们还可以在 case 块中使用字符串表达式。这些表达式在运行时计算,执行 case 子句。对于我们的月份示例,让我们尝试切换月份名称。为此,我们将在日期对象上应用 toLocaleDateString() 函数。在函数的 options 参数中,我们给出 { month: 'long' }toLocaleDateString('en-US', { month: 'long' }) 的输出现在将是月份名称,即完整的月份名称。然后我们切换 toLocaleDateString('en-US', { month: 'long' }) 函数的完整月份名称输出。

window.onload = function() {
    findQuarter("2021-08-08");
    findQuarter("2021-05-12");
    findQuarter("2021-02-28");
    findQuarter("2021-11-30");
    findQuarter("2021-21-30");
}

function findQuarter(dateString) {
    var monthName = new Date(dateString).toLocaleDateString('en-US', { month: 'long' });
    switch(true) {
        case ["January", "February", "March"].includes(monthName):
            console.log("First Quarter");
            break;
        case ["April", "May", "June"].includes(monthName):
            console.log("Second Quarter");
            break;
        case ["July", "August", "September"].includes(monthName):
            console.log("Third Quarter");
            break;
        case ["October", "November", "December"].includes(monthName):
            console.log("Fourth Quarter");
            break;
        default:
            console.log("Invalid date");
            break;
    }
}

输出:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

在上面的代码中,我们使用了 switch(true) 语句。在 case 子句中,我们有字符串比较。我们为每个季度创建了一个临时的月份数组,并将它们添加到每个案例中。然后我们检查 monthName 在季度数组中是否可用。如果找到,它将记录季度的名称。如果日期无效,toLocaleDateString('en-US', { month: 'long' }) 函数将输出 Invalid Date。这个场景被 default 块捕获,因为 Invalid Date 字符串将与保存季度月份名称的预定义数组不匹配。因此,我们在这里顺利处理无效日期的情况。

注意
我们还可以使用 .indexOf() 代替 .includes()find() 函数来支持多个浏览器。Internet Explorer 不支持 .includes()find() 函数。

使用 Javascript 中的逻辑表达式处理 Switch 中的多个案例

正如我们在数学和字符串表达式中看到的那样,我们还可以在 switch-case 块中的 multiple cases 中使用逻辑运算符。在月份示例中,我们将使用逻辑 OR 运算符 || 用于确定月份名称是否在特定季度中。让我们参考以下代码。

window.onload = function() {
    findQuarter("2021-08-08");
    findQuarter("2021-05-12");
    findQuarter("2021-02-28");
    findQuarter("2021-11-30");
    findQuarter("2021-21-30");
}

function findQuarter(dateString) {
    var monthName = new Date(dateString).toLocaleDateString('en-US', { month: 'long' });
    switch(true) {
        case (monthName === "January" || monthName === "February" || monthName === "March"):
            console.log("First Quarter");
            break;
        case (monthName === "April" || monthName === "May" || monthName === "June"):
            console.log("Second Quarter");
            break;
        case (monthName === "July" || monthName === "August" || monthName === "September"):
            console.log("Third Quarter");
            break;
        case (monthName === "October" || monthName === "November" || monthName === "December"):
            console.log("Fourth Quarter");
            break;
        default:
            console.log("Invalid date");
            break;
    }
}

输出:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

在代码中,我们检查 monthName 值是否等于一个季度的月份。因此,我们安慰季度的名称。在这里,我们也处理无效日期的情况,因为它不满足 case 子句中编码的任何条件,并且会落入 default 块,然后将 Invalid date 打印到浏览器控制台。