javascript使用sort()方法和Math.random()随机打乱数组内容顺序并赋值html元素
  • 分享到微信朋友圈
    X

JavaScript 实现数组随机排序通常使用于网站的多线路选择以及超链接的href赋值,本案例使用SORT和MATH.RANDOM组合, javaScript的sort()方法可以接收一个比较函数来决定元素间的排序方式。借助Math.random()生成0到1之间的随机数,可以实现简单的数组乱序。但是,这种方法的随机性并不是最理想的, 因为Math.random()生成的随机值对排序结果的影响并不均衡。

使用sort()方法的有点

  • 这种方法非常简单,只需要几行代码即可实现。

  • sort()方法是原地排序,不需要额外的内存空间。

sort()方法并不不稳定,随机性不高,不能完全随机

主要js代码与解析

<script>
    //定义数组内容
    let urlArr = [
              "线路1",
              "线路2",
              "线路3",
              "线路4",
              "线路5",
            ];
    //生成随机-1或者1
    function randomsort(a, b) {
              return Math.random() > 0.5 ? -1 : 1;
            }
    //使用sort()重新排序数组顺序
    urlArr.sort(randomsort);
    
    //使用forEach()循环赋值url元素值
    document.querySelectorAll(".url").forEach((ele, i) => {
      ele.innerText = urlArr[i];
    });
</script>