从数组中随机选择值而不重复

Question

嗨：我是 Javascript 和 HTML 的新手，自学了一个月。我正在做一个小项目，当我单击一个按钮时，表格中会出现 3 个随机锻炼练习。我将附上我的代码以显示我到目前为止所拥有的内容。

---

问题：当 for 循环运行时，它会打印 3 次相同的随机选择项目，而不是 3 个不同的项目。

---

目标：当我点击一个按钮时，数组会打印 3 个不同的数组值。

var workouts = ['situps', 'planks', 'hollow rock']
var copy = workouts.slice();

var table = '';
var i = 1;

for(var j = 0; j < i; j++)
{
    var answer = copy.splice(Math.floor(Math.random()*workouts.length), 1); 
    table += '<tr>';
    table += '<td>';
    for(var i = 0; i < 1; i++){
        table += answer;
    }
    table += '</td>';
    table += '</tr>';
}

function potato() {
document.getElementById('hi').innerHTML += ('<table border = 1>' + table + '</table>');
}

//Output: Sit ups, Sit ups, Sit ups

Answer 1

您好，欢迎来到 Stackoverflow。

由于您的 for 循环，您的代码显示相同输出的问题正在发生。因为i 变量是1，所以您将进入循环一次。

您真正想要做的是拥有与要显示的元素数量一样多的循环。

显示数组中 3 个唯一且随机的元素的一种方法如下：

var workouts = ['situps', 'planks', 'hollow rock'];
var copy = workouts.slice();

var table = '';

for(var j = 0; j < 3; j++) {
  var random = Math.floor(Math.random() * copy.length);
  var answer = copy[random];

  table += '<tr>';
  table += '<td>';
  table += answer;
  table += '</td>';
  table += '</tr>';

  //Removing the selected element so it won't show again.
  copy.splice(random, 1);
}

function potato() {
   document.getElementById('hi').innerHTML += ('<table border = 1>' + table + '</table>');
}