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

这对您来说是一个硬编码的解决方案。我创建了一个辅助数组来存储选定的颜色，并创建了过滤后的数组以供选择。过滤后的数组是从原始颜色数组中构造出来的，排除了已经选择的颜色。在函数的最后，我使用Array Destructuring将它们分配给您的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();

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

4 个答案: