如何用forEach优化TMDB API电影数据的多元素渲染逻辑？

架构老林

2026-6-25

解决方案

问题核心是你每次循环都覆盖了单个元素的内容，而非追加新条目。要实现批量渲染且减少变量使用，可按以下方式修改：

1. 调整HTML结构

先添加一个容器元素，用来承载所有电影的标题与描述：

<div id="movies-container"></div>

2. 修改JavaScript代码

使用forEach遍历数据，通过模板字符串批量生成HTML片段，再插入容器中，避免冗余变量：

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization: "Bearer 你的API密钥" // 填入你的TMDB密钥
  },
};

async function getTrendingFilms() {
  try {
    const response = await fetch(
      "https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc",
      options
    );

    if (!response.ok) {
      throw new Error("Could not fetch resource");
    }

    const data = await response.json();
    const results = data.results.slice(0, 6); // 仅取前6部电影，匹配原代码逻辑
    const container = document.getElementById("movies-container");

    // 用forEach遍历，直接生成每个电影的HTML结构
    results.forEach(movie => {
      container.innerHTML += `
        <div class="movie-item">
          <h3>${movie.original_title}</h3>
          <p>${movie.overview || "暂无简介"}</p>
        </div>
      `;
    });

    // 性能优化方案：一次性拼接所有HTML再插入（减少DOM操作次数）
    // const moviesHtml = results.map(movie => `
    //   <div class="movie-item">
    //     <h3>${movie.original_title}</h3>
    //     <p>${movie.overview || "暂无简介"}</p>
    //   </div>
    // `).join('');
    // container.innerHTML = moviesHtml;

  } catch (err) {
    console.error(err);
  }
}

getTrendingFilms();