如何使用sort()实现URL返回列表的A-D首字母下拉菜单筛选

先纠正你的误区：你不需要用到sort()方法，该接口返回的犬种列表本身已经按字母顺序排序完成，你只需要实现首字母匹配筛选逻辑即可，以下是完整可运行的实现代码：

完整HTML代码 #

<!-- 你提供的下拉菜单 -->
<select id="breed-dropdown" name="select-breed">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
  <option value="d">d</option>
</select>
<!-- 新增用来展示筛选结果的容器 -->
<div id="breed-result"></div>

JavaScript逻辑代码 #

// 存储全量犬种数据
let allBreeds = [];
const breedDropdown = document.getElementById('breed-dropdown');
const resultBox = document.getElementById('breed-result');

// 请求接口获取犬种列表
fetch('https://dog.ceo/api/breeds/list/all')
  .then(response => response.json())
  .then(apiData => {
    // 提取接口返回的所有犬种名称存入数组
    allBreeds = Object.keys(apiData.message);
    // 页面加载默认展示a开头的犬种
    filterBreedByLetter('a');
  })
  .catch(error => console.error('数据加载失败：', error));

// 按首字母筛选犬种的方法
function filterBreedByLetter(targetLetter) {
  // 筛选首字母匹配的犬种，统一转小写避免大小写匹配问题
  const matchedBreeds = allBreeds.filter(breed => breed[0].toLowerCase() === targetLetter.toLowerCase());
  // 渲染结果到页面
  resultBox.innerHTML = `
    <h4>${targetLetter.toUpperCase()}开头的犬种：</h4>
    <ul>
      ${matchedBreeds.map(item => `<li>${item}</li>`).join('')}
    </ul>
  `;
}

// 监听下拉框选择事件
breedDropdown.addEventListener('change', function(e) {
  const selectedLetter = e.target.value;
  filterBreedByLetter(selectedLetter);
});

逻辑说明 #

• 首先通过fetch请求接口拿到全量犬种数据，提取所有犬种名称存为数组备用
• 给下拉菜单绑定change事件，每次选择时拿到当前选中的字母
• 用数组的filter方法遍历全量犬种数组，匹配首字母和选中字母一致的条目
• 如果你后续用到乱序的数据源需要排序，只需要在筛选后加一行matchedBreeds.sort()即可，默认按字母升序排列

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