Javascript 如何从一个数组中移动对象并将其系统地添加到多个数组中

我有一个主要的数组：

const mainArray = ["user1","user2","user3","user4","user5","user6","user7"]

我想弹出数组mainArray[0]的第一个索引（）并将其放入一个新数组中 常量组1=[]

但是，组的数量（新的空数组）是由用户输入动态设置的

然后如何循环这些组并从mainArray添加，直到为空？
例子： 用户输入3组

group1= ["user1","user4","user7"]
group2= ["user2","user5"]
group3= ["user3","user6"]

或4组

group1= ["user1","user5"]
group2= ["user2","user6"]
group3= ["user3","user7"]
group4= ["user4"]

因此，每次按下按钮时，它一次只接收一个用户并将其分配给一个组。

这是学校项目的一部分。（随机团队生成器）。 我已经设法动态地获取用户名user1的用户输入。 然后我将它们洗牌，现在只需分配给这些组。 我确实看到了如何从一个数组移动到另一个数组的代码，但没有看到可以更改组数量的多个组

试图复制这个想法=。 使用普通Javascript

以下是我当前的代码（不太好看）-只是想了解我在上面发布的概念：

const person=document.getElementById（“名称输入”）；
const mainList=document.querySelector（“.main name list”）；
//将人员添加到主列表
函数addPerson（）{
让newPerson=person.value；
如果（person.value！==“”）{
const li=document.createElement（“li”）；
const span=document.createElement（“span”）；
li.className=“列出人员姓名”；
span.className=“人名”；
appendChild（document.createTextNode（`${newPerson}`））；
李.儿童（span）；
li.addEventListener（“单击”，函数（e）{
e、 target.remove（）；
});
主列表。附加子项（li）；
//清晰输入
person.value=“”；
}否则{
警告（“请添加名称”）；
}
}

li{
边框：灰色1px实心；
}
保险商实验室{
列表样式类型：无；
填充：0；/*删除填充*/
边距：0；/*删除边距*/
}
.个人主要名单{
边框：蓝色2px实心；
宽度：500px；
保证金：0自动；
}
跨度{
光标：指针；
}
.分配按钮{
保证金：0自动；
}

随机群发生器

添加
设置
总人数
0
主列表
分配
清除所有





这是一个虚拟的待办事项



将随机的人分配到组中
把所有的学生随机分配到小组


第一组