确保JavaScript中洗牌后的第一个元素与前一个洗牌中的最后一个元素不同

这把小提琴说明了我的问题：

我希望确保每次用户单击按钮时，都会显示数组中的随机元素。问题是，有时在执行新的洗牌时，新洗牌数组中的第一个元素与先前洗牌数组中的最后一个元素相同。在这些情况下，当用户单击按钮时，会显示相同的元素。然后，用户必须再次（或多次）单击该按钮以显示不同的元素。我想避免这种情况

如果第一个元素等于最后一个元素，我尝试引入if语句来再次洗牌，但这似乎不起作用

非常感谢你的帮助

HTML代码：

    <div id="container">
        <button id="clickHere">Click here to pick a random element from the array</button>
        <div id="resultDiv"></div>
    </div><!-- container -->

单击此处从数组中拾取随机元素

JavaScript代码：

/* define the array with a list of elements */
var arrayList = [
"1st element in array</br>",
"2nd element in array</br>",
"3rd element in array</br>",
];

/* define the function to shuffle the array */
function shuffleArray() {
for (var i = arrayList.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = arrayList[i];
    arrayList[i] = arrayList[j];
    arrayList[j] = temp;
}
}

/* execute the shuffleArray function */
shuffleArray();

/* button event initiating the randomiser function */
document.getElementById('clickHere').onclick = function () {
    randomiser ();
}

/* populate the resultDiv for the first time */
document.getElementById('resultDiv').innerHTML = arrayList[0];

/* define the array index value for the first click */
var arrayIndex = 1;

/* define the main function */
function randomiser () {
    document.getElementById('resultDiv').innerHTML = arrayList[arrayIndex];
    arrayIndex = (arrayIndex+1);
    if (arrayIndex>arrayList.length-1) {
        arrayIndex = 0;
        var lastArrayElement = arrayList[arrayList.length-1]
        shuffleArray();
        var firstArrayElement = arrayList[0];
        if (firstArrayElement == lastArrayElement) {
            shuffleArray();
        }
    }
}

/*使用元素列表定义数组*/
变量arrayList=[
“数组中的第一个元素
”，
“数组中的第二个元素
”，
“数组中的第三个元素
”，
];
/*定义洗牌数组的函数*/
函数shufflearlay（）{
对于（var i=arrayList.length-1；i>0；i--）{
var j=Math.floor（Math.random（）*（i+1））；
var temp=arrayList[i]；
arrayList[i]=arrayList[j]；
arrayList[j]=温度；
}
}
/*执行shuffleArray函数*/
shuffleArray（）；
/*启动随机发生器功能的按钮事件*/
document.getElementById（'clickHere'）。onclick=function（）{
随机化器（）；
}
/*第一次填充resultDiv*/
document.getElementById（'resultDiv'）。innerHTML=arrayList[0]；
/*定义第一次单击的数组索引值*/
var-arrayIndex=1；
/*定义主要功能*/
函数随机化器（）{
document.getElementById（'resultDiv'）。innerHTML=arrayList[arrayIndex]；
arrayIndex=（arrayIndex+1）；
if（arrayIndex>arrayList.length-1）{
arrayIndex=0；
var lastArrayElement=arrayList[arrayList.length-1]
shuffleArray（）；
var firstArrayElement=arrayList[0]；
if（firstArrayElement==lastArrayElement）{
shuffleArray（）；
}
}
}

编辑1:

蜘蛛猪和乔纳斯·佩尔格兰提出的两种不同的解决方案解决了我的问题

这是对第一个解决方案的更新，它使用了

push

和

shift

方法的组合：

这是第二个解决方案的更新版本，它使用

while

循环而不是

if

语句：

---

这两种解决方案都能很好地工作，但是我更喜欢的解决方案是第二种，因为我发现它更容易理解。

您只需要对代码做一点小小的更改

而不是

if (firstArrayElement == lastArrayElement) {
  shuffleArray();
}

试试这个

if (firstArrayElement == lastArrayElement) {
  arrayList.push(arrayList.shift());
}

---

你只需要对你的代码做一点小小的修改

而不是

if (firstArrayElement == lastArrayElement) {
  shuffleArray();
}

试试这个

if (firstArrayElement == lastArrayElement) {
  arrayList.push(arrayList.shift());
}

---

在查看随机生成的字符串是否与上次相同时，执行

while

而不是

if

检查

Psuedocode:

while（old==new）{randomize（）；}

这不会停止循环/随机化，直到old不是新的

---

查看随机生成的字符串是否与上次相同时，请参见更新的在执行

的同时执行
，而不是执行
if
检查

Psuedocode:
while（old==new）{randomize（）；}
这不会停止循环/随机化，直到old不是新的

请参阅更新的
不确定我是否遵循了，但是从数组中删除显示的元素是否会阻止它重新出现在其他洗牌中？如果发现洗牌数组的第一个元素与前一个数组的最后一个元素相同，为什么不交换洗牌数组的第一个和最后一个元素？您再次调用shuffleArray（）
的方法不能保证新洗牌的数组不会出现同样的问题。我不确定是否遵循了，但是，从数组中移除显示的元素不会阻止它在其他洗牌中重新出现吗？如果发现洗牌数组的第一个元素与前一个数组的最后一个元素相同，为什么不交换洗牌数组的第一个和最后一个元素呢？您再次调用shuffleArray（）

的方法不能保证新洗牌的数组不会出现相同的问题。您的建议解决了我的问题。然而，我发现它比jonas-Äppelgran提出的解决方案更难理解。我会投票支持你的答案，但是我没有足够的声誉。我的代码只是从列表中删除第一个元素，并将其添加到最后。似乎比反复洗牌更有效，直到你得到一个可接受的结果。如果你是对的，我最终可能会选择你的解决方案——它似乎更有效。我只是不知道推和换的方法。你的建议解决了我的问题。然而，我发现它比jonas-Äppelgran提出的解决方案更难理解。我会投票支持你的答案，但是我没有足够的声誉。我的代码只是从列表中删除第一个元素，并将其添加到最后。似乎比反复洗牌更有效，直到你得到一个可接受的结果。如果你是对的，我最终可能会选择你的解决方案——它似乎更有效。我只是不知道推和换的方法。你的建议解决了我的问题，对我来说很容易理解。我已经接受了这个答案。我会投票支持你的答案，但是我没有足够的声誉。你的建议解决了我的问题，对我来说很容易理解。我已经接受了这个答案。我会投票支持你的答案，但是我没有足够的声誉。