JavaScript中生成带平均排名（处理平局）的员工数据排行榜-js教程-PHP中文网

JavaScript中生成带平均排名（处理平局）的员工数据排行榜

花韻仙語

发布： 2025-10-20 09:34:26

原创

943人浏览过

JavaScript中生成带平均排名（处理平局）的员工数据排行榜

本教程详细介绍了如何在javascript中对员工数据进行多维度排名，并有效处理排名中的平局情况，采用平均排名法计算。文章涵盖了从数据准备、核心排名逻辑（包括排序和平均排名计算）、将排名数据整合回原始对象，到最终生成结构清晰的html表格的全过程，旨在提供一个专业且实用的解决方案。

在数据分析和报告生成中，对数据集进行排名是一项常见任务。尤其当涉及到多个评估维度且可能出现平局时，如何准确计算并展示排名变得尤为重要。本教程将以员工数据为例，演示如何使用JavaScript实现基于多个指标的排名，并采用平均排名法（Average Rank Method）处理平局，最终将结果呈现在一个易于理解的HTML表格中。

1. 数据准备

首先，我们需要一个包含员工信息的数组。每个员工对象都包含姓名以及多个用于排名的数值型指标。

const employees = [
  {
    name: 'Budi',
    workEthic: 60,
    loanAmount: 50,
    discipline: 100,
    workExperience: 40
  },
  {
    name: 'Andi',
    workEthic: 80,
    loanAmount: 50,
    discipline: 80,
    workExperience: 40
  },
  {
    name: 'Rudi',
    workEthic: 100,
    loanAmount: 50,
    discipline: 80,
    workExperience: 40
  }
];

登录后复制

2. 核心排名计算逻辑

排名过程主要分为两个阶段：为每个指标创建独立的排名列表，然后对这些列表进行排序并计算平均排名。

2.1 初始化排名结构

我们需要一个对象来存储每个指标（如 workEthic, loanAmount 等）的排名信息。每个指标对应一个数组，数组中包含员工姓名和该指标的数值。

立即学习“Java免费学习笔记（深入）”；

const rankings = {
  workEthic: [],
  loanAmount: [],
  discipline: [],
  workExperience: []
};

// 遍历员工数据，填充排名结构
employees.forEach(employee => {
  // 排除 'name' 字段，只处理数值型指标
  Object.entries(employee).forEach(([key, value]) => {
    if (key !== 'name') {
      rankings[key].push({ name: employee.name, value: value });
    }
  });
});

登录后复制

2.2 排序与平均排名计算

这是实现排名逻辑的核心部分。对于每个指标，我们首先按值降序排序。然后，遍历排序后的列表，识别平局并计算平均排名。平均排名法指的是，如果N个元素并列，它们的排名将是它们本应占据的排名位置的平均值。例如，如果3个元素并列第2、3、4名，则它们的平均排名为 (2+3+4)/3 = 3。

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

for (const criteria in rankings) {
  // 按值降序排序
  rankings[criteria].sort((a, b) => b.value - a.value);

  let currentRank = 1; // 当前正在考察的排名
  let totalRankSum = 0; // 用于计算平局平均排名的总和
  let tieCount = 0;     // 平局元素的数量

  for (let i = 0; i < rankings[criteria].length; i++) {
    const currentEmployee = rankings[criteria][i];
    const nextEmployee = rankings[criteria][i + 1];

    // 将当前元素加入平局组
    tieCount++;
    totalRankSum += currentRank;

    // 检查是否有下一个元素且与当前元素值相等，即存在平局
    if (nextEmployee && currentEmployee.value === nextEmployee.value) {
      currentRank++; // 如果有平局，下一个元素的“理论排名”加1
    } else {
      // 平局组结束或没有平局
      const averageRank = totalRankSum / tieCount;
      // 将平均排名赋值给平局组中的所有员工
      for (let j = 0; j < tieCount; j++) {
        rankings[criteria][i - j].rank = averageRank;
      }
      // 重置平局计数和总和，准备处理下一个排名组
      currentRank++; // 下一个非平局元素的排名
      totalRankSum = 0;
      tieCount = 0;
    }
  }
}

登录后复制

3. 整合排名数据

为了方便生成表格，我们将计算出的每个指标的排名整合回原始的员工数据对象中。这样，每个员工对象将包含其所有原始指标值以及对应的排名。

