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

问题描述 投票：0回答：5

因此，我有一个简单的功能，可以查看复选框中已选中的内容，然后吐出价格。我试图做到这一点，以便我尽可能地组合所有“ 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语句似乎并不是最佳选择。

javascript if-statement switch-statement
5个回答
3
投票

下面的代码可以：

Switch(1){
     Case isOne:
            cost += 1350;
            break;
     Case isOne&&isTwo:
            cost += 1850;
            break;
     Case isOne&&isTwo&&isThree:
            cost += 2100;
            break;
     default:
            cost=1350;

}

2
投票

我会将您的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语句。

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

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

1
投票

您为什么认为这些组合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;
   }

}
1
投票

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

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

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

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

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

尽管请记住，当检查布尔值时，您不能使用switch(1)，因为在JavaScript 1 !== true中，即使1 == 2（3个等号（包括!和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对象的名称命名为价格值，然后遍历所有情况，检查其价格值，并将其添加到费用中。

因为要为此完成当前模型，所以需要进行N!个案例检查，其中N代表您拥有的总案例数。

例如，如果您要选择10选项，则必须手动写出10!或3,628,800单独的case检查！！

因此，为了实现可伸缩性，您可以执行以下操作：

<!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) {
      let 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>
0
投票

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

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

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

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

希望这会有所帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.