javascript - 如何在不重复的情况下从数组中获取元素?

标签 javascript

如何从数组中获取 5 个元素而不重复?

我正在尝试使用 Tumult Hype 创建在线版的故事骰子。我需要做的就是从数组中选择 5 个图像名称而不重复。但我就是无法让它工作。

我试过从其他 stackoverflow 答案中借用代码,但我无法让它们工作。

下面的代码目前正在运行,但让我重复。我如何修改它以消除重复?

(您可以在此处查看实际效果:https://davebirss.com/storydice/)

我知道它可能冗长且不雅。恐怕我只会说 pidgin javascript。而我正在尝试做的事情目前超出了我的能力范围。

非常感谢您的帮助。

var diceRoll = ['${resourcesFolderName}/story_dice1.png',
        '${resourcesFolderName}/story_dice2.png',
        '${resourcesFolderName}/story_dice3.png',
        ...,
        '${resourcesFolderName}/story_dice51.png']

function choose(n, arr) {
    while (arr.length > n) {
        var del = Math.floor(Math.random() * arr.length);
        arr = arr.filter(function(item, i) {
            return i !== del;
        });
    }
    return arr;}

var result1 = [choose(1, diceRoll)];
var result2 = [choose(1, diceRoll)];
var result3 = [choose(1, diceRoll)];
var result4 = [choose(1, diceRoll)];
var result5 = [choose(1, diceRoll)];

hypeDocument.getElementById("dice1").innerHTML = "<img src='"+result1+" 'height='125' width='125'>";
hypeDocument.getElementById("dice2").innerHTML = "<img src='"+result2+" 'height='125' width='125'>";
hypeDocument.getElementById("dice3").innerHTML = "<img src='"+result3+" 'height='125' width='125'>";
hypeDocument.getElementById("dice4").innerHTML = "<img src='"+result4+" 'height='125' width='125'>";
hypeDocument.getElementById("dice5").innerHTML = "<img src='"+result5+" 'height='125' width='125'>";

更新

谢谢大家的帮助。我确信所有答案都很棒,但 U25lYWt5IEJhc3RhcmQg 中的代码片段是我成功合并的代码。作为记录,我是这样做的:

const rollTheDice = (arr, n) => {
  const randomN = [];
  while(randomN.length < n){
    const randomIndex = Math.floor(Math.random()*arr.length);
    randomN.push(arr[randomIndex]);
    arr.splice(randomIndex, 1);
  }
  return randomN;}

var result1 = (rollTheDice(images,1)); 
var result2 = (rollTheDice(images,1));
var result3 = (rollTheDice(images,1));
var result4 = (rollTheDice(images,1)); 
var result5 = (rollTheDice(images,1));

我已经反复重新加载页面,但还没有看到任何重复。完美!

最佳答案

您可以获取一个索引数组并检查该索引是否存在,然后获取一个新索引或推送该索引。

var length = 51,  // your count of items
    indices = [], // the result set with indices
    count = 5,    // the amount of wanted indices
    random;       // guess what?
    
while (indices.length < count) {                 // check length
    random = Math.floor(Math.random() * length); // get random value
    if (indices.includes(random)) continue;      // continue if already selected
    indices.push(random);                        // if not take it
}

console.log(indices);

关于javascript - 如何在不重复的情况下从数组中获取元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56374612/

相关文章:

javascript - 在 Componente 状态下保存并从 API 调用中获取对象

javascript - 为什么我的 for 循环从最后一项开始并在一次迭代后停止运行?

javascript - 如何知道在列表上下文中单击了哪个 jQuery 按钮

Javascript 函数闭包和对父作用域的访问

javascript - 当受父级 div 大小和宽高比限制时,将 div 大小调整为最大可能大小

javascript - 以更简单的方式获取树数据结构的深度

javascript - 字段作为 Qooxdoo 库中的静态字段

javascript - removechild 给出 NS_ERROR_INVALID_POINTER 错误

javascript - Web 客户端上的大十进制

javascript - 如何使用 javascript 从 HTML 选择选项 onchange 中发布 PHP 变量?