JavaScript 随机报价生成器

Question

我一直在为一个类构建一个随机报价生成器，该类采用对象数组(报价)并根据随机数生成函数显示随机报价。为了获得额外的学分，该类(class)要求我找到一种方法，使引号只显示一次，然后再次循环引号。为此，我决定尝试创建一个空数组，然后将生成的任何引号推送到该数组，并将其从原始数组中切出，然后运行一个 for 循环来检查我的原始数组长度是否为 0，如果是，循环遍历新数组，将每个索引推回我原来的索引。

我遇到的问题是，当我从原始数组中拼接出索引时，它留下了一个空数组，该数组现在是循环的一部分但未定义。该索引最终会根据随机生成器显示并带来“未定义”错误。我没有推/拼接方法的代码是 -

// event listener to respond to clicks on the page
// when user clicks anywhere on the page, the "makeQuote" function is called

document.getElementById('loadQuote').addEventListener("click", printQuote, false);

//defining variables

var message = '';
var viewedquotes = [];


//print function to print the randomly selected quote to the page

function print(message) {     
        var outputDiv = document.getElementById('quote-box');
        outputDiv.innerHTML = message;
}               

//a function that creates a random number between 0 and the length of quotes to randomly select an object or index of the quotes array and return the value of it.

function getRandomQuote() {
        var quoteObject = quotes[Math.floor(Math.random() * quotes.length)];
        return quoteObject;
}


//RandomColors function to generate random RGB values and return the values


function RandomColors() {
        var red = Math.floor(Math.random() * 256);
        var green = Math.floor(Math.random() * 256);
        var blue = Math.floor(Math.random() * 256);
        var colors = 'rgb(' + red + ',' + green + ',' + blue + ')';
        return colors;
}


//Takes the random quote function stores it into var printObject and adds them to message variable as a string of paragraphs and spans.
//If citation and year are undefined it does not print them.
//Resets the message variable to be '' after for a new click to generate a new quote.  
//Uses the getRandomColors function to change the body's background color each time the button is clicked.

function printQuote() {
        var printObject = getRandomQuote();
        message += '<p class="quote">' + printObject.quote + '</p>';
        message += '<p class="source">' + printObject.source + '';
        if (printObject.citation !== undefined) {
                message += '<span class ="citation">' + printObject.citation + '</span>';
            }
        if (printObject.year !== undefined) {
                message += '<span class ="year">' + printObject.year + '</span>';
            }
        message += '</p>';
        print(message);
        message = '';
        var getRandomColors = RandomColors();
        document.body.style.backgroundColor = getRandomColors;
}

我在最后一个函数中尝试的拼接和推送方法如下(这是在 printQuote() 函数中的 message = '' 行之后 -

var pushQuote = viewedquotes.push(printObject);
                console.log(viewedquotes);
                var indexOfQuote = indexOf(printObject);
                var spliceQuote = quotes.splice(indexOfQuote,1);
                var quotesLength = quotes.length;
                console.log(quotes);
                if (quotesLength === 0) {
                    for (i = 0; i <= viewedquotes ; i++) {
                        quotes.push(viewedquotes[i]);

                    }
            viewedquotes= [];
                }

有没有办法防止 splice 创建一个现在留在原始数组中的空数组？当我每次运行代码时都将 viewedquotes 和 quotes 都打印到控制台时，它会开始像

[对象][对象][对象][对象][对象]

然后去

[对象][对象][对象][对象][对象]

一旦原始数组的长度为 0，它就会重置为列表中的 [undefined]，最终给出错误。

我知道可能还有其他方法可以完成此操作，但我只是想知道我的逻辑是否可以通过一些调整来实现？

谢谢

Answer 1

您可以调整您的方法，从引号数组拼接一个随机索引，然后将其压入第二个数组的堆栈顶部。喜欢:

var quotes1 = ["q1", "q2", "q3", "q4", "q5"];
var quotes2 = []; //<==empty array

var indexToSplice = Math.floor(Math.random() * quotes1.length);
var spliceQuote = quotes1.splice(indexToSplice, 1);
print(spliceQuote);
quotes2.push(spliceQuote);

但是你必须考虑改变。当引用数组为空时可能会发生这种情况。

if (quotes1.length == 0) {
    quotes1 = quotes2;
    quotes2 = [];
}

Here is a Fiddle我在哪里测试过它。