js數組操作-打亂數組

<style>
  html, body { margin: 0; padding: 0;}
  div span { display: inline-block; width: 25px; height: 25px; background: red; }
</style>

<div id="wrap">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

　需求：1、點擊1個span,我所點擊的span顯示目標值（數組的一個任意值,隨機的），其它5個span隨機內容為數組的任意項，6個span顯示的內容不能重復。

　思想：1、生成一個沒有重復數字的數組arr2，在這個數組中將任意兩個數組項互換，從而打散數組。

　　　　2、在span上加入index屬性，將目標值從數組中去掉，開始打散數組。

　　　　3、點擊任意span, 取到當前span的index值，將目標值按這個index值插入到打散后的數組中。

　　　　4、對ospans進行for循環，將arr2的數組項賦給每個span的innerHTML.

<script>
  function shuffle(aArr) { // 打散數組函數
    var iLength = aArr.length
      , i = iLength
      , nTemp
      , iRandom;
    while ( i-- ) {
      if (i !== (iRandom = Math.floor(Math.random()*iLength))) { // 不是同一個數組項的前提下進行互換
        nTemp = aArr[i];
        aArr[i] = aArr[iRandom];
        aArr[iRandom] = nTemp;
      };
    };
    return aArr;
  };
  var oSpans = document.getElementById("wrap").getElementsByTagName("span");
  var arr2 = [1, 2, 3, 4, 5, 6];
  var flag = true;
  for (var i = 0, len = oSpans.length; i < len; i++) {
    oSpans[i].index = i;
    oSpans[i].onclick = function() {
      var t = parseInt(Math.random(6)); // 目標坐標
      var target = arr2[t]; // 目標值
      arr2.splice(t, 1); // 將目標值從數組中刪除
      shuffle(arr2); // 數組隨機排列
      var index = this.index; // 獲得點擊后span的index
      arr2.splice(index, 0, target); //此時將target插入到arr2中
      for (var i = 0, len = oSpans.length; i < len; i++) {
        oSpans[i].innerHTML = arr2[i];
      };
    };
  };
</script>

今天看到了雨夜帶刀的博客，附上地址：http://stylechen.com/grandomarr.html，我將兩個方法結合了一下：

var arr = [],
    length = 100,
    i = 0;
  for( ; i < length; i++ ){
    arr.push( i );
  }
  var gRandomArr = function( arr, length ){
    // 從原數組中一次性返回10個元素
    var arr2 = arr.slice( 0, length );
    // 使用sort將原數組的順序打亂，讓有序變成無序
    arr2.sort(function(){
      return Math.random() - 0.5;
    });
    return arr2;
  };
  // 調用
  console.log(gRandomArr( arr, 10 ));