如何从 PokeAPI 正确提取并显示宝可梦的类型信息（Types）-js教程-PHP中文网

如何从 PokeAPI 正确提取并显示宝可梦的类型信息（Types）

本文详解如何在 JavaScript 中解析 PokeAPI 返回的嵌套类型数组，将其转换为可读的字符串或 HTML 结构，解决 types 字段显示为 [object Object] 的常见问题。

本文详解如何在 javascript 中解析 pokeapi 返回的嵌套类型数组，将其转换为可读的字符串或 html 结构，解决 `types` 字段显示为 `[object object]` 的常见问题。

在使用 PokeAPI 构建宝可梦随机生成器时，你可能会发现 name、id 和 base_experience 等字段能直接赋值显示，但 types 字段却只渲染出 [object Object] ——这是因为 PokeAPI 中的 types 是一个对象数组，每个元素包含 slot 和嵌套的 type 对象，而 type 对象内才真正存储着 name（如 "fire"、"water"）等语义化信息。

直接访问 pokemon.types 得到的是一个数组引用，浏览器默认调用其 toString() 方法，结果就是无意义的 [object Object]。正确做法是遍历数组，提取每种类型的名称，并组合为用户友好的格式。

✅ 推荐解决方案：提取类型名并拼接为字符串

type.innerHTML = pokemon.types.map(t => t.type.name).join(', ');

这行代码做了三件事：

pokemon.types：获取类型数组（如 [{ slot: 1, type: { name: 'electric' } }, ...]）；
.map(t => t.type.name)：对每个类型对象提取 t.type.name，返回字符串数组 ['electric', 'flying']；
.join(', ')：用逗号加空格连接，生成最终显示文本："electric, flying"。

? 小提示：.map(...).join() 是处理此类嵌套数组的标准模式，简洁且兼容性好（支持所有现代浏览器及 IE11+）。

宝可梦精灵球背景动画特效
基于canvas制作全屏的精灵球掉落背景动画，卡通的宝可梦游戏背景动画特效。

下载

? 进阶优化：支持多类型样式化显示

若希望更美观地呈现多个类型（例如带颜色标签），可动态生成 <span></span> 元素：

const typeElements = pokemon.types.map(t => {
  const typeName = t.type.name;
  return `<span class="type-badge" data-type="${typeName}">${typeName}</span>`;
});
type.innerHTML = typeElements.join('');

配合 CSS 即可实现带背景色与圆角的类型标签（如火系红色、水系蓝色），大幅提升 UI 专业度。

⚠ 注意事项

始终校验数据结构：极少数宝可梦（如 unown）可能有特殊类型结构，建议添加简单防御性检查：

const typeNames = pokemon.types?.map(t => t?.type?.name)?.filter(Boolean) || [];
type.innerHTML = typeNames.length ? typeNames.join(', ') : 'Unknown';

避免直接赋值原始数组：像 type.innerHTML = pokemon.types 或 type.textContent = pokemon.types 都会触发默认 toString()，务必显式映射。
区分 textContent 与 innerHTML：若仅显示纯文本，优先用 textContent 更安全；若需插入 HTML 标签（如 <span></span>），再用 innerHTML 并确保内容可信。