如何在 Pokédex 中正确显示多类型宝可梦的属性-js教程-PHP中文网

如何在 Pokédex 中正确显示多类型宝可梦的属性

本文详解如何用 JavaScript 安全处理 PokéAPI 返回的宝可梦类型数据，避免因访问 types[1] 导致的 Cannot read property 'type' of undefined 错误，并提供简洁、健壮的类型拼接方案。

本文详解如何用 javascript 安全处理 pokéapi 返回的宝可梦类型数据，避免因访问 `types[1]` 导致的 `cannot read property 'type' of undefined` 错误，并提供简洁、健壮的类型拼接方案。

在使用 PokéAPI 构建 Pokédex 时，宝可梦的类型信息以数组形式返回（如 json.types），单类型宝可梦仅含一个对象，双类型则含两个。初学者常直接硬编码 json.types[0] 和 json.types[1]，但未做存在性校验，导致运行时错误：当 json.types[1] 为 undefined 时，再访问 .type.name 就会抛出 TypeError。

关键误区有三点：

❌ 错误地对 json.types[1].type.name 做条件判断（此时已发生错误）；
❌ 使用字符串 'undefined' 而非原始值 undefined 进行比较；
❌ 即使判断成功，也用新类型覆盖旧类型，而非并列显示（如“Fire, Flying”）。

✅ 正确做法是：先确保数组索引安全，再统一聚合所有类型名称。推荐使用 Array.prototype.map() + join()，语义清晰且天然兼容任意数量类型（包括未来可能的三类型宝可梦）：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

.then(json => {
    nome.innerText = json.name;
    // 安全提取全部类型名，并用逗号分隔
    type.innerText = json.types
        .map(typeObj => typeObj.type.name)
        .join(', ');
    imagem.src = json.sprites.front_default;
});

该写法无需 if 判断，自动适配 types 数组长度（1 或 2+），且代码简洁、可读性强。若需首字母大写或本地化（如中文类型名），可在 map 回调中进一步处理。

⚠️ 注意事项：