javascript - 需要从javascript中的2个数组中获取

Question

我的数组:

var mexicanFood = ["Taco Bell", "Beans", "Taco Time", "Buritos", "Chalupa"];

var asianFood = ["Noodles", "Rice", "Sushi", "Fish", "Chicken"];

var americanFood = ["Hot dogs", "Pizza", "Burgers", "Nachos", "Other"];

知道可以从数组中随机抓取:

var randomIndex = Math.floor(Math.random() * mexicanFood.length);

我想从每个食物类别中提取一个值。我不希望所有 mexicanFood 值都是食物选择的结果。我想要随机的，但至少从每个类别中抽取一两个。如何将其放入单选按钮(可能是 5 个单选按钮)中来做到这一点？可以使用 Math.random 来完成吗？

如果可能的话，还希望它是 JavaScript 和 html 格式的

编辑:

我基本上想要数组中的不同食物类别。然后从类别中提取随机值，这些值将放入单选按钮中。我想要创建的总体项目是对餐厅进行投票。因此，当我有墨西哥、亚洲、美式和其他选项可供随机选择时，我不希望出现 5 个汉堡店。

我所困惑的是如何从每个数组中随机提取。我知道如何从一个数组列表中随机提取。但是，当我有 mexicanFood、asianFood 和 americanFood(甚至更多)时，我不确定如何从这些值中随机提取值并让这些值填充单选按钮

Answer 1

我假设您想要返回一组随机食物，其中每个类别至少包含 1 个。

我创建了一个名为 createRandomArray() 的函数，它接受 arraySize。此 arraySize 指的是您希望在最终数组中包含的项目数量。

在函数中，我将所有食物数组连接在一起。然后我循环遍历该数组以将随机索引添加到新数组中。

var mexicanFood = ["Taco Bell", "Beans", "Taco Time", "Buritos", "Chalupa"],
    asianFood = ["Noodles", "Rice", "Sushi", "Fish", "Chicken"],
    americanFood = ["Hot dogs", "Pizza", "Burgers", "Nachos", "Other"];
    
function createRandomArray(arraySize) {
    var allFoods = mexicanFood.concat(asianFood).concat(americanFood),
        randomFoods = [];
    
    if (arraySize <= allFoods.length) {
        randomFoods = [
            mexicanFood[getRandomArrayIndex(mexicanFood)],
            asianFood[getRandomArrayIndex(asianFood)],
            americanFood[getRandomArrayIndex(americanFood)]
        ]; // at at least one from each
        
        // remove the ones that were initially added from each
        allFoods.splice(allFoods.indexOf(randomFoods[0]), 1);
        allFoods.splice(allFoods.indexOf(randomFoods[1]), 1);
        allFoods.splice(allFoods.indexOf(randomFoods[2]), 1);
        
        for (var i = 0; i < arraySize - 3; i++) {
            var randomIndex = getRandomArrayIndex(allFoods);
            
            randomFoods.push(allFoods[randomIndex]);
            allFoods.splice(randomIndex, 1);
        }
        
        return randomFoods;
    }
    
    return allFoods; // requesting more items of food than the amount available, so just add them all
}

function getRandomArrayIndex(array) {
    return Math.floor(Math.random() * array.length);
}

var randomFoods = createRandomArray(5);

for (var i = 0; i < randomFoods.length; i++) {
    document.getElementById('food-form').innerHTML += '<input type="radio" name="food" value="' + randomFoods[i] + '"> ' + randomFoods[i] + '<br>';
}

<form action="" id="food-form"></form>