javascript - JS : Random String without Repeating Same String Twice

Question

我正在尝试找出一种方法来使用纯 JS 从数组中提取随机字符串，而不会连续出现两次相同的字符串。

我正在使用随机数 (random number) 使用随机数的索引从 randomMsg 中提取随机字符串，然后将其存储在 currentMsg.

单击时，我将使用新的随机字符串重新定义 currentMsg。然后我使用 if/else 语句来查看我们的 prevMsg 是否等于 currentMsg，如果它是(它不是第一次点击)，我正在使用另一个 if/else 语句来增加或减少我们的索引，所以它返回一个唯一的字符串(anotherMsg) 到我们的 HTML 并将 prevMsg var 设置为该字符串。

否则，它将 currentMsg 返回给我们的 HTML，并将 prevMsg 设置为 currentMsg。

下面的函数:

(function message() {
    var ranNumber = Math.floor((Math.random() * 5) + 0);
    var randomMsg = [
      "string one",
      "string two",
      "string three",
      "string four",
      "string five"
    ];

    var currentMsg = randomMsg[Math.floor((Math.random() * 5) + 0)];
    var prevMsg = "";

    document.getElementById("intro").innerHTML = currentMsg;

    document.getElementById("intro").onclick = function() {
        var ranNum = Math.floor((Math.random() * 5) + 0);
        currentMsg = randomMsg[ranNum];
        if(prevMsg == currentMsg) {
            var anotherMsg = "";
            if(ranNum >= 0 && ranNum < 4) {
                anotherMsg = randomMsg[ranNum + 1];
            }
            else {
                anotherMsg = randomMsg[ranNum - 1];
            }
            document.getElementById("intro").innerHTML = anotherMsg;
            prevMsg = anotherMsg; // set prevMsg to anotherMsg
        } else {
            document.getElementById("intro").innerHTML = currentMsg;
            prevMsg = currentMsg; // set prevMsg to currentMsg
        };
    };
})();

我还设置了一个 JSFiddle here .

虽然它有效，但我现在很想知道是否有更优雅的方法来编写这样的函数。另外，我要替换整个字符串，是只替换单词(一、二、三等)更好还是一点都不重要？

感谢任何帮助。提前致谢!

Answer 1

出于可读性和通用的原因，数组应该位于函数之外>:

var msg = [
    "string one",
    "string two",
    "string three",
    "string for",
    "string five",
    "string six" /* add as many values as you want */
];

返回随机数但不是当前随机数的函数:

function randWithout(n, arr) {
    var res = [];
    for (var i = 0; i < arr.length; i += 1) {
        if (i !== n) {
            res.push(i);
        }
    }
    return res[Math.floor(Math.random() * (arr.length - 1))];
}

Arr 必须是函数的参数，因为需要数组的长度。进一步返回随机数的函数:

function randNumber(arr) {
    var rand = Math.floor(Math.random() * arr.length);
    return rand;
}

最后一个函数:

(function message() {
    var intro = document.getElementById("intro");
    var currNumber = randNumber(msg);
    intro.innerHTML = msg[currNumber];
    var clickNumber = randWithout(currNumber, msg);
    intro.onclick = function () {
        intro.innerHTML = msg[clickNumber];
        clickNumber = randWithout(clickNumber, msg);
    }
})()

简单和可读!

Demo