确保 JavaScript 中 shuffle 后的第一个元素与上一次 shuffle 中的最后一个元素不相同

Question

这个 fiddle 证明了我的问题：https://jsfiddle.net/petebere/fhg84je2/

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

我尝试引入 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();
        }
    }
}

编辑 1：

1) SpiderPig 和 2) Jonas-Äppelgran 建议的两种不同解决方案解决了我的问题。

这是更新后的 fiddle，第一个解决方案结合了 push 和 shift 方法：https://jsfiddle.net/petebere/axatv0wg/

这是更新后的 fiddle 第二个解决方案，它使用 while 循环而不是 if 语句：https://jsfiddle.net/fhg84je2/2/

两种解决方案都非常有效，但我更喜欢第二种解决方案，因为我觉得它更容易理解。

Answer 1

您只需要对代码做一点小改动。

而不是

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

试试这个

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

Answer 2

在查看随机生成的字符串是否与上次相同时执行 while 而不是 if 检查。

伪代码：while (old == new) { randomize(); }这不会停止looping/randomizing直到旧的不是新的。

查看更新jsfiddle

确保 JavaScript 中 shuffle 后的第一个元素与上一次 shuffle 中的最后一个元素不相同

Make sure that the first element after the shuffle in JavaScript is not the same as the last element in the previous shuffle

javascript

arrays

if-statement

random

shuffle