使用数组没有重复的随机非数字分配答案

【问题标题】：random non-number assignment without duplicates using arrays使用数组没有重复的随机非数字分配
【发布时间】：2023-03-21 08:23:01
【问题描述】：

我正在尝试创建一个程序，为一件衣服分配一种随机、独特的颜色。我使用一个数组来存储已经选择的颜色并尝试（使用for 和while）来消除重复的颜色。

我知道我有什么是错的。似乎一旦发现一种颜色是非重复的，就不会再次对其进行测试，因此偶尔仍会导致重复。

有人可以帮我解决这个问题吗？如果可能的话，我想避免花哨的图书馆东西。我不擅长编码，想更清楚地了解“为什么”和“如何”。

<!DOCTYPE html>
<html lang="en-us">

<head>

  <!-- the goal is to randomly assign a color to a piece of clothing and have no duplicate colors -->
  <meta charset="utf-8">

  <!-- displays the clothing and color on-screen -->
  shirt: <span id="shirt"></span><br> shorts: <span id="shorts"></span><br> hat: <span id="hat"></span><br> coat: <span id="coat"></span>
  <br><br>

  <!-- testing prints to track what's going on-->
  colorPicked first: <span id="pickedColor"></span><br>

  <br><br> colors so far: <span id="soFar"></span>

</head>

<body>

  <script>
    // establish an array with seven color options
    var colors = ['orange', 'red', 'blue', 'green', 'yellow', 'pink', 'purple'];
    // array to track colors picked so far
    var colorPicked = [];
    // variable to track place in array
    var colorNumber = 0

    // assign a random color to 'shirt'
    var shirtColor = colors[Math.floor(Math.random() * colors.length)];
    colorPicked[colorNumber] = shirtColor;
    document.getElementById('shirt').innerHTML = shirtColor;

    document.getElementById('pickedColor').innerHTML = colorPicked[colorNumber];


    // assign a random color to 'shorts' - a loop (that doesn't quite work right) checks for duplicates
    var shortsColor = colors[Math.floor(Math.random() * colors.length)];


    while (shortsColor == colorPicked[i]) {
      for (var i = 0; i <= colorNumber; i++) {
        document.getElementById('pickedColor').innerHTML = "same";
        document.getElementById('shorts').innerHTML = shortsColor;
        shortsColor = colors[Math.floor(Math.random() * colors.length)];
      }
    }

    if (shortsColor != colorPicked[colorNumber]) {
      document.getElementById('shorts').innerHTML = shortsColor;
      colorNumber = colorNumber + 1;
      colorPicked[colorNumber] = shortsColor;
    }



    // assigns a random, non-repeating color to 'hat'
    var hatColor = colors[Math.floor(Math.random() * colors.length)];

    while (hatColor == colorPicked[i]) {
      for (var i = 0; i <= colorNumber; i++) {
        document.getElementById('pickedColor').innerHTML = "same";
        document.getElementById('hat').innerHTML = hatColor;
        hatColor = colors[Math.floor(Math.random() * colors.length)];
      }
    }

    if (hatColor != colorPicked[colorNumber]) {
      document.getElementById('hat').innerHTML = hatColor;
      colorNumber = colorNumber + 1;
      colorPicked[colorNumber] = hatColor;
    }



    // assigns a random, non-repeating color to 'coat'
    var coatColor = colors[Math.floor(Math.random() * colors.length)];

    while (coatColor == colorPicked[i]) {
      for (var i = 0; i <= colorNumber; i++) {
        document.getElementById('pickedColor').innerHTML = "same";
        document.getElementById('coat').innerHTML = coatColor;
        coatColor = colors[Math.floor(Math.random() * colors.length)];
      }
    }

    if (coatColor != colorPicked[colorNumber]) {
      document.getElementById('coat').innerHTML = coatColor;
      colorNumber = colorNumber + 1;
      colorPicked[colorNumber] = coatColor;
    }

    // show values in the log
    for (var i = 0; i <= colorNumber; i++) {
      //document.getElementById('soFar').innerHTML = colorPicked[i];
      console.log(colorPicked[i]);
    }
  </script>


</body>

</html>

【问题讨论】：

一种解决方案是随机排列数组（通过交换两个随机元素几十次），然后简单地选择前 X 个元素。
谢谢你的想法。像这样的，我猜？ stackoverflow.com/questions/2450954/…
你不需要一些疯狂的算法。就按照我的建议去做，“[交换]两个随机元素几十次”。

标签： javascript html random duplicates

【解决方案1】：

一个简单的解决方案可能是简单地从数组中删除选择的颜色，这样它就不能被选为重复项。那么您也不必担心检查重复项。

此代码假定 colors 始终与所需长度一样长或更长。

let colors = ['red', 'white', 'blue'];
const shirts = [{ name: 'shirt1' }, { name: 'shirt2' }];

const shirtsWithColors = shirts.map((shirt) => {
  // Make a copy of shirt so that we don't modify the one in the `shirts` array
  const newShirt = {...shirt};

  // Pick a color index
  const colorToUseIndex = Math.floor(Math.random() * colors.length);
  const colorToUse = colors[colorToUseIndex];

  // Remove the picked color from the color array
  colors.splice(colorToUseIndex, 1);

  // Assign the color and return
  newShirt.color = colorToUse;
  return newShirt;
});

附：如果您选择不使用此解决方案，并继续按照您当前的方式进行操作，我至少建议您切换到使用地图（对象）来查看是否使用了颜色。这将使检查变得更加简单：

const colors = ['red', 'white', 'blue'];
const usedColors = {};
...
// When you assign a color:
usedColors[colorIndex] = true;
...
// When checking if the color has been used:
if (usedColors[colorIndex]) {
  // Try picking a different color
}

【讨论】：

感谢您的回复。我将尝试消化这一点并将其付诸实践。感谢您的宝贵时间。
如果您遇到困难，很乐意回答有关上述内容的任何问题 :)