如何缩短代码或将其存储在数据文件中

Question

我正在尝试在我的网站上创建一个功能，该功能在选择下拉菜单中的项目后在输入框中打印出值。目前，我的代码有效，但它太长了。下面是我想缩短或存储在数据文件中的 JavaScript 代码。

function dropdownTip(element){

      if(element == "Methane") {
        document.getElementById("myText").value="190.6";
        document.getElementById("myText1").value="45.99";
        document.getElementById("myText2").value="0.012";
      }
      else if(element == "Ethane") {
        document.getElementById("myText").value="305.3";
        document.getElementById("myText1").value="48.72";
        document.getElementById("myText2").value="0.100";
      }
      else if(element == "Propane") {
        document.getElementById("myText").value="369.8";
        document.getElementById("myText1").value="48.48";
        document.getElementById("myText2").value="0.152";
      }
      else if(element == "n-Butane") {
        document.getElementById("myText").value="425.1";
        document.getElementById("myText1").value="37.96";
        document.getElementById("myText2").value="0.200";
      }
      else if(element == "n-Pentane") {
        document.getElementById("myText").value="469.7";
        document.getElementById("myText1").value="33.70";
        document.getElementById("myText2").value="0.252";
      }
      else if(element == "n-Hexane") {
        document.getElementById("myText").value="507.6";
        document.getElementById("myText1").value="30.25";
        document.getElementById("myText2").value="0.301";
      }
      else if(element == "n-Heptane") {
        document.getElementById("myText").value="540.2";
        document.getElementById("myText1").value="27.40";
        document.getElementById("myText2").value="0.350";
      }
      else if(element == "n-Octane") {
        document.getElementById("myText").value="568.7";
        document.getElementById("myText1").value="24.90";
        document.getElementById("myText2").value="0.400";
      }
      else if(element == "n-Nonane") {
        document.getElementById("myText").value="594.6";
        document.getElementById("myText1").value="22.90";
        document.getElementById("myText2").value="0.444";
      }
      else if(element == "n-Decane") {
        document.getElementById("myText").value="617.7";
        document.getElementById("myText1").value="21.10";
        document.getElementById("myText2").value="0.492";
      }

代码实际上比这长得多。 else if(element== "x") {} 行实际上又延长了 390 行。

Answer 1

您可以在对象数组中添加值并使用它，例如 obj[element]['text']

var obj = {
       "methane" : {"text":"190.6","text1":"45.99","text2":"0.012"},
       "eethane" : {"text":"305.3","text1":"48.72","text2":"0.100"}
}

function dropdownTip(element){
      if(element) {
      console.log(obj[element]['text'],obj[element]['text1'],obj[element]['text2']);
        /*document.getElementById("myText").value=obj[element]['text'];
        document.getElementById("myText1").value=obj[element]['text1'];
        document.getElementById("myText2").value=obj[element]['text2'];*/
        
        
      }
 }
 
 dropdownTip("methane")

Answer 2

我会使用由element 索引的对象，其值是#myText、#myText1、#myText2 值的数组：

const elementValues = {
  Methane: [190.6, 45.99, 0.012],
  Ethane: [305.3, 48.72, '0.100'], // you'll need to use strings for trailing zeros
  Propane: [369.8, 48.48, 0.152],
  'n-Butane': [425.1, 37.96, '0.200'],
  // ...
}
function dropdownTip(element){
  const possibleArr = elementValues[element];
  if (possibleArr) {
    ['myText', 'myText1', 'myText2'].forEach(
      (id, i) => document.getElementById(id).value = possibleArr[i]
    );
  }
}

您可以考虑使用类而不是 ID，这会使代码更简单：

const elementValues = {
  Methane: [190.6, 45.99, 0.012],
  Ethane: [305.3, 48.72, '0.100'], // you'll need to use strings for trailing zeros
  Propane: [369.8, 48.48, 0.152],
  'n-Butane': [425.1, 37.96, '0.200'],
  // ...
}
function dropdownTip(element){
  const possibleArr = elementValues[element];
  if (possibleArr) {
    document.querySelectorAll('.myText').forEach((elm, i) => {
      elm.value = possibleArr[i];
    });
  }
}

const elementValues = {
  Methane: [190.6, 45.99, 0.012],
  Ethane: [305.3, 48.72, '0.100'], // you'll need to use strings for trailing zeros
  Propane: [369.8, 48.48, 0.152],
  'n-Butane': [425.1, 37.96, '0.200'],
  // ...
}
function dropdownTip(element){
  const possibleArr = elementValues[element];
  if (possibleArr) {
    document.querySelectorAll('.myText').forEach((elm, i) => {
      elm.value = possibleArr[i];
    });
  }
}

<input onchange="dropdownTip(this.value)">

<br>

<input class="myText"></div>
<input class="myText"></div>
<input class="myText"></div>

如果您不喜欢括号表示法，另一种选择是编写一个长的多行字符串，然后将其转换为一个对象：

const elementValuesStr = `
Methane 190.6 45.99 0.012
Ethane 305.3 48.72, 0.100
Propane 369.8 48.48 0.152
n-Butane 425.1 37.96, 0.200
...
`;
const elementValues = elementValuesStr
  .trim()
  .split('\n')
  .reduce((a, line) => {
    const [key, ...vals] = line.match(/\S+/g);
    a[key] = vals;
    return a;
  }, {});

然后你可以使用与上面相同的代码，使用elementValues。

const elementValuesStr = `
Methane 190.6 45.99 0.012
Ethane 305.3 48.72, 0.100
Propane 369.8 48.48 0.152
n-Butane 425.1 37.96, 0.200
`;
const elementValues = elementValuesStr
  .trim()
  .split('\n')
  .reduce((a, line) => {
    const [key, ...vals] = line.match(/\S+/g);
    a[key] = vals;
    return a;
  }, {});
console.log(elementValues);