Question

所以我有一个简单的功能，可以查看复选框中选中的内容，然后吐出价格。我试图做到这一点，以便我尽可能地组合各种“ If”语句，以便用户选择，就会弹出正确的价格。我只是想知道如何将这段代码转换为switch语句以使其高效。如果还有其他需要解决的问题，我希望能得到反馈，这是我第一周使用JS进行学校项目。

    <!DOCTYPE html>
<html>

<head>
<script>
function testFunc() {
  cost = 0;
  var isOne = document.getElementById('Maui').checked;
  var isTwo = document.getElementById('Oahu').checked;
  var isThree = document.getElementById('Hawaii').checked;


  if(isOne) {
    cost += 1350
  }
  if(isOne && isTwo) {
    cost = 1850
  }
  if(isOne && isTwo && IsThree) {
    cost = 2100
  }
  else{
    cost = 1350
}
  if(isTwo){
    cost += 0
  }

  document.getElementById('cost').innerHTML = cost;
}

</script>
</head>

<body>

<h2>Chose Islands For Package/h2>

<form>
  <input type="checkbox" id="Maui">

  <label>Maui</label><br>

  <input type="checkbox" id="Oahu">

  <label>Oahu</label><br>

  <input type="checkbox" id="Hawaii">

  <label>Hawaii</label><br>


</form>

 <button onclick="testFunc()">Price </button>

 <p id="cost"> </p>

</body>
</html>

编辑：对不起，我想我没有弄清楚，到哪个岛旅行的费用是1350，无论是哪个岛。我认为对于简单的JS代码，我想做的事情太复杂了。例如，如果我选择夏威夷，它将是1350，如果我选择了两个岛屿，它将是1850，但是如果它再次只有一个岛屿，例如Ohau，它将再次是1350。我正在考虑对每个可能的变体进行数组和/或编写if / else statemnts，因为switch语句似乎并不是最佳选择。

Answer 1

我将您的testFunc函数更改为此：

function testFunc() {
    var total = 0;
    var maui = document.getElementById('Maui');
    var oahu = document.getElementById('Oahu');
    var hawaii = document.getElementById('Hawaii');

    total = (maui.checked ? 1350 : 0) + 
            (oahu.checked ? 500 : 0) + 
            (hawaii.checked ? 250 : 0);

    document.getElementById('cost').innerHTML = total;
}

编辑：除了您要整体提高效率外，我没有使用过switch语句。

看看其他答案，包括被接受的答案，我认为他们在汇总价格时继承了一个错误，毛伊+夏威夷是没有道理的。

我提供的解决方案适用于任何组合。

Answer 2

switch语句用于检查一个值（或变量）是否等于其他值的子集中的任何一个。

例如，如果var string的值的 case 等于foo或bar的情况，等等。在这种情况下，存在由于要检查多个变量，所以switch语句的简单含义不适合。

但是，每个布尔值的内在本质上是对还是错，因此您可以改为切换另一个布尔变量的大小写，以检查其是否等于其他布尔变量。

还请记住，对于switch语句，函数switch在每种情况下均会像===一样准确检查输入到其中的参数。

因此，您可以执行相反的操作，而不是像if语句中那样检查一个变量是否为布尔值，而是对照输入到switch中的参数检查许多变量，即， “ true”（所有布尔值的结果）。

请记住，尽管检查布尔值时不能使用switch(1)，因为在JavaScript 1 !== true中，即使1 == 2（3个等号之间的差（包括{{1} }和2，以获取有关差异的更多信息，以及因此可以与之进行比较的各种情况，请参见Which equals operator (== vs ===) should be used in JavaScript comparisons?）。

所以你可以做，例如：

