Javascript 变量与数组的效率并将它们输入 HTML答案

【问题标题】：Efficiency in Javascript variables vs. arrays & inputting them into HTMLJavascript 变量与数组的效率并将它们输入 HTML
【发布时间】：2021-09-01 01:54:12
【问题描述】：

我正在制作一个向用户询问问题、获取结果、获取分配给该结果的变量并将它们输入到表格中的页面。到目前为止我所做的工作完美，但效率不高，而且我知道使用数组和可能的循环有更好的方法，但我尝试的每次迭代仍然会产生等于或更多的工作。这是我创建的（效果很好）：

    function agecalc() {
      var weight;
      var HRlow;
      var HRhi;
      var RRlow;
      var RRhi;
      var SBPlow;
      var SBPhi;
      var DBPlow;
      var DBPhi;
      var age = parseFloat(document.getElementById("agechoice").value);
      if (isNaN(age)) {
        var weight = 0
      } else if (age == 0) {
        var weight = 3.5
      } else if (age == 0.5) {
        var weight = 8
      } else if (age == 8) {
        var weight = 25
      } else if (age == 9) {
        var weight = 28
      } else if (age == 10) {
        var weight = 32
      } else if (age == 11) {
        var weight = 36
      } else {
        var weight = (age + 4) * 2
      }
    
      // Observations determinant
      if (weight >= 0 && weight <= 5) {
        var HRlow = 100,
          HRhi = 160,
          RRlow = 30,
          RRhi = 50,
          SBPlow = 75,
          SBPhi = 100,
          DBPlow = 50,
          DBPhi = 70;
      } else if (weight > 5 && weight <= 9) {
        var HRlow = 80,
          HRhi = 140,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 75,
          SBPhi = 100,
          DBPlow = 50,
          DBPhi = 70;
      } else if (weight > 9 && weight <= 11) {
        var HRlow = 80,
          HRhi = 130,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 11 && weight <= 13) {
        var HRlow = 80,
          HRhi = 130,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 13 && weight <= 15) {
        var HRlow = 80,
          HRhi = 130,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 15 && weight <= 17) {
        var HRlow = 80,
          HRhi = 120,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 17 && weight <= 19) {
        var HRlow = 80,
          HRhi = 120,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 19 && weight <= 21) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 21 && weight <= 23.5) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 23.5 && weight <= 26.5) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 26.5 && weight <= 30) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 30 && weight <= 34) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 34 && weight <= 38) {
        var HRlow = 60,
          HRhi = 105,
          RRlow = 15,
          RRhi = 20,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 38 && weight <= 49) {
        var HRlow = 60,
          HRhi = 100,
          RRlow = 12,
          RRhi = 20,
          SBPlow = 80,
          SBPhi = 120,
          DBPlow = 60,
          DBPhi = 80;
      } else if (weight > 49 && weight <= 69) {
        var HRlow = 60,
          HRhi = 100,
          RRlow = 12,
          RRhi = 20,
          SBPlow = 80,
          SBPhi = 120,
          DBPlow = 60,
          DBPhi = 80;
      } else if (weight > 69 && weight <= 99) {
        var HRlow = 60,
          HRhi = 100,
          RRlow = 12,
          RRhi = 20,
          SBPlow = 80,
          SBPhi = 120,
          DBPlow = 60,
          DBPhi = 80;
      } else if (weight >= 100) {
        var HRlow = 60,
          HRhi = 100,
          RRlow = 12,
          RRhi = 20,
          SBPlow = 80,
          SBPhi = 120,
          DBPlow = 60,
          DBPhi = 80;
      }
      // Place observations into the table
      document.getElementById("HRlow").innerHTML = HRlow;
      document.getElementById("HRhi").innerHTML = HRhi;
      document.getElementById("RRlow").innerHTML = RRlow;
      document.getElementById("RRhi").innerHTML = RRhi;
      document.getElementById("SBPlow").innerHTML = SBPlow;
      document.getElementById("SBPhi").innerHTML = SBPhi;
      document.getElementById("DBPlow").innerHTML = DBPlow;
      document.getElementById("DBPhi").innerHTML = DBPhi;
    }

    <table>
    <tr>
    <td>Age</td>
    <td><select id="agechoice" onchange="agecalc()">
    <option selected="selected">
    - Select Age -
    </option>
    <option value="defaultvalue">
    </option>
    <option value="0">
    Newborn
    </option>
    <option value=".5">
    6 months
    </option>
    <option value="1">
    1 year
    </option>
    <option value="2">
    2 years
    </option>
    <option value="3">
    3 years
    </option>
    <option value="4">
    4 years
    </option>
    <option value="5">
    5 years
    </option>
    <option value="6">
    6 years
    </option>
    <option value="7">
    7 years
    </option>
    <option value="8">
    8 years
    </option>
    <option value="9">
    9 years
    </option>
    <option value="10">
    10 years
    </option>
    <option value="11">
    11 years
    </option>
    </select></td>
    </tr>
    </table>
    <table id="observations">
    <tbody>
    <tr>
    <td><strong>Lower limit</strong></td>
    <td><strong>Upper limit</strong></td>
    </tr>
    <tr>
    <td colspan="2">Heart Rate</td>
    </tr>
    <tr>
    <td id="HRlow">&nbsp;</td>
    <td id="HRhi">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">Respiratory Rate</td>
    </tr>
    <tr>
    <td id="RRlow">&nbsp;</td>
    <td id="RRhi">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">Systolic Blood Pressure</td>
    </tr>
    <tr>
    <td id="SBPlow">&nbsp;</td>
    <td id="SBPhi">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">Diastolic Blood Pressure</td>
    </tr>
    <tr>
    <td id="DBPlow">&nbsp;</td>
    <td id="DBPhi">&nbsp;</td>
    </tr>
    </tbody>
    </table>

