Как избежать повторения кода в цикле javascript для?

Question

Я сделал форму с двумя выпадающими меню:

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

и

 <select name="Valutatype" id="selectCurrencyType"></select>

Раскрывающиеся меню заполняются различными валютами с помощью этой функции:

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);
  }
}

Есть ли способ сделать второй цикл более коротким? Кажется, там много повторений.

Дополнительная информация: Вот объект, который я пытаюсь перечислить в обоих выпадающих меню одновременно:

  var ECurrencyTypes = {
NOK: {value:1.00000, name: "Norske kroner", denomination: "kr"},
EUR: {value:0.10733, name: "Europeiske euro", denomination: "€"},
USD: {value:0.12652, name: "United States dollar", denomination: "$"},
GBP: {value:0.09550, name: "Pound sterling", denomination: "£"},
INR: {value:8.18624, name: "Indiske rupee", denomination: "र"},
AUD: {value:0.16129, name: "Australienske dollar", denomination: "A$"},
PHP: {value:6.48595, name: "Filippinske peso", denomination: "₱"},
SEK: {value:1.02580, name: "Svenske kroner", denomination: "kr"},
CAD: {value:0.15841, name: "Canadiske dollar", denomination: "C$"},
THB: {value:4.18410, name: "Thai baht", denomination: "฿"}
};

А вот HTML-код с наборами полей и тегами выбора:

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

и

<fieldset>
    <label for="selectAccountCurrency">Currency:</label>
    <select id="selectAccountCurrency"></select>
</fieldset>

Answer 1

Все остальные ответы кажутся правильными, но вы можете сделать свой код немного менее многословным, используя Object.entries() и деструктурирующий синтаксис в for...of петля:

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));
  }
}

И если у вас более двух <select> элементов, вы можете итерировать их, передавая их функции:

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);

Единственным недостатком является то, что <option> клонируется на один раз больше, чем необходимо для каждого типа валюты, хотя это, скорее всего, будет незначительными накладными расходами.

Answer 2

У вас есть второй цикл, просто потому что вы хотите добавить одну и ту же опцию для обоих select, но они должны быть двумя разными элементами HTML.

Используйте только один цикл, клонируйте элемент, а затем добавьте один к первому выбору, а клонированный - к другому, чтобы у вас был только один цикл, и они будут двумя разными элементами 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
  }
}

Answer 3

Если выпадающие значения отличаются;

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);

И если выпадающие значения одинаковы для обоих выпадающих меню, вы можете жестко закодировать выпадающие элементы в цикле for. т.е.

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

Answer 4

Вы можете просто использовать один цикл for, а затем clone newOption, который был создан перед вставкой его во второй раскрывающийся список.

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);
    
    var clonedNewOption = newOption.clone(true);
    
    selectAccountCurrency.options.add(clonedNewOption);
  }
}