Javascript 如何从 Math.random 获取唯一值。我怎样才能让它停止重复？

Question

我正在尝试使用 jquery/javascript 从某个网站远程获取一些 HTML dom 元素。这些元素在数组中并且是唯一的，但是当我尝试使用 math.random() * my array.length 打印它们时，我看到了重复项。我希望 imgIdx 是独一无二的。

所以为了帮助我学习，有人可以帮我确定我在这里缺少什么吗？

myarray = [
{ thumb : "http://url.com/img1.jpg", big : "http://url.com/img51.jpg" },
{ thumb : "http://url.com/img61.jpg", big : "http://url.com/img671.jpg" },
{ thumb : "http://url.com/img666.jpg", big : "http://url.com/img371.jpg" },]

function addSomeImages(limit) {
    for (var i = lastIdx; i < lastIdx + limit; i++) {
        var imgIdx = Math.floor(Math.random() * myarray.length);
        $('#endless-gallery').append('<a data-fancybox="gallery" href="' + myarray[imgIdx].big + '">' + '<img class=photo src="' + myarray[imgIdx].thumb + '' +
            '" />' +
            '</a>');
    }

Answer 1

需要注意的重要一点是，我所注意到的尚未触及的是为什么您当前的解决方案无法正常工作，或者为什么改组您的阵列是理想的方法。您需要意识到的是，您当前的代码只是生成一个随机索引供您访问数组中的元素。就像掷骰子一样，您重新掷骰子的可能性要比掷出每个数字而不重复掷骰子的可能性大得多。这就是（伪）随机数生成的全部意义所在，其结果本质上实际上是不确定的。

考虑到这一点，为了从数组中随机检索元素不重复，您必须找到一种方法来通过设计排除重复。两种最实用的方法是：

1) 随机播放数组并按照问题中的 cmets 中的说明简单地遍历它，或者

2) 从数组中删除访问的元素并循环直到数组为空。

在上述两种方法中，简单地改组数组更为实用，并且不会导致数组被破坏（或需要克隆数组并破坏克隆），因此它很容易成为您使用的理想解决方案。

为什么这些方法有效而您的原始解决方案无效：

洗牌数组是一个过程，通过该过程，您的数组包含与其最初包含的完全相同的元素，但只是在数组中随机排序。就像名字所暗示的那样，这就像洗一副牌一样。您将始终拥有标准的 52 张独特卡片，但它们的顺序不同。当您翻动洗好的牌时，不会有遇到您已经通过的同一张牌的风险。

删除一个元素并循环直到清空就像拿一副由 52 张独特牌组成的完美排序的牌组，然后反复从牌组中随机抽出一张，然后丢弃已经抽出的牌。如果您抽出的牌已不在牌组中，您将永远不会面临抽出同一张牌的风险。

你现在正在做的事情是取出那副完美分类的 52 张牌，随机查看一张，然后将其放回牌组中的位置，然后再重复该过程。卡片还在，因为您只是在查看随机卡片，您可能会无意中再次查看它。

由于打乱数组然后迭代结果通常是理想的方法，因此请考虑使用 cmets 中提到的 Fisher-Yates 打乱函数：

function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

然后你可以这样做：

myarray = [ ... ];
myarray = shuffle(myarray);

function addSomeImages(limit) {
    //note: ensure that "lastIdx + limit <= myarray.length" or you could exceed the array bounds!
    for (var i = lastIdx; i < lastIdx + limit; i++) {
        $('#endless-gallery').append('<a data-fancybox="gallery" href="' + myarray[i].big + '"><img class="photo" src="' + myarray[i].thumb + '" /></a>');
    }
}