使用数组进行无重复的随机非数字赋值
使用数组进行无重复的随机非数字赋值
提问于 2018-10-23 07:33:45
我正在尝试创建一个程序，为一件衣服分配一个随机的、唯一的颜色。我使用一个数组来存储已经挑选的颜色，并尝试(使用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>
回答 1
Stack Overflow用户
发布于 2018-10-23 07:47:31
一个简单的解决方案可能是简单地从数组中删除拾取的颜色，这样它就不会被选为重复的颜色。然后，您也不需要担心检查重复项。
这段代码假设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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52939062
复制相关文章
相似问题