有沒有辦法可以把它變成一個函數或更有效的東西

Question

if (one >= 16 && one <= 20){
  if (two >= 10){
    Sum.innerHTML = "$2750";
  } else {
    Sum.innerHTML = "$2500";
  }
} else if (one >= 20 && one <= 25){
  if (two >= 10){
    Sum.innerHTML = "$2500";
  } else {
    Sum.innerHTML = "$2250";
  }
}

這只是我的一小部分代碼，它只是一個簡單的金錢計算器，用於我和朋友一起做的事情，這並不重要。 我似乎無法思考是否有任何方法可以通過使用這樣的函數來提高效率，因為它看起來有很多相同的代碼並且是“干的”這不是它的全部代碼，有這么多......不知道是否有人可以幫助僅供參考，這是在 js 中，Sum 是一個段落 ID，所以只需將其視為控制台日志。

謝謝，伊森

編輯

https://codepen.io/anon/pen/bxgYWL?editors=10100如果您繼續閱讀，您可以看到所有代碼以及我想添加的所有評論，以嘗試幫助您理解。 如果它沒有幫助，並且沒有其他方法可以提高效率，請不要擔心。 這並不重要，因為它只是一段私人代碼，不應該引起很多問題。

Answer 1

您可以使用數據結構來保存范圍邊界，然后循環遍歷它。

var params = [
    { onelow: 16, onehigh: 20, 
      two: [ { low: -inf, high: 9, value: 2500 },
             { low: 10, high: +inf, value: 2750 }],
    },
    { onelow: 21, onehigh: 25, 
      two: [ { low: -inf, high: 9, value: 2250 },
             { low: 10, high: +inf, value: 2500 }],
    },
    ...
];

let done = false;
for(let i = 0; !done && i < params.length; i++) {
    let param = params[i];
    if (one >= param.onelow && one <= param.onehigh) {
        let done = false;
        for (let j = 0; j < param.two.length; j++) {
            let param2 = param[j];
            if (two >= param2.low && two <= param2.high) {
                Sum.innerHTML = "$" + param2.value;
                done = true; // stop the outer loop, too
                break;
            }
        }
    }
}

Answer 2

您可以優化您的代碼如下（更新）：

var temp = "$2500"
if (one >= 16 && one <= 20){  
  if (two >= 10){
    temp = "$2750";
  }
} else if (one >= 20 && one <= 25){
  if (!(two >= 10)){
    temp = "$2250";
  }
}
Sum.innerHTML = temp;

您並不總是需要編寫else ，它可以像上面的代碼一樣避免。 如果您必須更改該值，則設置一個始終相同的值，如果滿足條件，則更改該值。

我希望我的回答是有意義的。 謝謝。

Answer 3

首先你的這部分代碼：

if(two >= 10)
{
    Sum.innerHTML = "$2750";
}
else
{
    Sum.innerHTML = "$2500";
}

我們可以重寫為更短的代碼：

Sum.innerHTML = two >= 10 ? "$2750" : "$2500";

然后因為你的這部分代碼一直重復，我們可以將它寫成如下函數：

function setSum(compareValue, ifValue, elseValue)
{
    Sum.innerHTML = two >= compareValue ? ifValue : elseValue
    // or even: Sum.innerHTML = two >= 10 ? ifValue : elseValue
}

在此之后，我們可以在 codepen 上縮短示例中的代碼，如下例所示：

 var numOne = document.getElementById("one"), numTwo = document.getElementById("two"), Sum = document.getElementById("sum"); numOne.addEventListener("input", calc); numTwo.addEventListener("input", calc); function setSum(compareValue, ifValue, elseValue) { Sum.innerHTML = two >= compareValue ? ifValue : elseValue // or even: Sum.innerHTML = two >= 10 ? ifValue : elseValue } function calc() { var one = parseFloat(numOne.value) || 0, two = parseFloat(numTwo.value) || 0; if(one >= 16 && one <= 20) setSum(10, "$2750", "$2500"); else if(one >= 20 && one <= 25) setSum(10, "$2500", "$2250"); else if(one >= 25 && one <= 35) setSum(10, "$2000", "$1750"); else if(one >= 35 && one <= 45) setSum(10, "$1500", "$1250"); else if(one >= 45 && one <= 50) setSum(10, "$1250", "$1000"); }

 <h4>Calculator</h4> <p> <input id="one"> + <input id="two"> </p> <p id="sum"></p>

我不太明白你的計算器是做什么的，但你寫道：

這只是我的一小部分代碼，它只是一個簡單的金錢計算器，用於我和朋友一起做的事情，這並不重要。