javascript：获取无重复数组的随机对

我有一个学生数组，应该通过点击按钮“button newPairs”随机配对。这些线对应显示在8个部分“线对一”、“线对二”。。。它包含两个跨度“studentOne”和“studentTwo”。 我在控制台中获得这些对，但不是通过单击按钮“button newPairs”，我不知道如何更改或在我的跨距中插入文本内容。有人能帮我吗？先谢谢你

var学生=['Al'、'Ma'、'Pu'、'Mi'、'Ma'、'Me'、'Ca'、'Na'、'Ja'、'Go'、'Ha'、'Fa'、'Ti'、'Fi']；
var studentOne=document.querySelector（“#student1”）；
var studentTwo=document.querySelector（“#student2”）；
如果（students.length%2！=0）{
提醒（“您必须有偶数个学生。您当前有“+students.length+”students.”）；
}否则{
var arr1=students.slice（），
arr2=students.slice（）；
sort（函数（）{return0.5-Math.random（）；}）；
sort（函数（）{return0.5-Math.random（）；}）；
while（arr1.长度）{
var student1=arr1.pop（），
student2=arr2[0]==student1？arr2.pop（）：arr2.shift（）；
$（“.button newPairs”）。单击（函数（）{
studentOne.textContent=student1；
studentTwo.textContent=student2；
});
log（student1+'与'+student2'一起工作）；
}
}

.集装箱对{
显示：网格；
网格模板列：150px 150px；
栅隙：20px；
证明内容：周围的空间；
对齐内容：居中对齐；
边缘底部：20px；
}
.一{
网格柱：1/2；
网格行：1；
}
.二{
网格柱：2/2；
网格行：1；

新的

对
新的

对
新双

我将使用splice将用户从阵列中移除，并循环遍历每个用户，如下所示：

让学生=['Al'、'Ma'、'Pu'、'Mi'、'Ma'、'Me'、'Ca'、'Na'、'Ja'、'Go'、'Ha'、'Fa'、'Ti'、'Fi']；
while（学生.长度）{
让student1=students.splice（（Math.random（）*1000）%students.length，1）
让student2=students.splice（（Math.random（）*1000）%students.length，1）
log（${student1}与${student2}一起使用）
}

我将使用splice将用户从阵列中移除，并循环遍历每个用户，如下所示：

让学生=['Al'、'Ma'、'Pu'、'Mi'、'Ma'、'Me'、'Ca'、'Na'、'Ja'、'Go'、'Ha'、'Fa'、'Ti'、'Fi']；
while（学生.长度）{
让student1=students.splice（（Math.random（）*1000）%students.length，1）
让student2=students.splice（（Math.random（）*1000）%students.length，1）
log（${student1}与${student2}一起使用）
}

我已经内联注释了。请查找带有//

//让我们把它包装成一个函数，这样我们就可以用按钮调用它了。
函数makePairs（）{
//我们将在每次运行函数之前清除列表。
$（'studentOne'）.html（'studentOne'）；
$（'#studentTwo'）.html（'Student 2'）；
var students=['Al'、'Ma'、'Pu'、'Mi'、'Ma'、'Me'、'Ca'、'Na'、'Ja'、'Go'、'Ha'、'Fa'、'Ti'、'Fi']；
//通过在变量中捕获这些节点，我们可以引用它们作为插入的目标，如下所示。
var studentOne=document.querySelector（“#studentOne”）；
var studentTwo=document.querySelector（“#studentTwo”）；
如果（students.length%2！=0）{
提醒（“您必须有偶数个学生。您当前有“+students.length+”students.”）；
}否则{
var arr1=students.slice（），
arr2=students.slice（）；
arr1.sort（函数（）{
返回0.5-Math.random（）；
});
arr2.sort（函数（）{
返回0.5-Math.random（）；
});
//这里我们创建一个函数，它将在目标节点中插入一个DOM片段
const insertFragment=（输出，目标）=>{
让el；
让fragment=document.createDocumentFragment（）；
el=document.createElement（'p'）；
el.innerText=输出
片段。附加子片段（el）；
target.appendChild（片段）；
}
while（arr1.长度）{
var student1=arr1.pop（），
student2=arr2[0]==student1？arr2.pop（）：arr2.shift（）；
//这里我们使用函数，将student1（学生）发送到studentOne（最顶端指定的目标DOM节点#studentOne）
插入片段（student1，studentOne）
插入片段（学生2，学生2）
log（student1+'与'+student2'一起工作）；
}
}
}
//在加载时运行该函数
makePairs（）；

。容器对{
显示：网格；
网格模板列：150px 150px；
栅隙：20px；
证明内容：周围的空间；
对齐内容：居中对齐；
边缘底部：20px；
}
.一{
网格柱：1/2；
网格行：1；
}
.二{
网格柱：2/2；
网格行：1；
}

学生1
学生2
新双

我已经内联注释了。请查找带有//

//让我们把它包装成一个函数，这样我们就可以用按钮调用它了。
函数makePairs（）{
//我们将在每次运行函数之前清除列表。
$（'studentOne'）.html（'studentOne'）；
$（'#studentTwo'）.html（'Student 2'）；
var students=['Al'、'Ma'、'Pu'、'Mi'、'Ma'、'Me'、'Ca'、'Na'、'Ja'、'Go'、'Ha'、'Fa'、'Ti'、'Fi']；
//通过在变量中捕获这些节点，我们可以引用它们作为插入的目标，如下所示。
var studentOne=document.querySelector（“#studentOne”）；
var studentTwo=document.querySelector（“#studentTwo”）；
如果（students.length%2！=0）{
提醒（“您必须有偶数个学生。您当前有“+students.length+”students.”）；
}否则{
var arr1=students.slice（），
arr2=students.slice（）；
arr1.sort（函数（）{
返回0.5-Math.random（）；
});
arr2.sort（函数（）{
返回0.5-Math.random（）；
});
//这里我们创建一个函数，它将插入一个DOM框架