javascript - 替代多个“if 语句？

Question

我真的是 HTML 和 Javascript 的新手。对于我正在编写的代码的任何帮助，我将不胜感激。

我正在研究一个计算器来显示机场之间的距离。用户将有五个“文本”输入，因此他们将编写机场代码，例如 MAD、JFK。结果将是马德里和肯尼迪国际机场之间的距离。用户可以添加多个机场，例如 BCN MAD JFK ORD，结果应该是所有航段的总和(结果 = BCN-MAD + MAD-JFK + JFK-ORD)。

就我而言，由我指定距离也很重要(因此我不需要“计算”坐标之间的距离)。

我所做的是创建名为“leg1,2,3,4”的变量，将每个机场配对，因此 leg1 可以是例如“BCNMAD”，然后使用 if 语句我可以得到那条腿的距离。最后有一个 totalDistance 变量来添加所有腿的距离。

因为每条边都需要单独计算并添加到其他边，所以我为每个单独的边复制了 if 语句。

这似乎工作得很好，问题是到目前为止我只添加了 8 个机场。实际需求将是大约 200 个机场。因为每条腿都有自己的一组 if，所以我最终可以得到大约 800 个 IF。

我想知道是否有更好的方法来做到这一点？另外，我不知道可以处理多少 if 是否有限制？

就像我之前说的那样，我对 HTML 和 Javascript 很陌生，所以我确信有更好的选择可以做到这一点，但我已经被这个问题困扰了好几天，这是我能想到的最好的解决方案跟上。

因此，我们将不胜感激任何建议或帮助。我在下面包含了代码。

问候， 迈克

function displayDistance()
{
var leg1 = {route:document.getElementById("air1").value + document.getElementById("air2").value , distance:""};
var leg2 = {route:document.getElementById("air2").value + document.getElementById("air3").value , distance:""};
var leg3 = {route:document.getElementById("air3").value + document.getElementById("air4").value , distance:""};
var leg4 = {route:document.getElementById("air4").value + document.getElementById("air5").value , distance:""};

if (leg1.route == "AGPMAD" || leg1.route == "MADAGP") {leg1.distance = 430;}
if (leg1.route == "BCNMAD" || leg1.route == "MADBCN") {leg1.distance = 483;}
if (leg1.route == "LHRMAD" || leg1.route == "MADLHR") {leg1.distance = 1246;}
if (leg1.route == "CDGMAD" || leg1.route == "MADCDG") {leg1.distance = 1065;}
if (leg1.route == "JFKMAD" || leg1.route == "MADJFK") {leg1.distance = 5777;}
if (leg1.route == "ORDJFK" || leg1.route == "JFKORD") {leg1.distance = 1191;}
if (leg1.route == "JFKMCO" || leg1.route == "MCOJFK") {leg1.distance = 1520;}
if (leg1.route == "JFKIAD" || leg1.route == "IADJFK") {leg1.distance = 367;}

if (leg2.route == "AGPMAD" || leg2.route == "MADAGP") {leg2.distance = 430;}
if (leg2.route == "BCNMAD" || leg2.route == "MADBCN") {leg2.distance = 483;}
if (leg2.route == "LHRMAD" || leg2.route == "MADLHR") {leg2.distance = 1246;}
if (leg2.route == "CDGMAD" || leg2.route == "MADCDG") {leg2.distance = 1065;}
if (leg2.route == "JFKMAD" || leg2.route == "MADJFK") {leg2.distance = 5777;}
if (leg2.route == "ORDJFK" || leg2.route == "JFKORD") {leg2.distance = 1191;}
if (leg2.route == "JFKMCO" || leg2.route == "MCOJFK") {leg2.distance = 1520;}
if (leg2.route == "JFKIAD" || leg2.route == "IADJFK") {leg2.distance = 367;}

if (leg2.route == "AGPMAD" || leg2.route == "MADAGP") {leg2.distance = 430;}
if (leg3.route == "BCNMAD" || leg3.route == "MADBCN") {leg3.distance = 483;}
if (leg3.route == "LHRMAD" || leg3.route == "MADLHR") {leg3.distance = 1246;}
if (leg3.route == "CDGMAD" || leg3.route == "MADCDG") {leg3.distance = 1065;}
if (leg3.route == "JFKMAD" || leg3.route == "MADJFK") {leg3.distance = 5777;}
if (leg3.route == "ORDJFK" || leg3.route == "JFKORD") {leg3.distance = 1191;}
if (leg3.route == "JFKMCO" || leg3.route == "MCOJFK") {leg3.distance = 1520;}
if (leg3.route == "JFKIAD" || leg3.route == "IADJFK") {leg3.distance = 367;}

if (leg4.route == "AGPMAD" || leg4.route == "MADAGP") {leg4.distance = 430;}
if (leg4.route == "BCNMAD" || leg4.route == "MADBCN") {leg4.distance = 483;}
if (leg4.route == "LHRMAD" || leg4.route == "MADLHR") {leg4.distance = 1246;}
if (leg4.route == "CDGMAD" || leg4.route == "MADCDG") {leg4.distance = 1065;}
if (leg4.route == "JFKMAD" || leg4.route == "MADJFK") {leg4.distance = 5777;}
if (leg4.route == "ORDJFK" || leg4.route == "JFKORD") {leg4.distance = 1191;}
if (leg4.route == "JFKMCO" || leg4.route == "MCOJFK") {leg4.distance = 1520;}
if (leg4.route == "JFKIAD" || leg4.route == "IADJFK") {leg4.distance = 367;}

  
var totalDistance = leg1.distance + leg2.distance + leg3.distance + leg4.distance;
  
document.getElementById("distanceresult").innerHTML = totalDistance;
}

<span>Route: </span>
<input type="text" class="airinput" id="air1" value="" required=""/>
<input type="text" class="airinput" id="air2" value="" required=""/>
<input type="text" class="airinput" id="air3" value="" required=""/>
<input type="text" class="airinput" id="air4" value="" required=""/>
<input type="text" class="airinput" id="air5" value="" required=""/>
<br/>
<input type="button" onClick="displayDistance();" value="Calculate Distance"/><br/>
<span>The total distance is: </span><span id="distanceresult"></span><br/>

Answer 1

与其将数据硬编码到一长串条件语句中，不如使用对象。这有助于更好地过渡到数据库解决方案，这将是通常的处理方式。

var distances_ = {
  "AGPMAD": 430,
  "MADAGP": 430,
  "BCNMAD": 483,
  "LHRMAD": 1246,
};
leg1.distance =  distances_[ leg1.route ] );

如果您完全使用 Javascript 进行操作，则可以使用 JSON 文本文件和 AJAX 调用代替数据库，从而从您的代码中完全删除距离数据。