我想过使用这样的数组：

const HRlow = [100,80,80,80,]
const HRhi = [160,140,130,130,120]
const RRlow = [30,20,20,20]

但是我不是必须在每个分组下（例如：(weight >= 0 && weight

document.getElementById("HRlow").innerHTML = HRlow[1];
document.getElementById("HRhi").innerHTML = HRhi[1];

等等，从而导致更多的代码。

我考虑过按年龄段设置数组，例如

const obs1 = [100,160,30,50,75,100,50,70];

但是我必须再次在每个分组下输入 document.getElementById 的每次迭代并选择对象。我知道有一种方法可以更有效地做到这一点（也许使用循环？）我就是不能指望它。

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以在数组数组中定义所有可能的HRlow、HRhi 等。每个子数组可以对应一个条件 - 例如，一个子数组用于weight >= 0 && weight <= 5，另一个用于weight > 5 && weight <= 9。

还有一系列条件 - 前面提到的条件。找到第一个真实条件的索引，然后使用该索引查找适当的子数组。

使要插入数据的 TD 更易于选择（例如使用特定类），然后您可以遍历已识别的子数组并插入每个子数组。例如，如果您将要填充的 TD 指定为 stat 类：

您还可以创建年龄到权重的映射，而不是开头的 if/elses。

const weightsByAge = { // or use a Map
    0: 3.5,
    0.5: 8,
    8: 25,
    9: 28,
    10: 32,
    11: 36
};
function agecalc() {
    const age = parseFloat(document.getElementById("agechoice").value);
    const weight = isNaN(age)
        ? 0
        : weightsByAge[weight] || (age + 4) * 2;
    const statConditions = [
        weight >= 0 && weight <= 5,
        weight > 5 && weight <= 9,
        // etc
    ];
    const statsByWeight = [
        /*           HRlow, HRhi, RRlow, RRhi, SBPlow, SBPhi, DBPlow, DBPhi
        /* 0-5    */ [100,  160,  30,    50,   75,     100,   50,     70],
        /* 5-9    */ [80,   140,  20,    30,   75,     100,   50,     70],
        // etc
    ];
    const trueIndex = statConditions.indexOf(true);
    const theseStats = statsByWeight[trueIndex];
    const tds = document.querySelectorAll('.stat');
    theseStats.forEach((stat, i) => {
        tds[i].textContent = stat;
    });
}

大幅削减 JS。

【讨论】：