使用PokeAPI获取宝可梦1级习得招式的JS代码问题排查

原代码问题分析 #

第一种写法（map）的问题 #

你用map遍历招式时，不符合条件的项会返回undefined，后续join(', ')会把这些undefined转成空字符串，最终就出现了一串多余的逗号。比如原数组里有10个招式，只有2个符合条件，剩下8个是undefined，join后就变成tackle, tail-whip, , , , , , , , 。

第二种写法（forEach）的问题 #

forEach方法本身没有返回值，所以直接把它赋值给moves字段，结果就是undefined。而且你在map回调里尝试往userPokemonData里push值也是错误的——此时userPokemonData还在创建过程中，根本不存在这个变量。

正确实现方式 #

先通过filter筛选出1级习得的招式，再用map提取招式名称，最后按需处理（如果要字符串就用join，要数组就直接保留）：

let userPokemonName = "squirtle"
const url = `https://pokeapi.co/api/v2/pokemon/${userPokemonName}`

fetch(url)
  .then(res => res.json())
  .then(data => {
    // 筛选1级习得的招式并提取名称
    const level1Moves = data.moves
      .filter(move => {
        // 注意：version_group_details是数组，需要确保至少有一个版本的习得等级是1
        return move.version_group_details.some(detail => detail.level_learned_at === 1)
      })
      .map(move => move.move.name)
      .slice(0, 10) // 可选：限制最多10个招式

    const userPokemonData = {
      name: data.name,
      id: data.id,
      type: data.types.map(type => type.type.name).join(", "),
      moves: level1Moves.join(', ') // 如果要数组就直接写level1Moves
    }

    console.log(userPokemonData)
  })
  .catch(err => console.error('请求失败:', err))

关键细节说明 #

• 用filter替代map先过滤符合条件的项，避免生成包含undefined的数组
• version_group_details是数组，因为同一个招式在不同版本可能习得等级不同，所以要用some检查是否存在任意一个版本的习得等级为1
• 不需要用Promise.all，因为你只请求了一个接口，直接用fetch的链式调用更简洁

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