如何在Web界面展示JavaScript电影数据对象并实现按年份排序？

一、正确渲染电影标题数据 #

先在HTML中准备一个容器用于展示电影：

<div id="movieList"></div>

假设你的电影数据对象结构如下：

const movies = [
  { title: "星际穿越", year: 2014 },
  { title: "盗梦空间", year: 2010 },
  { title: "奥本海默", year: 2023 }
];

通过原生JavaScript遍历数据，创建DOM元素插入容器：

// 封装渲染函数，方便后续排序后复用
function renderMovies(movieData) {
  const movieList = document.getElementById('movieList');
  // 清空容器避免重复渲染
  movieList.innerHTML = '';
  
  movieData.forEach(movie => {
    const movieItem = document.createElement('div');
    // 提取电影标题和年份，组装成可读文本
    movieItem.textContent = `${movie.title} (${movie.year})`;
    // 可添加类名方便样式控制
    movieItem.classList.add('movie-item');
    movieList.appendChild(movieItem);
  });
}

// 页面加载完成后初始渲染
document.addEventListener('DOMContentLoaded', () => {
  renderMovies(movies);
});

如果之前的展示写法出错，大概率是直接将对象本身插入DOM（比如movieList.appendChild(movies)），这种方式无法解析对象内容，必须提取title等属性生成可读的HTML元素。

二、实现按年份排序功能 #

基于上面的渲染函数，添加排序逻辑，通过按钮触发排序：

先在HTML中添加排序按钮：

<div class="sort-controls">
  <button id="sortAsc">按年份升序</button>
  <button id="sortDesc">按年份降序</button>
</div>

然后编写排序逻辑：

// 按年份升序排序
document.getElementById('sortAsc').addEventListener('click', () => {
  // 复制原数组避免修改原始数据
  const sortedAsc = [...movies].sort((a, b) => a.year - b.year);
  renderMovies(sortedAsc);
});

// 按年份降序排序
document.getElementById('sortDesc').addEventListener('click', () => {
  const sortedDesc = [...movies].sort((a, b) => b.year - a.year);
  renderMovies(sortedDesc);
});

关键说明 #

• 使用[...movies]复制数组后再排序，防止原数据被修改
• sort方法的比较函数中，数字类型直接通过a.year - b.year实现升序，反过来就是降序
• 复用渲染函数，避免重复编写DOM操作代码

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