iOS端Safari浏览器HTML select元素仅显示单个选项问题排查求助

看起来你遇到了Safari下select选项渲染异常的问题，先帮你拆解下：async/await语法本身不是问题——现代Safari（iOS 10.3及以上）完全支持async/await，而且你的代码里是顺序循环fetch，逻辑上不会导致数据丢失或渲染异常。问题大概率出在其他细节上，咱们一步步看：

最可能的原因：Safari的日期解析行为差异 #

你的代码里用了这段逻辑生成gameDate作为对象key：

gameDate = (new Date(playlist.slice(playlist.indexOf('(')+1, playlist.indexOf(')'))).getTime())/10000;

Safari对非标准日期字符串的解析比Chrome/Edge严格得多：

• 如果从playlist里截取的日期格式不是ISO 8601标准（比如YYYY-MM-DD、YYYY-MM-DDTHH:mm:ss），比如是MM/DD/YYYY或者May 20, 2024这种格式，Safari可能返回Invalid Date，此时getTime()会得到NaN。
• 当NaN作为对象的key时，所有后续的游戏数据都会覆盖同一个NaN键，最终games对象里只会剩下最后一条被处理的数据（也就是你看到的第4款游戏）。

验证方法 #

在readGames函数最后添加控制台打印，对比Chrome和Safari的输出：

console.log('games对象内容:', games);
console.log('游戏数量:', Object.keys(games).length);

如果Safari里games的键数量远少于Chrome，那就是日期解析的锅。

其他可能的排查点 #

1. select元素的CSS问题：检查是否给gamesSelect设置了固定高度、overflow: hidden或者其他限制显示的样式，导致看起来只有一个选项（下拉后可能还有其他选项）。
2. 对象key的排序问题：因为gameDate是数字类型，JS会按数字顺序排序对象的键，而不是插入顺序。这不会导致选项消失，但会改变显示顺序——不过你说只显示一个选项，这个可能性较低。
3. playlist字符串的截取异常：如果某些playlist字符串里没有(或)，slice会返回空字符串，同样会导致new Date()生成无效日期，最终key重复。

解决方案 #

1. 修复日期解析逻辑：
   • 确保从playlist中截取的日期字符串是Safari能正确解析的标准格式，比如手动将非标准格式转换为ISO格式。
   • 或者手动拆分日期的年、月、日部分，用new Date(year, monthIndex, day)的方式创建日期（注意月份是从0开始的）。比如：

     // 假设截取的日期是"2024-05-20"
     const dateStr = playlist.slice(playlist.indexOf('(')+1, playlist.indexOf(')'));
     const [year, month, day] = dateStr.split('-');
     const gameDate = (new Date(year, month - 1, day).getTime())/10000;
     

2. 避免用数字/日期作为对象key：如果不需要按日期排序，可以用其他唯一标识（比如playlist本身或者JSON里的其他唯一字段）作为games的key，避免日期解析带来的问题。

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