循环返回很长的数组，即使它循环了 3 次？

Question

下面我创建了两个循环。

基本上，它首先遍历包含 4 个值的随机数数组。然后随机生成一个介于 0 和 3 之间的数字，并从随机数数组中选择一个值以随机顺序返回到 console.log（例如2,0,3,1)。

下一个循环是随机创建错误答案。如果 allAnswers 数组中不存在此错误答案，则会将其推送到数组中。

然后循环并创建一个按钮，作为用户可以选择的答案。

所有这一切都完美无缺。除了我的 allAnswers 数组返回 13 个值时，它应该只有 4 个（其中 1 个是我预先确定的值 21）。

我需要它来创建 4 个按钮，每个按钮通过数组位置在 0-3 之间的答案，并返回这些唯一值而不说未定义。所以我不确定在这种情况下我做错了什么？

var allAnswers = [21],
    randomizer = [0, 1, 2, 3],
    random = 0,
    buttonArea = $("#answerOptions");


for (randomizer, r = randomizer.length; r--; ) {

    random = randomizer.splice(Math.floor(Math.random() * (r + 1)), 1)[0];
    // console.log(random);

    // Generates 3 random wrong answers
    for(wa = 0 ; wa < 3; wa++) {
        wrongAnswers = Math.floor((Math.random() * 100) + 1);
    }

    // Pushes wrong answers to array
    if (allAnswers.indexOf(wrongAnswers) === -1) {
      allAnswers.push(wrongAnswers);
    }
    console.log(random);
    input = $('<div class="col-xs-6"><button class="btn btn-primary answerButton">'+ allAnswers[random] +'</button></div>');
    input.appendTo(buttonArea); 
}

console.log(allAnswers);

编辑：

在建议的新循环中添加

var goodAnswer = 21,
    allAnswers = [],
    wrongAnswer, 
    wa,
    buttonArea = $("#answerOptions");

for(wa = 0; wa < 4; wa++) {
  do {
    wrongAnswer = Math.floor((Math.random() * 100) + 1);
  } while(wrongAnswer == goodAnswer || allAnswers.indexOf(wrongAnswer) !== -1);

  allAnswers.push(wrongAnswer);

    input = $('<div class="col-xs-6"><button class="btn btn-primary answerButton">'+ allAnswers +'</button></div>');
    input.appendTo(buttonArea); 
}

allAnswers[Math.floor(Math.random() * 4)] = goodAnswer;

console.log(goodAnswer);
console.log(allAnswers);
console.log(wa);

Answer 1

你的 'wa' 循环没用：它为 'wrongAnswers' 分配了一个随机值 3 次。但最终，你只有一个值。

另一个问题是如果 'wrongAnswers' 没有通过 indexOf() 条件，就没有'try again'。在这种情况下，不会在该迭代中插入任何内容。

我会推荐一种更简单的方法：构建一个包含 4 个随机错误答案的数组，并将其中一个替换为好的答案。

var goodAnswer = 21,
    allAnswers = [],
    wrongAnswer, wa;

for(wa = 0; wa < 4; wa++) {
  do {
    wrongAnswer = Math.floor((Math.random() * 100) + 1);
  } while(wrongAnswer == goodAnswer || allAnswers.indexOf(wrongAnswer) !== -1);

  allAnswers.push(wrongAnswer);
}

allAnswers[Math.floor(Math.random() * 4)] = goodAnswer;

我省略了 HTML 部分，但您可以在构建数组后轻松完成。

编辑

或者如果你真的想在同一个循环中处理HTML，你也可以在循环之前确定好答案的位置，以便每个位置的性质（错误或好）从一开始就众所周知。现在，您不必在事后覆盖错误答案之一，并且可以安全地在循环内创建按钮。

var goodAnswer = 21,
    gaPosition = Math.floor(Math.random() * 4),
    allAnswers = [],
    buttonArea = $("#answerOptions"),
    answer, n;

for(n = 0; n < 4; n++) {
  if(n == gaPosition) {
    answer = goodAnswer;
  }
  else {
    do {
      answer = Math.floor((Math.random() * 100) + 1);
    } while(answer == goodAnswer || allAnswers.indexOf(answer) !== -1);        
  }
  allAnswers.push(answer);

  input = $('<div class="col-xs-6"><button class="btn btn-primary answerButton">'+ answer +'</button></div>');
  input.appendTo(buttonArea); 
}