如何让我的报价随机生成器更加自动化和简洁？

Question

我有一个个人报价随机生成器（目前充满了填充报价），它完全按照我想要的方式工作：我按下一个按钮，浏览器首先随机化类别，然后浏览器从该类别中获得随机报价显示。以下是 JavaScript 代码的一部分（实际的“引用界面是使用 HTML 文件创建的）

但是，将新类别添加到引用随机化器意味着除了将所述新类别添加到第一个数组之外还添加到 switch 语句。我并不懒惰，但我不禁觉得我缺少了一些重要的东西；可以使一切变得更加简洁和高效的东西。有什么方法可以替换 switch 语句部分并选择采用不同的方法来获取此报价？不用担心任何 HTML，我只关心如何使我的 javascript 代码更简洁。我还会添加 this jsbin 以防有人需要查看整个内容。

/* ALL QUOTE CATEGORIES */
var allCategories = [
    `Finance`,
    `Gratitude`,
    `Life`,
    `Work Ethic`,
];



/* FINANCE QUOTES */
var quoteCategoryFinance = [
/*1*/   `“This is a quote about Finance” <br /> -Person who said it`,
/*2*/   `“This is a second quote Finance” <br /> -Person who said it`,
/*3*/   `"This is a third quote about Finance" <br /> -Person who said it`,
];



/* GRATITUDE QUOTES */
var quoteCategoryGratitude = [
/*1*/   `“This is a quote about Gratitude” <br /> -Person who said it`,
/*2*/   `“This is a second quote Gratitude” <br /> -Person who said it`,
/*3*/   `"This is a third quote about Gratitude" <br /> -Person who said it`,
];



/* LIFE QUOTES */
var quoteCategoryLife = [
/*1*/   `“This is a quote about Life” <br /> -Person who said it`,
/*2*/   `“This is a second quote Life” <br /> -Person who said it`,
/*3*/   `"This is a third quote about Life" <br /> -Person who said it`,
];  

                

/* WORK ETHIC QUOTES */
var quoteCategoryWorkEthic = [  
/*1*/   `“This is a quote about Work Ethic” <br /> -Person who said it`,
/*2*/   `“This is a second quote Work Ethic” <br /> -Person who said it`,
/*3*/   `"This is a third quote about Work Ethic" <br /> -Person who said it`,
];




var randomCategory;
function getRandomCategory() {
    randomCategory = allCategories[Math.floor(Math.random()*allCategories.length)];
    document.getElementById("category").innerHTML = randomCategory;
}


var randomQuote;
var quoteNumber;
function getRandomQuote() {

    switch (randomCategory) {
        case `Finance`:
        quoteNumber = Math.floor(Math.random()*quoteCategoryFinance.length);
        randomQuote = quoteCategoryFinance[quoteNumber];
        break;

        case `Gratitude`:
        quoteNumber = Math.floor(Math.random()*quoteCategoryGratitude.length);
        randomQuote = quoteCategoryGratitude[quoteNumber];
        break;

        case `Life`:
        quoteNumber = Math.floor(Math.random()*quoteCategoryLife.length);
        randomQuote = quoteCategoryLife[quoteNumber];
        break;

        case `Work Ethic`:
        quoteNumber = Math.floor(Math.random()*quoteCategoryWorkEthic.length);
        randomQuote = quoteCategoryWorkEthic[quoteNumber];
        break;

        default:
        console.log(`Getting random quote did not work`);
    }

    document.getElementById("quote").innerHTML = randomQuote;
    document.getElementById("quote-number").innerHTML = `Quote #` + (quoteNumber + 1);
}


function giveQuote() {
getRandomCategory();getRandomQuote();
}

Answer 1

使用一个对象来保存类别和引号数组之间的对应关系。

var categoryQuotes = {
    "Finance": quoteCategoryFinance,
    "Gratitude": quoteCategoryGratitude,
    "Life": quoteCategoryLife,
    "Work Ethic": quoteCategoryWorkEthic
};

function getRandomQuote() {
    if (randomCategory in categoryQuotes) {
        let quotes = categoryQuotes[randomCategory];
        let quoteNumber = Math.floor(Math.random() * quotes.length);
        let randomQuote = quotes[quoteNumber];
        document.getElementById("quote").innerHTML = randomQuote;
        document.getElementById("quote-number").innerHTML = `Quote #` + (quoteNumber + 1);
    } else {
        console.log("Getting random quote did not work");
    }
}

您也不需要数组 allCategories。您可以改用 Object.keys(categoryQuotes)。这样你就不用担心他们不同步了。

如何让我的报价随机生成器更加自动化和简洁？

How can I make my quote randomizer more automatic and concise?

javascript

switch-statement