使用JS开发Pokedex调用PokeAPI时多类型宝可梦显示问题求助

错误原因 #

你遇到的报错核心是：当宝可梦只有单类型时，json.types[1]本身不存在（值为undefined），直接链式访问.type.name会触发「Cannot read properties of undefined」错误。同时你写的判断逻辑if (json.types[1].type.name !== 'undefined')存在两个问题：一是还没判断json.types[1]是否存在就直接访问属性，二是undefined是JavaScript原始值，不是字符串'undefined'，判断条件完全不成立。

解决方案 #

推荐两种简洁的处理方式，自动适配单/双类型的展示需求：

方式1：数组映射+拼接（更简洁）

利用map提取所有类型名称，再用join拼接成字符串，不管是1个还是多个类型都能正常处理：

.then(function(json) {
    nome.innerText = json.name;
    // 提取所有类型的名称
    const typeNames = json.types.map(item => item.type.name);
    // 用斜杠分隔类型（可换成逗号或其他符号）
    type.innerText = typeNames.join(' / ');
    imagem.src = json.sprites.front_default;
})

方式2：分步判断（更直观，适合新手理解）

先设置第一个类型，再判断是否存在第二个类型，存在则追加到文本中：

.then(function(json) {
    nome.innerText = json.name;
    // 初始化类型文本为第一个类型
    let displayText = json.types[0].type.name;
    // 检查是否有第二个类型（直接判断json.types[1]是否存在）
    if (json.types[1]) {
        displayText += ' / ' + json.types[1].type.name;
    }
    type.innerText = displayText;
    imagem.src = json.sprites.front_default;
})

关键注意点 #

• 访问嵌套属性前，一定要先确认上层对象是否存在，避免「undefined访问属性」的报错；
• 区分JavaScript原始值undefined和字符串'undefined'，不要用字符串去判断原始值。

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