javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript分组抽签程序

基于JavaScript开发一个有趣的分组抽签小程序

作者：𝑺𝒉𝒊𝒉𝑯𝒔𝒊𝒏𝒈

在团队合作开发中，经常需要将团队成员分组，来完成各自的任务，而抽签的方式自然是最公平、最简单的方法之一，所以本文就来开发一个有趣的分组抽签小程序吧

前言

今天我要和大家分享一个非常有用的js算法：分组抽签。在团队合作开发中，经常需要将团队成员分组，来完成各自的任务。而抽签的方式自然是最公平、最简单的方法之一。

需求分析

在介绍具体的抽签算法之前，我们先来分析一下这个问题的需求。我们需要从团队成员列表中随机抽取若干人，并将这些人分配到不同的组中。那么，如何才能确保分组的公平性呢？

公平性的要求

首先，我们需要确保每个人只会被抽中一次，避免出现某个人被抽到多个组的情况。其次，我们需要尽可能地让每个组的人数相近，以确保各组的工作量基本相同。

算法设计思路

在满足上述需求的前提下，我们可以通过以下算法来进行分组抽签：

1.将团队成员列表随机排序。

2.根据分组的数量，计算每个组应该包含的人数，记为baseNum。

3.依次遍历团队成员列表，将每个人放入对应的组中。具体操作步骤如下：

通过以上阐述可知，核心的算法思路是要随机排序、尽量平均分组并避免同一人多次参与。现在我们开始着手编写这个算法。

开始编码

随机排序

为了实现随机排序，我们可以先将团队成员数组进行浅拷贝，然后使用Array.sort()方法来进行排序，代码如下：

function shuffle(array) {
  const arr = [...array]; // 进行浅拷贝
  for (let i = arr.length - 1; i > 0; i--) { // 遍历数组元素
    const j = Math.floor(Math.random() * (i + 1)); // 生成随机下标
    [arr[i], arr[j]] = [arr[j], arr[i]]; // 交换位置
  }
  return arr; // 返回排序后的数组
}

该方法接受一个数组作为参数，返回乱序排列之后的新数组。

尽可能平均分组

为了实现尽量平均分组，我们可以使用Math.ceil()方法来向上取整，保证每个组的人数不少于baseNum。代码如下：

const team = ['张三', '李四', '王五', '赵六', '钱七', '孙八']; // 假设有6名成员
const groupNum = 3; // 定义需要抽几组
const baseNum = Math.ceil(team.length / groupNum); // 计算每组包含的人数
console.log(baseNum); // 输出2

避免同一人多次参与

为了避免同一个人多次参与分组，我们需要给已经分配了组的成员打上已分组的标记，这样在后续循环中就可以跳过已经分配了组的成员。代码如下：

const team = ['张三', '李四', '王五', '赵六', '钱七', '孙八']; // 团队成员数组
const groupNum = 3; // 分组数
const baseNum = Math.ceil(team.length / groupNum); // 计算每组需要包含多少人
const shuffledTeam = shuffle(team); // 乱序排列团队成员 
let assignedCount = 0; // 计数器，记录已分配的人数
let groups = []; // 定义一个空数组，用来存放每个分组的成员
// 遍历随机排序后的团队成员列表，进行分组
shuffledTeam.forEach(member => {
  if (member.assigned) return; // 如果该成员已被分配，则跳过
  for (let i = 0; i < groupNum; i++) {
    const group = groups[i] || []; // 如果当前分组未定义，则将其初始值设为空数组
    if (group.length < baseNum && !group.includes(member)) { // 如果该分组未满员，并且该成员没有被分配到其他组内
      group.push(member); // 将该成员加入当前分组
      member.assigned = true; // 给该成员打上已分组标记
      assignedCount++; // 记录已分配人数
      groups[i] = group; // 将该分组重新赋值给原数组
      break; // 遍历下一个成员
    }
  }
});

在上述代码中，我们使用了一个名为assigned的属性作为已分组标记。每位成员在初始化时都未被分组，因此默认为undefined。当某位成员被分配到某个组内后，我们就会将其assigned属性设置为true，以避免重复分组。

上手练习

接下来让我们来进行一个简单的实现过程和实验，使大家更加深入理解如何实现一个前端抽签小程序。

HTML结构

首先，我们需要先创建一些基本的HTML结构，来让用户输入团队成员信息，并设定分组数量和按钮控制器：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>分组抽签小程序</title>
  <script src="main.js"></script>
</head>
<body>
  <h1>分组抽签小程序</h1>
  <form id="form">
    <div>
      <label for="members">团队成员：</label>
      <textarea id="members" name="members" placeholder="请用英文半角逗号分隔不同的成员"></textarea>
    </div>
    <div>
      <label for="groups">分组数量：</label>
      <input type="number" id="groups" name="groups" value="2" min="2">
    </div>
    <button type="submit">开始抽签</button>
  </form>
  <div id="result"></div>
</body>
</html>

JS代码

在JavaScript中，我们需要编写3个函数来实现这个小程序：一是获取关键DOM元素（getInputs），二是执行抽签操作并输出结果（drawLots），三是事件监听逻辑（handleSubmit）。代码如下：

// 获取form表单输入值的函数
function getInputs(form) {
  const members = form.members.value.trim().split(/[,\n]/).map(m => m.trim()).filter(m => m); // 转换成数组格式，并清理空格和空白行
  const groups = +form.groups.value; // 输入分组数量
  return { members, groups };
}
// 主要操作函数
function drawLots(members, groups) {
  const baseNum = Math.ceil(members.length / groups); // 计算每组包含多少成员
   const shuffledMembers = shuffle(members); // 将成员数组随机排序
  let assignedCount = 0; // 计数器，记录已分配的人数
  let result = ''; // 定义一个空字符串，用来存放抽签结果
  let groupsRes = []; // 定义一个空数组，用来存放每个分组的成员
  // 遍历随机排序后的成员列表，进行分组
  shuffledMembers.forEach(member => {
    if (member.assigned) return; // 如果该成员已被分配，则跳过
    for (let i = 0; i < groups; i++) {
      const group = groupsRes[i] || []; // 如果当前分组未定义，则将其初始值设为空数组
      if (group.length < baseNum && !group.includes(member)) { // 如果该分组未满员，并且该成员没有被分配到其他组内
        group.push(member); // 将该成员加入当前分组
        member.assigned = true; // 给该成员打上已分组标记
        assignedCount++; // 记录已分配人数
        groupsRes[i] = group; // 将该分组重新赋值给原数组
        break; // 遍历下一个成员
      }
    }
  });
  // 输出结果
  groupsRes.forEach((group, index) => {
    result += `<h3>第${index+1}组：</h3><ul>`;
    group.forEach(member => result += `<li>${member}</li>`);
    result += `</ul>`;
  });
  document.getElementById('result').innerHTML = result; // 修改DOM节点内容，将抽签结果展示给用户
}
// 监听表单提交事件
function handleSubmit(event) {
  event.preventDefault();
  const form = event.currentTarget;
  const { members, groups } = getInputs(form);
  if (members.length === 0) {
    alert('请输入团队成员！');
    return;
  }
  drawLots(members, groups);
}
document.getElementById('form').addEventListener('submit', handleSubmit); // 挂载监听函数

代码中包括了浅层的代码实现方法，只要牢记三个阶段内容，便可轻松完成这个小程序。

以上就是基于JavaScript开发一个有趣的分组抽签小程序的详细内容，更多关于JavaScript分组抽签程序的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文