JavaScript - 函数问题

Question

我是使用 JavaScript 的新手，我正在尝试完成以下练习：

我有一个名为 bill 的数组，其中包含 3 个元素 [124, 48, 268]

我想调用一个函数，它根据账单金额计算小费，小于 50 美元（百分比 = 0.2），50 美元到 200 美元之间的账单金额（百分比 = 0.15）和超过 200 美元的账单金额（百分比 = 0.1）

我使用了以下代码：

    var bill = [124, 48, 268];

    var percCalculation = function(amount) {
        var percentage;
        switch(amount) {
            case (amount < 50):
                percentage = .2;
            case (amount >= 50 && amount < 200):
                percentage = .15;
            case (amount > 200):
                percentage = .1;
        }
        return percentage * amount
    }

    var tipAmount = [percCalculation(bill[0]),
    percCalculation(bill[1]),
    percCalculation(bill[2])];

    console.log(tipAmount);

但是，我得到以下结果：(3) [NaN, NaN, NaN]

代码有什么问题？

Answer 1

记住switch 情况下“失败”，因为一直执行直到遇到break、return 或switch 的结尾，所以：

var percCalculation = function(amount) {
var percentage;
switch(amount) {
    case (amount < 50):
        percentage = .2;
        break;
    case (amount >= 50 && amount < 200):
        percentage = .15;
        break;
    case (amount > 200):
        percentage = .1;
        break;
}
return percentage * amount
}

var bill = [124, 48, 268];
var tipAmount = [percCalculation(bill[0]),
percCalculation(bill[1]),
percCalculation(bill[2])];

console.log(tipAmount);

虽然这解决了掉线问题，但它暴露了另一个更严重的问题 这就是case 的值是通过匹配来评估的，如amount 必须匹配这些case 表达式的完全评估 版本之一， 所以这看起来像：

switch(amount) {
  case true:
     // ...
  case false:
     // ...
  case false:
     // ...
}

所以必须转换成if语句：

var percCalculation = function(amount) {
var percentage;
if (amount < 50)
    percentage = .2;
if (amount >= 50 && amount < 200)
    percentage = .15;
if (amount > 200)
    percentage = .1;

return percentage * amount;
}

var bill = [124, 48, 268];
var tipAmount = [percCalculation(bill[0]),
percCalculation(bill[1]),
percCalculation(bill[2])];

console.log(tipAmount);

请注意，您的逻辑有误，如果 amount 是 200，它将不匹配 在乘法中使用 undefined 值并崩溃。我更喜欢 使用更多数据驱动的定义，如下所示：

percentageForAmount = [
  [ 200, 0.1 ],
  [ 50, 0.15 ],
  [ 0, 0.2 ]
];

您可以在哪里轻松查找值：

let rate = percentageForAmount.find((min, perc) => amount > min);

let percentage = rate[1];

还值得注意的是，通常最好将函数定义为函数，而不是var 变量。没有理由在每次运行时都重新定义它，因为没有任何变化。

换句话说：

function percCalculation(amount) {
  // ...
}

您可以根据需要多次调用它，而无需额外开销。

Answer 2

你的第一个数量的 switch 语句，124 看起来像

var percentage = undefined; // implied value of undeifned
switch(124) {
  case false: ......
  case true: ....
  case false: ....
}
return 124 * undefined; // this is Nan

由于没有匹配 124 的情况，因此百分比永远不会得到值，因此您会得到 NaN

所以，你想switch(true) 因为只有一种情况会是真的

您还想在每个案例结束时break，这样执行就不会“落空”到下一个案例

一点好处，您的函数可以用作 Array#map 方法的回调 - 请参阅 sn-p 的底部

var percCalculation = function(amount) {
    var percentage;
    switch(true) {
        case (amount < 50):
            percentage = .2;
            break;
        case (amount >= 50 && amount < 200):
            percentage = .15;
            break;
        case (amount > 200):
            percentage = .1;
            break;
    }
    return (percentage * amount).toFixed(2) // returns a nice dollar and cents
}

var bill = [124, 48, 268];
var tipAmount = [percCalculation(bill[0]),
percCalculation(bill[1]),
percCalculation(bill[2])];

console.log(tipAmount);

// bonus ... use map to make your code "DRY"
var tip2 = bill.map(percCalculation);
console.log(tip2);

请注意：您的逻辑意味着如果金额正好是 200，您将得到 NaN 结果...您需要在第二种情况下检查 = 200（因为您已经为 50 截止完成）

关于上述 switch 用法的简要说明...许多语言都有switch，但不允许多个具有相同值的case - javascript 可以（不确定哪些其他语言允许）所以，只要使用其他语言时要小心