如何遍历模板字面量员工数组，输出营收最高及最低的3名员工

第一步：修改HTML结构 #

替换页面中原有卡片代码，新增两个对应功能的展示容器：

<!-- 营收最高3名员工卡片 start -->
<div id="top-3" class="card mt-5">
  <div class="card-content">
    <h5 class="title is-5">营收最高3名员工</h5>
    <div id="top-3-content" class="content columns is-multiline">
      <!-- JS渲染内容将插入此处 -->
    </div>
  </div>
</div>
<!-- 营收最高3名员工卡片 end -->

<!-- 营收最低3名员工卡片 start -->
<div id="bottom-3" class="card mt-5">
  <div class="card-content">
    <h5 class="title is-5">绩效最差3名员工</h5>
    <div id="bottom-3-content" class="content columns is-multiline">
      <!-- JS渲染内容将插入此处 -->
    </div>
  </div>
</div>
<!-- 营收最低3名员工卡片 end -->

第二步：修复并更新JS逻辑 #

首先注意你现有employeeModule.js代码中的立即执行函数缺了执行括号，需要修正为const EmployeeModule = (function(){...})()，否则调用方法会报错。
之后替换原有单员工渲染逻辑，新增排序批量渲染代码：

// 公共方法：生成单个员工的展示HTML片段
const generateEmployeeHtml = (employee) => {
  return `
    <div class="column is-one-third">
      <img src="images/employee-images/${employee.img}" width="80%" class="is-horizontal-center" alt="员工${employee.name}头像">
      <h6 class="title is-6 has-text-centered mt-3">${employee.name}</h6>
      <div class="columns ml-2 mr-2">
        <div class="column has-text-centered">
          <p class="is-size-7">职位</p> 
          <p>${employee.position}</p>
        </div>
        <div class="column has-text-centered">
          <p class="is-size-7">当月营收</p> 
          <p>${employee.revenue}</p>
        </div>
      </div>
    </div>
  `
}

// 渲染营收排名列表
const renderRevenueRank = () => {
  // 浅拷贝原始数组避免污染数据源
  const allEmployees = [...EmployeeModule.getAll()]
  // 营收降序排序取前3
  const top3 = allEmployees.sort((a,b) => b.revenue - a.revenue).slice(0,3)
  // 营收升序排序取前3
  const bottom3 = allEmployees.sort((a,b) => a.revenue - b.revenue).slice(0,3)

  // 分别渲染到对应容器
  document.getElementById('top-3-content').innerHTML = top3.map(emp => generateEmployeeHtml(emp)).join('')
  document.getElementById('bottom-3-content').innerHTML = bottom3.map(emp => generateEmployeeHtml(emp)).join('')
}

// 页面加载完成后执行渲染
document.addEventListener('DOMContentLoaded', renderRevenueRank)

补充说明 #

• 代码复用了Bulma的is-one-third栅格类实现一行展示3个员工卡片，可根据设计需求调整列宽类
• 排序前做了数组浅拷贝处理，不会修改EmployeeModule中的原始员工数据
• 抽离了公共的HTML生成方法，后续调整员工卡片样式仅需修改generateEmployeeHtml函数即可

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