js数组操作打乱数组

<style>
  html, body { margin: 0; padding: 0;}
  div span { display: inline-block;  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 ));
原文地址:https://www.cnblogs.com/manchun/p/4499934.html