如何在宝可梦图鉴项目中正确遍历和渲染数组数据-js教程-PHP中文网

本文讲解如何通过维护当前索引状态、优化数据结构及使用类名替代id，实现宝可梦图鉴中单个条目按序渲染与导航，避免全部数据一次性显示的问题。

本文讲解如何通过维护当前索引状态、优化数据结构及使用类名替代id，实现宝可梦图鉴中单个条目按序渲染与导航，避免全部数据一次性显示的问题。

在构建交互式宝可梦图鉴（Pokédex）时，一个常见误区是将 HTML 结构直接映射为 JavaScript 数据结构（如用 id 字符串作为字段名），或在初始化时未控制渲染范围，导致所有宝可梦信息同时展示。要实现「开机仅显示第一只（如妙蛙种子）→ 点击按钮切换下一只」的预期行为，关键在于三点：扁平化数据建模、状态化索引管理、按需 DOM 渲染。

✅ 重构数据结构：扁平、语义化、可扩展

原始代码中嵌套了 dexInfo 数组，且字段名混杂 CSS 类名（如 'grass-one'），不利于逻辑处理。推荐采用简洁、自解释的 JSON 结构：

const pokedex = [{
  id: 1,
  name: 'Bulbasaur',
  species: 'Seed Pokemon',
  height: 0.7,   // 米
  weight: 6.9,   // 千克
  description: 'A strange seed was planted on its back at birth...',
  types: ['grass', 'poison']
}, {
  id: 2,
  name: 'Ivysaur',
  species: 'Seed Pokemon',
  height: 1.0,
  weight: 13.0,
  description: 'When the bulb on its back grows large...',
  types: ['grass', 'poison']
}];

? 优势：types 使用字符串数组统一表示；id 和 name 直观可读；单位标准化便于后续转换（如米→英尺）。

✅ 维护当前状态：用 currentIndex 控制显示位置

不要依赖循环遍历整个数组来“显示全部”，而应定义一个全局变量跟踪当前激活项：

let currentIndex = 0;
const entry = document.querySelector('.pkmn-entry'); // 唯一内容容器

所有交互（如“上一只”“下一只”）仅修改 currentIndex，再调用 render() 刷新视图：

宝可梦精灵球背景动画特效

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

下载

function navigate(button) {
  const offset = button.dataset.direction === 'prev' ? -1 : 1;
  // 循环切换：0 → 1 → 2 → 0 → …
  currentIndex = (currentIndex + offset + pokedex.length) % pokedex.length;
  render();
}

该写法确保索引始终在 [0, pokedex.length) 范围内，避免越界错误。

✅ 按需渲染：精准更新 DOM 元素内容

render() 函数负责将当前宝可梦数据注入对应 DOM 节点。它不创建新元素，只更新已有 .class 选择器下的内容：

function render() {
  const p = pokedex[currentIndex];

  entry.querySelector('.pkmn-img').src = `images/pokemon/${p.id.toString().padStart(3, '0')}-${p.name.toLowerCase()}.png`;
  entry.querySelector('.pkmn-no').textContent = p.id.toString().padStart(3, '0');
  entry.querySelector('.pkmn-name').textContent = p.name;
  entry.querySelector('.pkmn-specs').innerHTML = `
    Species: ${p.species}<br>
    Height: ${metersToFeet(p.height)}<br>
    Weight: ${round(kgToLbs(p.weight), 1)} lbs
  `;
  entry.querySelector('.pkmn-desc').textContent = p.description;
  entry.querySelector('.pkmn-types').innerHTML = p.types
    .map(type => `<div class="type ${type}">${capitalize(type)}</div>`)
    .join('');
}

⚠️ 注意事项：