const employeesWithAllRanks = employees.map(emp => {
  const newEmp = { ...emp }; // 复制原始员工数据
  for (const criteria in rankings) {
    // 从已计算的排名列表中找到当前员工在该指标下的排名
    const found = rankings[criteria].find(item => item.name === emp.name);
    if (found && typeof found.rank !== 'undefined') {
      // 将排名作为新属性添加到员工对象中，例如 workEthicRank
      newEmp[`${criteria}Rank`] = found.rank;
    }
  }
  return newEmp;
});

登录后复制

4. 生成结果表格

最后一步是将整合后的数据渲染成一个HTML表格。这个表格将清晰地展示每个员工的原始指标值及其在每个指标下的排名。

function generateRankedTable(data) {
  const table = document.createElement('table');
  table.setAttribute('border', '1'); // 添加边框以便查看
  table.style.width = '100%';
  table.style.borderCollapse = 'collapse';

  const thead = document.createElement('thead');
  const tbody = document.createElement('tbody');

  // 创建表头
  const trHeader = document.createElement('tr');
  const headers = ['No', 'Name'];
  // 动态生成指标及其排名的表头
  const firstEmployee = data[0];
  for (const key in firstEmployee) {
    if (key !== 'name') {
      if (key.endsWith('Rank')) {
        headers.push(`${key.replace('Rank', '')} (排名)`);
      } else {
        headers.push(`${key} (值)`);
      }
    }
  }

  headers.forEach(headerText => {
    const th = document.createElement('th');
    th.textContent = headerText;
    th.style.padding = '8px';
    th.style.backgroundColor = '#f2f2f2';
    th.style.textAlign = 'left';
    trHeader.appendChild(th);
  });
  thead.appendChild(trHeader);
  table.appendChild(thead);

  // 填充表格行
  data.forEach((employee, index) => {
    const tr = document.createElement('tr');

    const tdNo = document.createElement('td');
    tdNo.textContent = index + 1; // 序号
    tdNo.style.padding = '8px';
    tr.appendChild(tdNo);

    const tdName = document.createElement('td');
    tdName.textContent = employee.name;
    tdName.style.padding = '8px';
    tr.appendChild(tdName);

    // 动态添加每个指标的值和排名
    for (const key in firstEmployee) {
      if (key !== 'name') {
        const td = document.createElement('td');
        td.textContent = employee[key];
        td.style.padding = '8px';
        tr.appendChild(td);
      }
    }
    tbody.appendChild(tr);
  });
  table.appendChild(tbody);
  return table;
}

// 将生成的表格添加到页面中
document.addEventListener('DOMContentLoaded', () => {
  const rankedTable = generateRankedTable(employeesWithAllRanks);
  document.body.appendChild(rankedTable);
});

登录后复制

5. 完整代码示例

将上述所有步骤整合在一起，便构成了完整的JavaScript解决方案。

// Employee data
const employees = [
  {
    name: 'Budi',
    workEthic: 60,
    loanAmount: 50,
    discipline: 100,
    workExperience: 40
  },
  {
    name: 'Andi',
    workEthic: 80,
    loanAmount: 50,
    discipline: 80,
    workExperience: 40
  },
  {
    name: 'Rudi',
    workEthic: 100,
    loanAmount: 50,
    discipline: 80,
    workExperience: 40
  }
];

// 1. 初始化排名结构
const rankings = {
  workEthic: [],
  loanAmount: [],
  discipline: [],
  workExperience: []
};

// 2. 填充排名结构
employees.forEach(employee => {
  Object.entries(employee).forEach(([key, value]) => {
    if (key !== 'name') {
      rankings[key].push({ name: employee.name, value: value });
    }
  });
});

// 3. 排序并计算平均排名
for (const criteria in rankings) {
  rankings[criteria].sort((a, b) => b.value - a.value); // 按值降序排序

  let currentRank = 1;
  let totalRankSum = 0;
  let tieCount = 0;

  for (let i = 0; i < rankings[criteria].length; i++) {
    const currentEmployee = rankings[criteria][i];
    const nextEmployee = rankings[criteria][i + 1];

    tieCount++;
    totalRankSum += currentRank;

    if (nextEmployee && currentEmployee.value === nextEmployee.value) {
      currentRank++;
    } else {
      const averageRank = totalRankSum / tieCount;
      for (let j = 0; j < tieCount; j++) {
        rankings[criteria][i - j].rank = averageRank;
      }
      currentRank++;
      totalRankSum = 0;
      tieCount = 0;
    }
  }
}

// 4. 整合排名数据到员工对象
const employeesWithAllRanks = employees.map(

登录后复制

以上就是JavaScript中生成带平均排名（处理平局）的员工数据排行榜的详细内容，更多请关注php中文网其它相关文章！