單擊一個按鈕列出數組元素，點擊一個按鈕

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