如何使数组选择四个不同的选项

Question

有谁知道我如何使我的数组选择在不同变量下的四个不同选项？ 现在，我有一个包含六个实体的数组和一个可以选择其中四个选项并为其分配变量的函数，但是有可能会重复。

var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f']
window.colorOne = '';
window.colorTwo = '';
window.colorThree = '';
window.colorFour = '';


function beginAndGetCombo(){

window.colorOne = colors[Math.floor(Math.random() * colors.length)];
window.colorTwo = colors[Math.floor(Math.random() * colors.length)];
window.colorThree = colors[Math.floor(Math.random() * colors.length)];
window.colorFour = colors[Math.floor(Math.random() * colors.length)];

}


<input type=button value='Get Colors' onclick='beginAndGetCombo()'>

Answer 1

这是使用splice（）从可能的颜色数组中删除元素的一种可能方式。 数组会在每次迭代中更改长度，随机边界也会更改。 然后，每次迭代我们都有更少的颜色可供选择。

 var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f'] var newcolors = {"colorOne":'',"colorTwo":'',"colorThree":'',"colorFour":''}; for(let color in newcolors){ position = Math.floor(Math.random() * colors.length-1); window[color] = colors.splice(position,1)[0]; } console.log(window.colorOne) console.log(window.colorTwo) console.log(window.colorThree) console.log(window.colorFour) 

Answer 2

对您来说，这是一个硬编码的解决方案。 我创建了一个辅助数组来存储选定的颜色，并创建了过滤后的数组以供选择。 过滤后的数组是从原始颜色数组中构造出来的，排除了已经选择的颜色。 在函数的最后，我使用了数组解构将它们分配给window.colorX变量。 希望能帮助到你

 const colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f']; window.colorOne = ''; window.colorTwo = ''; window.colorThree = ''; window.colorFour = ''; function beginAndGetCombo(){ let selected = []; for (let i = 0; i < 4; i++) { let filteredColors = colors.filter(color => !selected.includes(color)) console.log(filteredColors); selected.push(filteredColors[Math.floor(Math.random() * filteredColors.length)]) } [window.colorOne, window.colorTwo, window.colorThree, window.colorFour] = selected; } 

Answer 3

正如其他人所建议的，改组数组是最简单，最简单的方法。

 var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f']; var randomize = (function(len) { return function() { return Math.floor(Math.random() * len); }; })(colors.length); var shuffled = colors.sort(randomize); var names = ['One', 'Two', 'Three', 'Four']; var color; while (names.length) { color = 'color' + names.shift(); window[color] = shuffled.shift(); console.log(color, window[color]); } 

Answer 4

 var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f'] var colorOne = ''; var colorTwo = ''; var colorThree = ''; var colorFour = ''; var newColor = ''; var newColors = new Array(); function beginAndGetCombo(){ newColor = colors[Math.floor(Math.random() * colors.length)]; if(newColors.indexOf(newColor)==-1){ newColors.push(newColor); }; if(newColors.length!=4){ beginAndGetCombo(); return; }; colorOne = newColors[0]; colorTwo = newColors[1]; colorThree = newColors[2]; colorFour = newColors[3]; console.log(colorOne); console.log(colorTwo); console.log(colorThree); console.log(colorFour); newColors = new Array(); } beginAndGetCombo();