如何避免在javascript for循环中重复代码？

我制作了一个包含两个下拉菜单的表单：

 <select id="selectAccountCurrency"></select>

这是一些带有字段集和select标记的html代码：

<fieldset>
    <label for="txtAmount">Amount: </label>
    <input type="text" id="txtAmount">
    <label for="selectCurrencyType"> in </label>
    <select name="Valutatype" id="selectCurrencyType"></select>
</fieldset>

数量：
在里面

及

货币：

您只需使用一个for循环，然后

克隆
在插入第二个下拉列表之前创建的
newOption


函数loadAllCurrencyKeys（）{
var keys=Object.keys（ECurrencyTypes）；
对于（var index=0；index}
之所以有第二个循环，是因为您希望向两个
选择项添加相同的选项，但它们必须是两个不同的HTML元素

只使用一个循环，克隆元素，然后将一个附加到第一个select，将克隆的一个附加到另一个select，因此您只有一个循环，它们将是两个不同的HTML元素，而不是同一个：

function loadAllCurrencyKeys() {
  var keys = Object.keys(ECurrencyTypes);
  for (var index = 0; index < keys.length; index++) {
      var currencyKey = keys[index];
      var newOption = document.createElement("option");
      newOption.value = currencyKey;
      newOption.text = ECurrencyTypes[currencyKey].name;
      selectCurrencyType.options.add(newOption);
      selectAccountCurrency.options.add(newOption.clone(true)); // <- see the .clone
  }
}

函数loadAllCurrencyKeys（）{
var keys=Object.keys（ECurrencyTypes）；
对于（var index=0；index如果下拉列表值不同，请选择AccountCurrency.options.add（newOption.clone（true））；//

function loadAllCurrencyKeys(data, select) {
      var keys = Object.keys(data);
      for (var index = 0; index < keys.length; index++) {
          var currencyKey = keys[index];
          var newOption = document.createElement("option");
          newOption.value = currencyKey;
          newOption.text = ECurrencyTypes[currencyKey].name;
          select.options.add(newOption);
      }
    }

如果两个下拉列表的下拉列表值相同，则可以在for循环中硬编码下拉列表元素

selectCurrencyType.options.add(newOption);
selectAccountCurrency.options.add(newOption);

所有其他答案似乎都是正确的，但您可以通过在循环中使用and来减少代码的冗长程度：

如果有两个以上的
元素，也可以通过将它们传递给函数来迭代它们：

function loadAllCurrencyKeys() {
  var keys = Object.keys(ECurrencyTypes);
  for (var index = 0; index < keys.length; index++) {
      var currencyKey = keys[index];
      var newOption = document.createElement("option");
      newOption.value = currencyKey;
      newOption.text = ECurrencyTypes[currencyKey].name;
      selectCurrencyType.options.add(newOption);
  }

for (var index = 0; index < keys.length; index++) {
      var currencyKey = keys[index];
      var newOption = document.createElement("option");
      newOption.value = currencyKey;
      newOption.text = ECurrencyTypes[currencyKey].name;
      selectAccountCurrency.options.add(newOption);
  }
}

function loadAllCurrencyKeys(...selects) {
  for (const [key, value] of Object.entries(ECurrencyTypes)) {
    let newOption = document.createElement("option");
    newOption.value = key;
    newOption.text = value;

    for (const select of selects) {
      select.options.add(newOption);
      newOption = newOption.clone(true);
    }
  }
}

loadAllCurrencyKeys(selectCurrencyType, selectAccountCurrency);

唯一的缺点是，
被克隆的次数超过了每种货币类型所需的次数，尽管这很可能是微不足道的开销。
您的代码有效吗？如果有效，这将是一个更好的问题，为什么不将此行置于
selectAccountCurrency.options.add（newOption）中；
在
下选择CurrencyType.options.add（新选项）；
然后删除第二个循环？@第四只鸟正要说，整个第二个循环不是needed@Thefourthbird因为DOM会在将元素放入第二个select时从第一个select的选项中删除该元素啊，你当然可以克隆它。谢谢你的回答和努力。我只是无法获得下拉菜单to同时出现在两个位置。要么菜单只出现在一个位置，要么大部分选项消失，我只剩下“Norske kroner”。我希望两个选择字段提供相同的选项，最好从
var ECurrencyTypes
获取选项。
function loadAllCurrencyKeys(data, select) {
      var keys = Object.keys(data);
      for (var index = 0; index < keys.length; index++) {
          var currencyKey = keys[index];
          var newOption = document.createElement("option");
          newOption.value = currencyKey;
          newOption.text = ECurrencyTypes[currencyKey].name;
          select.options.add(newOption);
      }
    }

loadAllCurrencyKeys(ECurrencyTypes, selectCurrencyType);
loadAllCurrencyKeys(ECurrencyTypes, selectAccountCurrency);

selectCurrencyType.options.add(newOption);
selectAccountCurrency.options.add(newOption);

function loadAllCurrencyKeys() {
  for (const [key, value] of Object.entries(ECurrencyTypes)) {
    const newOption = document.createElement("option");
    newOption.value = key;
    newOption.text = value;
    selectCurrencyType.options.add(newOption);
    selectAccountCurrency.options.add(newOption.clone(true));
  }
}

function loadAllCurrencyKeys(...selects) {
  for (const [key, value] of Object.entries(ECurrencyTypes)) {
    let newOption = document.createElement("option");
    newOption.value = key;
    newOption.text = value;

    for (const select of selects) {
      select.options.add(newOption);
      newOption = newOption.clone(true);
    }
  }
}

loadAllCurrencyKeys(selectCurrencyType, selectAccountCurrency);