创建一个由唯一数字组成的数组答案

【问题标题】：Creating an array that is consisted of unique numbers创建一个由唯一数字组成的数组
【发布时间】：2020-06-12 14:54:19
【问题描述】：

我正在开发一个简单的游戏，它允许用户从某个 Cat Api 生成 1 到 5 个 Cat 图像。然后，在单击开始按钮后，应用程序会生成这些猫的影子副本（不透明度低）。游戏稍后将涉及拖动底部图像并将它们拟合到它们的阴影副本，这些副本是随机定位的（只有这样游戏才有意义）。然后我打算做一些更多的功能，比如时间计数器、积分等，只是为了学习目的。

但是正在努力的是创建一个唯一的随机数（这将是特定猫的索引），并且在迭代过程中不会重复......

这里是代码

 const newArray = []; // 


const catsArrayList = [...catBoardCopy.querySelectorAll('.cat')] //Array with cat images

function randomizeIndex() { // randomize an index number
    let randomIndex = Math.floor((Math.random() * catsArrayList.length - 1) + 1);
    console.log(randomIndex);

    return randomIndex;
}

catsArrayList.forEach(catElement => { // here I am iterating over an array with cats which length is for example 5(this is max actually)

    newArray.push(catsArrayList[randomizeIndex()]); // and pushing those elements with randomly generated index to the new array

})

newArray.forEach(newCat => {

    shadowCatsContainer.appendChild(newCat); // here random cats are finally put to html container
})

所有这些工作直到其中一个随机数至少重复一次......当然这实际上发生在 90% 的时间。

我想这不是一个简单的解决方案。我非常努力地让它与不同的技术、不同的循环、不同的数组方法一起工作，什么都没有:(另外请注意我是初学者，所以我需要详尽的指导：)

祝你有美好的一天。

【问题讨论】：

在像您这样的情况下执行此操作的标准方法是按顺序用索引填充数组，然后打乱数组。然后，您可以从数组中提取数字并且永远不会重复。
您会选择使用 Set 吗？
也可以考虑使用 Array.map 函数，而不是遍历数组并将值推送到新数组。
你想要什么数字范围？示例：1 - 100 ?
看起来像 cat 数组中的索引

标签： javascript unique-index

【解决方案1】：

您的代码很接近；您可以从源数组中删除您分配给新数组的项目，这样您就不会使用它两次。

const cats = [...catBoardCopy.querySelectorAll('.cat')]

function randomIndex() {
    return Math.floor(Math.random() * cats.length);
}

cats.forEach(catElement => {
    const index = randomIndex();
    shadowCatsContainer.appendChild(cats[index]);
    cats.splice(index, 1);
})

【讨论】：

【解决方案2】：

一种选择是简单地打乱一个数组：

const cats = ['Tigger', 'Smokey', 'Kitty', 'Simba', 'Sassy'];

function shuffle(array, n = 500) {
    const output = array.slice();
    for (let i = 0; i < n; ++i) {
        swap(output, getRandomInt(0, output.length), getRandomInt(0, output.length))
    }

    return output;
}

function swap(array, i, j) {
    const temp = array[i];
    array[i] = array[j];
    array[j] = temp;
}

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

const shadowedCats = shuffle(cats);
console.log(cats);
console.log(shadowedCats);
console.log(shuffle(cats));

【讨论】：

【解决方案3】：

一个使用数组的例子。在这里，我创建了一个包含可能数字的数组，它从 0 到包含在“catsArrayList”数组中的元素数。例如，如果 'catsArrayList' 有 3 个元素，则具有可能数字的数组将等于：[0, 1, 2]

现在的想法是从该数组中抽取一个随机数，然后将其从列表中删除，然后我们可以继续重复该过程而不会得到重复的值。

例如

let catsArrayList = ['value1', 'value2', 'value3', 'value4', 'value5', 'value6'] // example


let numbers = [...Array(catsArrayList.length).keys()]
let lengthnumbers = numbers.length


for(let i = 1; i <= lengthnumbers; i++) {
  let randoms = Math.floor(Math.random() * numbers.length)
  console.log(i + 'º number: ' + numbers.splice(randoms, 1))
}

点击“Run code sn-p”几次，你会看到你会得到不同的、非重复的随机数

【讨论】：