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

没有必要复制if语句的每个块，你应该把它们变成一个函数然后做这样的事情：

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

var totalDistance = getLegDistance(leg1.route) + getLegDistance(leg2.route) + getLegDistance(leg3.route) + getLegDistance(leg4.route)

这样你只有一个if语句块，你可以为你拥有的每条路径调用它。您也可以使用switch语句而不是所有if语句，但它不会减少您的行数（虽然会改善您的性能），因此对象/地图会可能会更好。

Answer 2

不是将数据硬编码到一组长条件中，而是使用对象。这样可以更好地过渡到数据库解决方案，这将是通常处理的方式。

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

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

Answer 3

使用开关。

以下是参考资料：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

示例：

switch (expression) {
  case value1:
    //Statements executed when the result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the result of expression matches valueN
    [break;]
  default:
    //Statements executed when none of the values match the value of the expression
    [break;]
}

Answer 4

这绝对是一个有趣的问题！我做了一点解决方案。我在机场代码中看到了很多重复，并意识到这可能会失控。它们可以是MADAGP或AGPMAD。让数据结构通知您的代码而不是代码告知您如何存储数据是一种非常好的做法。您可以将所有机场数据存储在一个对象中，并引用该对象以获得距离。我看到了一个常见的模式，可能是[key][value]或[value][key]。为了解决这个问题，我使用了lodash forEach函数。你可以看到here in a fiddle所有这些都有效！如果您有任何疑问，请与我们联系：）

function displayDistance() {

    var routes = {
        MAD: {
            AGP: 430,
            BCN: 483,
            LHR: 1246,
            CDG: 1065,
            JFK: 5777,
        },
        JFK: {
            ORD: 1191,
            MCO: 1520,
            IAD: 367,
            MAD: 5777,
        }
    };

    var leg1 = {
        departingCity: document.getElementById("air1").value,
        arrivalCity: document.getElementById("air2").value,
    };

    var leg2 = {
        departingCity: document.getElementById("air2").value,
        arrivalCity: document.getElementById("air3").value,
    };

    var leg3 = {
        departingCity: document.getElementById("air3").value,
        arrivalCity: document.getElementById("air4").value,
    };

    var leg4 = {
        departingCity: document.getElementById("air4").value,
        arrivalCity: document.getElementById("air5").value,
    };

    function getDistance(departingCity, arrivalCity, routes) {
        var distance
        _.forEach(routes, function(_value, key) { 
            if(departingCity ===  key) {
                distance = routes[departingCity][arrivalCity]
            } else if (arrivalCity === key) {
                distance = routes[arrivalCity][departingCity]
            } 
        });
        return distance
    };


    var totalDistance = getDistance(leg1.departingCity, leg1.arrivalCity, routes) 
        + getDistance(leg2.departingCity, leg2.arrivalCity, routes)
        + getDistance(leg3.departingCity, leg3.arrivalCity, routes)
        + getDistance(leg4.departingCity, leg4.arrivalCity, routes)

    document.getElementById("distanceresult").innerHTML = totalDistance;
}

Answer 5

以下是我如何解决这个问题。

首先，构建一个包含每个距离的数据结构。为此，我做了以下假设：

从机场1到机场2的距离始终与数据集中所有可能机场的从机场2到机场1的距离相同。
可以将数据集中任何机场到任何其他机场的距离定义为单个常数。

在JavaScript中，该数据结构可以这样表达（尽管您可能最好将其存储为JSON对象）：

local last_str = ''

function iop(str)
   io.write(('\b \b'):rep(#last_str))  -- erase old line
   io.write(str)                       -- write new line
   io.flush()
   last_str = str
end

请注意，每个属性都引用其上方的每个属性和根大小写“MAD”，但不是下方。这消除了必须两次存储每个值的冗余。它还使得添加更多数据变得更加简单，因为您只需要为每个后续机场添加定义和距离，而无需修改以前的数据。

现在您只需要一个函数来读取该数据结构。这个基本的似乎已经足够了：

function wait(msec)
   local t = os.clock()
   repeat
   until os.clock() > t + msec * 1e-3
end

iop('Very very very long string')
wait(500)
for i = 0, 100 do
   iop(i..'% completed')
   wait(20)  -- wait 20 ms
end
print'\nDone'

根据您的要求，您可能需要自定义易遇案例var routes = { BCN: { MAD: 483 }, JFK: { MAD: 5761, BCN: 6150 }, LHR: { MAD: 1244, BCN: 1148, JFK: 5539 }, ORD: { MAD: 6744, BCN: 7093, JFK: 1188, LHR: 6343 } };，否则，这应该符合您的需求。

替代多个“if语句？

5 个答案: