如何在保留for...in循环结构的同时按字母顺序遍历货币变量？

没问题！你可以通过先提取并排序obj.rates的键名，再基于排序后的顺序构建新对象的方式，既保留for...in循环的结构，又保证货币选项按字母顺序排列。

修改后的完整代码 #

function loadCurrency(){ 
  let from = document.getElementById('from'); 
  let to = document.getElementById('to'); 
  let xHttp = new XMLHttpRequest(); 
  xHttp.onreadystatechange = function(){ 
    if(xHttp.readyState === 4 && xHttp.status === 200) { 
      let obj = JSON.parse(this.responseText); 
      let options = ''; 
      
      // 提取货币键名并按字母排序
      const sortedKeys = Object.keys(obj.rates).sort();
      // 创建按排序顺序插入键的新对象（ES6+支持插入顺序）
      const sortedRates = {};
      sortedKeys.forEach(key => {
        sortedRates[key] = obj.rates[key];
      });
      
      // 用for...in遍历排序后的对象
      for(key in sortedRates){ 
        options += `<option>${key}</option>`; 
      } 
      from.innerHTML = options; 
      to.innerHTML = options; 
    } 
  }; 
  xHttp.open('GET','https://api.exchangeratesapi.io/latest',true); 
  xHttp.send(); 
}

关键步骤说明 #

• 提取并排序键名：使用Object.keys(obj.rates)获取所有货币代码的键数组，再调用sort()方法进行默认的字母排序（完全适配ISO货币代码这类字符串）。
• 构建排序后的对象：ES6及后续的JS规范中，对象会严格保留键的插入顺序，我们按排序后的键顺序把原数据存入新对象sortedRates，这样for...in遍历它时就会遵循字母顺序。
• 保留原有循环结构：你原本的for...in循环逻辑完全不需要改动，只需要把遍历的对象从obj.rates换成sortedRates即可。

可选优化方案（无需严格保留for...in） #

如果不需要强制使用for...in，直接遍历排序后的键数组会更简洁高效，代码如下：

// 替换原for...in循环部分
for(const key of sortedKeys){ 
  options += `<option>${key}</option>`; 
}

这种写法避免了创建额外对象，代码可读性也更强，同样能实现字母排序的效果。

内容的提问来源于stack exchange，提问作者Odyss