JavaScript中遍历parent_platforms获取platform.name出现多余逗号的问题求助

嘿，我帮你定位到问题的两个关键点啦：

1. 平台名称的访问路径错了：你现在写的platform => platform.name不对哦！parent_platforms里的每一项是个嵌套对象，结构大概是[{platform: {name: 'PC'}}, ...]，所以得改成item => item.platform.name才能拿到真正的平台名称。之前的错误路径会返回一堆undefined，转成字符串后就出现了多余的逗号。

2. 数组转字符串的默认格式不符合需求：就算你拿到了正确的名称数组，直接塞进模板字符串里，JS会默认用纯逗号拼接（比如PC,PlayStation,Xbox），如果你想要带空格的「PC, PlayStation, Xbox」，得用join(', ')手动指定分隔符。

修改后的代码如下，我还加了点小优化：

function showGames(games) { 
  games.forEach(game => { 
    console.log(game); 
    const card = document.createElement('div'); 
    card.classList.add('card'); 
    // 先正确提取平台名称，再拼接成目标格式
    const platformNames = game.parent_platforms.map(item => item.platform.name).join(', ');
    card.innerHTML = ` 
    <div class="card-top"> 
      <img src="${game.background_image}" alt="${game.name} Game Cover" class="card-image"> 
    </div> 
    <div class="card-bottom"> 
      <h1>${game.name}</h1> 
      <h3>Release date: ${game.released}</h3> 
      <p>Platforms: ${platformNames}</p> 
      <p>Rating: ${game.rating}</p> 
    </div> 
    `; 
    main.appendChild(card); 
  }) 
}

额外小建议： #

• 给图片加了有意义的alt文本，这样对屏幕阅读器友好，也能在图片加载失败时显示提示。
• 如果担心某些游戏没有平台数据，可以加个兜底判断：

  const platformNames = game.parent_platforms?.map(item => item.platform.name).join(', ') || 'No platforms listed';
  

  这样遇到空数据时，会显示「No platforms listed」，比空着好看多啦～

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