单击一个按钮列出数组元素，点击一个按钮

Question

我是JavaScript新手，正在使用基础知识。我想要创建一个数组，其中单个元素是随机绘制的，每次点击一个按钮，直到所有数组元素都显示在屏幕上。我拥有的代码几乎就在那里。但问题是，它运行时，它总是在第一次按钮点击时捕获2个元素，而不是1.它对于其余元素运行良好。当然希望对这个问题有所了解。谢谢。

var myArray=['1','2','3','4','5','6','7'] 
var text = ""; 
var i; 

function RandomDraw() { 
    for(i = 0; i < myArray.length; i+=text) { 
     var ri = Math.floor(Math.random() * myArray.length); 
     var rs = myArray.splice(ri, 1); 
     document.getElementById("showSplice").innerHTML = text+=rs; 
     //document.getElementById("showArrayList").innerHTML = myArray; 
    } 
} 

Answer 1

我会做这种方式：

let myArray=['1','2','3','4','5','6','7'] 
function RandomDraw(){ 
    const selectedIndex = Math.floor(Math.random() * myArray.length); 
    const selected = myArray[selectedIndex] 
    myArray = myArray.slice(0, selected).concat(myArray.slice(selected + 1)); 
    return selected; 
} 

每次调用RandomDraw它会返回一个随机数，不重复的时间。

Answer 2

它“总是”由于i+=text提请2个元素。你的数组很小，因此循环需要2次迭代（使字符串得到i）超过myArray.length。

First iteration: 
    i = 0 => 0 < myArray.length => true 
    prints number 
Second iteration: (say '4' get choosen) 
    i = i + text and text = '4' => i = "04" => "04" < myArray.length => true 
    prints number 
Third iteration: (say '3' get choosen) 
    i = i + text and text = '43' => i = "0443" => "0443" < myArray.length => false 
    loop breaks 

所以有可能打印两个元素。根据阵列的长度，可能会有更多。

你不需要的循环，只是选择一个数字，打印：

function RandomDraw() { 
    if(myArray.length > 0) {          // if there still elements in the array 
     var ri = Math.floor(Math.random() * myArray.length);  // do your job ... 
     var rs = myArray.splice(ri, 1); 
     document.getElementById("showSplice").textContent = rs; // .textContent is better 
    } 
    else { 
     // print a message indicating that the array is now empty 
    } 
} 

Answer 3

我的理解是，你想有一个单一的点击后，从阵列的每个项目借鉴。所以循环是需要的。

正如其他人所说，有你的几个问题的for循环：

• 我+ =文本是没有意义的
• 你循环，直到我达到你的数组的长度，但你是拼接该数组，从而减少其长度

你可以纠正你的for循环：

function RandomDraw() { 
    var length = myArray.length; 
    var ri = 0; 
    for (var i=0;i<length;i++) { 
     ri = Math.floor(Math.random() * myArray.length); 
     console.log("Random index to be drawn : " + ri); 

     // removing that index from the array : 
     myArray.splice(ri, 1); 

     console.log("myArray after a random draw : ", myArray); 
    } 
} 

或者，你可以使用while循环：

function RandomDraw() { 
    var ri = 0; 
    while (myArray.length > 0) { 
     ri = Math.floor(Math.random() * myArray.length); 
     console.log("Random index to be drawn : " + ri); 

     // removing that index from the array : 
     myArray.splice(ri, 1); 

     console.log("myArray after a random draw : ", myArray); 
    } 
} 

Answer 4

另一种解决方案是从洗牌阵列洗牌数组，然后，在每一次点击，pop的元素。

function shuffle(array) { 
 
    return array.sort(function() { return Math.random() - 0.5; }); 
 
} 
 

 
var button  = document.getElementById('button'); 
 
var origin  = ['1','2','3','4','5','6','7']; 
 
var myArray  = shuffle(origin); 
 
var currentValue = null; 
 

 
button.onclick = function() { 
 
    currentValue = myArray.pop(); 
 

 
    if(!!currentValue) { 
 
    console.log(currentValue); 
 
    } 
 
}

<button id='button'> 
 
get element 
 
</button>

你可以在每一次点击重新洗牌的阵列，但我认为这是没有必要的任何...

如果你想知道关于Math.random() - 0.5：

[0123] Math.random返回一个介于0和1之间的数字。因此，如果您致电Math.random() - 0.5，则有50％的机会会得到一个负数，有50％的机会会得到一个正数。 如果您运行for循环并将这些结果添加到一个数组中，您将有效地获得负数和正数的完整分布。

• https://teamtreehouse.com/community/mathrandom05