JavaScript对象属性匹配优化：避免重复代码实现剧集分类展示

核心思路：用配置化统一管理流派与剧集的映射 #

把重复的type参数和对应剧集的关系抽成配置结构，通过遍历配置批量处理，不用手动三次调用函数。数组嵌套对象是非常合适的选择——它天然支持遍历，扩展性极强，后续新增流派只需在配置里加一项即可，无需修改业务逻辑。

具体实现步骤 #

1. 定义配置数组
   将所有需要匹配的流派和对应剧集数据存入数组，每个元素包含type（流派标识）和episodes（对应剧集列表）：

// 配置数组：每个元素对应一组流派-剧集的映射
const genreEpisodeConfigs = [
  { type: 'action', episodes: actionEpisodes },
  { type: 'comedy', episodes: comedyEpisodes },
  { type: 'drama', episodes: dramaEpisodes }
];

2. 抽离通用渲染函数
   把你之前重复写的三段代码里的展示逻辑，提炼成一个通用函数，接收type和episodes作为参数：

function renderGenreEpisodes(type, episodes) {
  // 这里替换成你实际的展示逻辑：比如生成DOM结构、渲染列表等
  const container = document.getElementById(`${type}-section`);
  container.innerHTML = episodes.map(ep => `
    <div class="episode-card">
      <h3>${ep.title}</h3>
      <p>${ep.description}</p>
    </div>
  `).join('');
}

3. 批量处理所有流派
   遍历配置数组，自动调用通用函数完成所有流派的剧集渲染：

// 遍历配置，自动匹配并渲染所有流派的剧集
genreEpisodeConfigs.forEach(config => {
  renderGenreEpisodes(config.type, config.episodes);
});

适配不同原始数据结构的扩展 #

如果你的原始剧集数据是按流派分类的大对象（比如allEpisodes），可以直接基于这个对象生成配置数组，无需手动编写每个流派项：

// 假设原始数据是按type分类的对象
const allEpisodes = {
  action: [{ title: '动作剧集1' }, ...],
  comedy: [{ title: '喜剧剧集1' }, ...],
  drama: [{ title: '剧情剧集1' }, ...]
};

// 自动生成配置数组
const genreEpisodeConfigs = Object.entries(allEpisodes).map(([type, episodes]) => ({
  type,
  episodes
}));

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