gpt4 book ai didi

javascript - 使用数组进行无重复的随机非数字赋值

转载 作者:行者123 更新时间:2023-11-30 20:05:54 24 4
gpt4 key购买 nike

我正在尝试创建一个程序,为一件衣服分配一种随机的、独特​​的颜色。我使用一个数组来存储已经选择的颜色并尝试(使用 forwhile)消除重复的颜色。

我知道我的错误。似乎一旦发现一种颜色不重复,它就不会再次测试,因此偶尔仍会导致重复。

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

<!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>

最佳答案

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

这段代码假定 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;
});

附言如果您选择不使用此解决方案,并继续按照您当前的路线进行某些操作,我至少建议您切换到使用 map (对象)来查看是否使用了颜色。这将使检查变得更加简单:

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
}

关于javascript - 使用数组进行无重复的随机非数字赋值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52939062/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com