javascript - 为什么我在 switch 语句中得到不同的结果

Question

我正在学习 JavaScript，目前我使用函数和 switch 语句构建简单的小费计算器。基本上，当账单低于 50 美元时，小费为账单的 20%；当账单在 50 至 200 美元之间时，小费为 15%；如果账单 > 200 美元，小费为 10%。示例输入/参数:

simpleTipCalculator(124)
simpleTipCalculator(48)
simpleTipCalculator(268)

如果手动计算，结果(预期结果):

18.599999999999998
9.600000000000001
26.8

这是迄今为止我的代码:

function simpleTipCalculator(bill){
    let tip = 0
    switch(bill){
        case bill > 0 && bill < 50:
            tip = bill * 0.2
            break;
        case bill >= 50 && bill <= 200:
            tip = bill * .15
            break;
        default:
            tip = bill * .1

    }
    console.log(tip)
}

以及该函数的结果:

12.4
4.800000000000001
26.8

我对此感到困惑，然后我将代码更改为:

function simpleTipCalculator(bill){
        let tip = 0
        switch(true){
            case bill > 0 && bill < 50:
                tip = bill * 0.2
                break;
            case bill >= 50 && bill <= 200:
                tip = bill * .15
                break;
            default:
                tip = bill * .1

        }
        console.log(tip)
    }

结果正如我所料。

18.599999999999998
9.600000000000001
26.8

我的问题是这是怎么发生的？请解释一下，因为我不知道要在 Google 上查找什么内容

Answer 1

当你这样做时

switch(bill){

如果后面的表达式 === 等于 bill 的值，则 case 得到满足。例如，如果 bill 为 124，则 switch(bill) 将需要

case: 124:
    tip = bill * .15 // because 124 <= 200

使您的程序按预期工作。您的代码会产生意外结果，因为所有 case 都失败，并且会落入 default。

switch(true) 之所以有效，是因为当您遇到以下情况时

case bill > 0 && bill < 50:

这将有效评估

case true
// block below will run, because `true` is `===` to the expression that was switched against

或

case false:
// block below will not run, because `false` is `!==` to the expression that was switched against

并相应地运行 case block 。

switch 不是完成这项工作的正确工具，IMO - 它令人困惑且冗长。 (我认为，对于 Javascript 中的任何编程任务来说，它都不是正确的工具。)我会使用 if/else 来代替:

const getTip = (bill) => {
  if (bill > 0 && bill < 50) {
    return bill * 0.2;
  } else if (bill >= 50 && bill <= 200) {
    return bill * 0.15;
  } else {
    return bill * 0.1;
  }
};

function simpleTipCalculator(bill) {
  console.log(getTip(bill));
}

simpleTipCalculator(124)
simpleTipCalculator(48)
simpleTipCalculator(268)