JavaScript中返回Promise问题求助：无法获取players值

我看了你的代码，发现几个关键问题导致你没法正常访问players的值，咱们一个个来修复：

1. 低级拼写错误（最直接的原因） #

你在点击事件里写了yersObject.filter(...)——这里明显是手滑写错了变量名，应该是players.filter(...)！这个笔误直接让你跳过了之前辛苦获取到的players数据，自然没法访问它。

2. 完善filter的使用逻辑 #

现在你的filter回调是空的，既没写筛选条件，也没把筛选结果存下来。比如要根据你选的姓名、位置、年龄筛选，得这么写：

// 先把筛选条件存好，注意把年龄转成数字（下拉框value是字符串）
const [name, position, age] = [
  playerSelectName.value.trim(),
  playerSelectPosition.value,
  parseInt(playerSelectAge.value)
];

// 多条件筛选，空条件就跳过该筛选项
const filteredPlayers = players.filter(player => {
  const matchesName = name ? player.name.toLowerCase().includes(name.toLowerCase()) : true;
  const matchesPosition = position ? player.position === position : true;
  const matchesAge = !isNaN(age) ? player.age === age : true;
  return matchesName && matchesPosition && matchesAge;
});

3. 先确认players是否真的获取到了 #

可以在获取数据后加个控制台打印，验证请求是否成功：

const players = await getPlayers();
console.log('拿到的球员数据：', players);

如果控制台没输出数据，那可能是请求出了问题——我给你的代码加了try/catch和响应状态校验，能帮你快速定位错误。

4. 确保DOM元素加载完成再执行代码 #

如果你的JS代码写在<head>里，DOM元素还没渲染就执行getElementById，会拿到null。把所有代码放到DOMContentLoaded事件里，确保DOM加载完成后再执行：

修正后的完整代码 #

document.addEventListener('DOMContentLoaded', () => {
  const playerSelectName = document.getElementById('sel1');
  const playerSelectPosition = document.getElementById('sel2');
  const playerSelectAge = document.getElementById('sel3');
  const searchButton = document.getElementById('search-btn');

  async function getPlayers() {
    try {
      const response = await fetch('https://football-players-b31f2.firebaseio.com/players.json?print=pretty');
      // 校验请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      const playersObject = await response.json();
      return playersObject;
    } catch (error) {
      console.error('获取球员数据出错：', error);
      // 出错时返回空数组，避免后续代码报错
      return [];
    }
  }

  searchButton.addEventListener('click', async () => {
    const players = await getPlayers();
    
    // 先判断数据是否存在
    if (!players || players.length === 0) {
      console.log('没有获取到有效球员数据');
      return;
    }

    const [name, position, age] = [
      playerSelectName.value.trim(),
      playerSelectPosition.value,
      parseInt(playerSelectAge.value)
    ];

    const filteredPlayers = players.filter(player => {
      const matchesName = name ? player.name.toLowerCase().includes(name.toLowerCase()) : true;
      const matchesPosition = position ? player.position === position : true;
      const matchesAge = !isNaN(age) ? player.age === age : true;
      return matchesName && matchesPosition && matchesAge;
    });

    // 这里可以把筛选结果渲染到页面上，比如：
    // console.log('筛选结果：', filteredPlayers);
  });
});

内容的提问来源于stack exchange，提问作者Diego Rafael Harari