还要注意，检查多个值的个案在<!DOCTYPE html> <html> <head> <script> function testFunc() { cost = 0; var isOne = document.getElementById('Maui').checked; var isTwo = document.getElementById('Oahu').checked; var isThree = document.getElementById('Hawaii').checked; switch(true) { case isOne && isTwo && isThree: cost = 2100; break; case isOne && isTwo: cost = 1850; break; case isTwo && isThree: cost = (2100 - 1350); break; case isOne: cost = 1350; break; case isTwo: cost = (1850 - 1350 /*based on earlier*/) break; case isThree: cost = 2100 - 1850 //based on earlier break; default: cost = 0 } document.getElementById('cost').innerHTML = cost; } </script> </head> <body> <h2>Chose Islands For Package/h2> <form> <input type="checkbox" id="Maui"> <label>Maui</label><br> <input type="checkbox" id="Oahu"> <label>Oahu</label><br> <input type="checkbox" id="Hawaii"> <label>Hawaii</label><br> </form> <button onclick="testFunc()">Price </button> <p id="cost"> </p> </body> </html>中是如何首先出现的，因为它的工作方式是检查每个个案，然后返回第一个为真的个案。

我还添加了一个以前没有的其他检查用例，即switch/case。

但是顺便说一句，如果您只是想计算每个地方的总价，一种更有效的方法是简单地创建一个case isTwo && isThree对象以将其命名为价格值，然后遍历所有情况，检查其情况。价格值，并将其添加到成本中，如下所示：

map

因为要为此完成当前模型，所以需要进行<!DOCTYPE html> <html> <head> <script> function testFunc() { cost = 0; var map = { Maui: 1350, Oahu: 500, Hawaii: 250 }; Array.apply(0, myForm.elements) .forEach(x => { if(x.checked) { var cur = map[x.id] if(cur) cost += cur; } }); document.getElementById('cost').innerHTML = cost; } </script> </head> <body> <h2>Chose Islands For Package/h2> <form id=myForm> <input type="checkbox" id="Maui"> <label>Maui</label><br> <input type="checkbox" id="Oahu"> <label>Oahu</label><br> <input type="checkbox" id="Hawaii"> <label>Hawaii</label><br> </form> <button onclick="testFunc()">Price </button> <p id="cost"> </p> </body> </html>数量的N!检查，其中case代表您拥有的总案件数。

因此，例如，如果您有N个选项可供选择，则必须手动写出10或10!个单独的3,628,800支票！ >

Answer 3

下面的代码可以做到：

switch(true){
     case isOne:
            cost += 1350;
            break;
     case isOne&&isTwo:
            cost += 1850;
            break;
     case isOne&&isTwo&&isThree:
            cost += 2100;
            break;
     default:
            cost=1350;

}

Answer 4

您为什么认为这些组合if and else会使您的核心效率低下？我建议您提取一种用于计算cost的方法，这样代码的意图将更加清楚：

function testFunc() {
     var isMaui = document.getElementById('Maui').checked;
     var isOahu = document.getElementById('Oahu').checked;
     var isHawaii = document.getElementById('Hawaii').checked;

     document.getElementById('cost').innerHTML = calculateCost(isMaui, isOahu, isHawaii);
}

function calculateCost(isMaui, isOahu, isHawaii) {
   if(isMaui && isOahu && isHawaii) {
       return 2100;
   } else if (isMaui && isOahu) {
       return 1850;
   } else if (isMaui) {
       return 1350;
   } else {
       return 1350;
   }

}

Answer 5

对于初学者来说，您总是想用var关键字声明新变量。如果不这样做，则创建一个称为自动全局变量的东西。以后使用较大的代码库可能会产生无法预测的错误。

第二，使用switch case语句实际上并不是更有效。我建议坚持使用if / else语句。另外，如果我正确地理解了您的代码，则如果检查了某些内容，则可能正在尝试调整价格。可能会更容易测试每个变量，并且随您添加成本

var cost = 0;
if(isOne) {
 cost += 1350
}
if(isTwo) {
 cost += 1850
}
if(isThree) {
 cost +=2100
}

这样，它将始终从零开始，并且如果所有条件都不能满足，则成本不会从零变化。

希望这会有所帮助！

如何将这些If if语句转换为Switch语句

5 个答案: