なぜ私はavascript上の配列に未定義を持っていますか

Question

私は単純なアプリケーションの真中にあります。考えられるのは、配列の値を繰り返すことなくランダムに選択することです。

私は関数を使用してそれを行うために管理が、私はそれを通過し始めた瞬間に、私は2つの未定義だとコードの

サンプルなぜ私にはわからない：

<script> 
    var num = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 

    cont = 0; 
    totalnum = num.length - 1; 

    function next() { 

    var indice = Math.floor(Math.random() * (cont < totalnum ?++cont:0)); 
     var number = num[indice]; 
     document.getElementById("hola2").innerHTML =num.splice(indice,1); 


    } 
</script> 

Answer 1

あなたは可能性だけでランダムなインデックスを取得するためにnumの長さを毎回使用して配列の長さを変更し、あなたが他の変数を必要としない

var num = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 

 
function next() { 
 
    if (!num.length) return;// do something when no more exist 
 

 
    var indice = Math.floor(Math.random() * num.length); 
 
    var number = num.splice(indice, 1); 
 
    document.getElementById("hola2").innerHTML = number; 
 
} 
 

 
document.getElementById("btn").addEventListener('click', next)

<div id="hola2"></div> 
 
<button id="btn">Next</button>

Answer 2

あなたがしていますspliceを使用してアレイからエントリを削除している場合でも、開始時にtotalnumの値を1回だけ設定して更新しないでください。従って、next()のいくつかの呼び出しの後では、配列のインデックスにアクセスする可能性が増しています。それらの配列はスプライスされているため、現在はundefinedです。配列の長さを直接参照するか（単に後者を使用する方が簡単、直感的、読みやすいので）、値をtotalnumに更新する必要があります。 splice()以来

<script> 
    var num = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 

    cont = 0; 

    function next() { 

     var indice = Math.floor(Math.random() * (cont < num.length ?++cont:0)); 
     var number = num[indice]; 
     document.getElementById("hola2").innerHTML =num.splice(indice,1); 

    } 
</script>