首次调用哈利波特API如何简化图片展示逻辑及实现去重、角色过滤功能

一、现有重复逻辑优化方案 #

你当前代码的核心问题是重复定义了8个功能完全一致的函数，仅操作的DOM id不同，通过循环+参数化即可大幅简化：

• 不需要单独定义8个display函数，仅通过索引拼接id即可批量赋值
• 优化后的基础代码如下：

// API
const url = "http://hp-api.herokuapp.com/api/characters";

fetch(url)
.then(response => response.json())
.then(data => {
  // 循环1-8批量赋值
  for(let i = 1; i <= 8; i++) {
    document.getElementById(`image${i}`).src = data[i].image;
  }
})
.catch(error => console.log("Error: ", error));

直接删除原来8个重复的display函数即可，功能和原有实现完全一致，代码量减少80%以上。

二、随机无重复图片实现方案 #

不需要做复杂的重复检测，直接用Fisher-Yates洗牌算法打乱有效角色数组后取前8个，天然保证无重复，执行效率更高：
注意首先要过滤掉没有image字段的无效角色（该API部分角色没有返回图片地址）

// 数组洗牌函数
function shuffleArray(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

const url = "http://hp-api.herokuapp.com/api/characters";
fetch(url)
.then(response => response.json())
.then(data => {
  // 先过滤出有有效图片的角色
  const validCharacters = data.filter(item => item.image && item.image.trim() !== '');
  // 打乱数组顺序
  const shuffled = shuffleArray(validCharacters);
  // 取前8个赋值给对应img标签
  for(let i = 1; i <= 8; i++) {
    document.getElementById(`image${i}`).src = shuffled[i-1].image;
  }
})
.catch(error => console.log("Error: ", error));

三、隐藏特定角色的实现方案 #

可以用.style.display = 'none'实现，但这属于兜底方案，最优方案是提前在数据层过滤，根本不渲染不符合要求的角色，性能更高、逻辑更清晰：
比如你要隐藏名字为「Lord Voldemort」的角色，只需要在过滤阶段加判断条件即可：

// 过滤有有效图片、且不是要排除的角色
const validCharacters = data.filter(item => {
  return item.image && item.image.trim() !== '' && item.name !== 'Lord Voldemort';
});

如果是需要在渲染后动态切换显示/隐藏，更推荐用CSS类控制，比直接修改style属性可维护性更强：

.hidden {
  display: none !important;
}

需要隐藏时给对应img加hidden类，需要显示时移除类即可。

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