脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS数组随机排序

JS实现数组随机排序的三种方法详解

 更新时间：2022年05月20日 10:23:14   作者：接着奏乐接着舞。  
这篇文章主要为大家详细介绍了JavaScript中实现数组随机排序的三种方式，文中的示例代码讲解详细，对我们学习或工作有一定参考价值，需要的可以参考一下

1.利用数组方法sort实现随机排序

实现随机排序方法还是很多的，用for循环是可以写的，用Lodash等三方js方法库也行。但个人以为使用sort比较方便，但是他又缺点，缺点就是不够那么的随机，我看过sort运行机制后，发现他竟然是利用一个比较器两两比较出来的。

var arr = [1, 2, 3, 4, 5]
 
arr.sort(function () {
  return Math.random() - 0.5
})
console.log(arr);

2.洗牌算法实现随机排序

从原始数组中每次随机选中一个元素，然后放入新数组中，每取出一个元素后，将将它从原数组中取出（使用splice方法），原数组长度减一。

举例：

现在我有红桃K、黑桃A、小王三张牌，要求打乱顺序，你可以从三张牌抽出任意一张，假设你抽到的是小王，那么我手里三张牌变成两张牌，你手里变成1张牌，以此类推，实现随机排序。

代码实现：

function shuffle(array){
    let res = [], random;
    while(array.length>0){
        random = Math.floor(Math.random()*array.length);
        res.push(array[random]);
        array.splice(random, 1);
    }
    return res;
}
 
console.log(shuffle([1,2,3,4,5]));

3.洗牌算法深入分析

思路：我有一副牌，随机抽取牌，旧的牌数量相应减少!

function shuffle(m) //洗牌 //抽牌法
{
//生成m张牌
var arr = new Array(m);
for (var i=0; i<m; i++) {
arr[i] = i;
}
//每次抽出一张牌，需要遍历整个数组，所以很耗时。
var arr2 = new Array();
for (var i=m; i>0; i–) {
var rnd = Math.floor(Math.random()*i);
arr2.push(arr[rnd]);
arr.splice(rnd,1);
}
return arr2;
}

但是这样的话，因为数组如果很大的话，删除中间的某个元素，会导致后面的数据被执行，会对性能影响很大。

我们删除那个元素的目的就是为了不产生空牌。

除了删除那个元素之外，我们是不是还有其它方式来去除空牌？

只需把最后一张未抽的牌放在那个抽走的位置上就可以了。

顺着这个思路我们可以优化成这样：

代码如下:

function shuffle_pick(m) //洗牌 //抽牌法优化牌
{
//生成m张牌
var arr = new Array(m);
for (var i=0; i<m; i++) {
arr[i] = i;
}
//每次抽出一张牌，放在另一堆。把最后一张未抽的牌放在空位子上。
var arr2 = new Array();
for (var i=m; i>0;) {
var rnd = Math.floor(Math.random()*i);
arr2.push(arr[rnd]);
arr[rnd] = arr[–i];
}
return arr2;
}

除了抽牌思路，我们还可以用换牌思路：

“随机交换两个位置，共交换n次，n越大，越接近随机”。

顺着这个思路，做一点小调整就可以了：第i张与任意一张牌换位子，换完一轮即可。

代码如下:

function shuffle_swap(m) //洗牌 //换牌法
{
//生成m张牌
var arr = new Array(m);
for (var i=0; i<m; i++) {
arr[i] = i;
}
//第i张与任意一张牌换位子，换完一轮即可
for (var i=0; i<m; i++) {
var rnd = Math.floor(Math.random()*(i+1)),
temp = arr[rnd];
arr[rnd] = arr[i];
arr[i]=temp;
}
return arr;
}

除了抽牌与换牌的思路，我们还可以用插牌的思路：先有一张牌，第二张牌有两个位置可随机插入（第一张牌前，或后），第三张牌有三个位置可随机插入（放在后面，或插在第一位，或插在第二位），依此类推

代码如下:

function shuffle_insert_1(m) //洗牌 //插牌法
{
//每次生成一张最大的牌，插在随机的某张牌前。因为要在数组里插入元素，把后面的所有元素向后挤一位，所以很耗时。
var arr = [0];
for (var i=1; i<m; i++) {
arr.splice(Math.floor(Math.random()*(i+1)),0,i);
}
return arr;
}

以上的代码也会有一些问题：就是随着牌数的增多，插牌变得越来越困难，因为插牌会导致后面的很多牌都往后推一步。

当然，我们也可以适当的优化一下：先有n-1张牌，第n张牌放在最后，然后与任意一张牌互换位置。

代码如下：

function shuffle_insert(m) //洗牌 //插牌法优化版，可以用数学归纳法证明，这种洗牌是均匀的。
{
//每次生成一张最大的牌，与随机的某张牌换位子
var arr = new Array(m);
arr[0] = 0;
for (var i=1; i<m; i++) {
var rnd = Math.floor(Math.random()*(i+1));
arr[i] = arr[rnd];
arr[rnd] = i;
}
return arr;
}

全部代码

代码如下:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>JK：javascript 洗牌算法 </title>
</head>
<body>
<script type=”text/javascript”>
function shuffle_pick_1(m) //洗牌 //抽牌法
{
//生成m张牌
var arr = new Array(m);
for (var i=0; i<m; i++) {
arr[i] = i;
}
//每次抽出一张牌，放在另一堆。因为要在数组里抽出元素，把后面的所有元素向前拉一位，所以很耗时。
var arr2 = new Array();
for (var i=m; i>0; i–) {
var rnd = Math.floor(Math.random()*i);
arr2.push(arr[rnd]);
arr.splice(rnd,1);
}
return arr2;
}
function shuffle_pick(m) //洗牌 //抽牌法优化牌
{
//生成m张牌
var arr = new Array(m);
for (var i=0; i<m; i++) {
arr[i] = i;
}
//每次抽出一张牌，放在另一堆。把最后一张未抽的牌放在空位子上。
var arr2 = new Array();
for (var i=m; i>0;) {
var rnd = Math.floor(Math.random()*i);
arr2.push(arr[rnd]);
arr[rnd] = arr[–i];
}
return arr2;
}
function shuffle_swap(m) //洗牌 //换牌法
{
//生成m张牌
var arr = new Array(m);
for (var i=0; i<m; i++) {
arr[i] = i;
}
//第i张与任意一张牌换位子，换完一轮即可
for (var i=0; i<m; i++) {
var rnd = Math.floor(Math.random()*(i+1)),
temp = arr[rnd];
arr[rnd] = arr[i];
arr[i]=temp;
}
return arr;
}
function shuffle_insert_1(m) //洗牌 //插牌法
{
//每次生成一张最大的牌，插在随机的某张牌前。因为要在数组里插入元素，把后面的所有元素向后挤一位，所以很耗时。
var arr = [0];
for (var i=1; i<m; i++) {
arr.splice(Math.floor(Math.random()*(i+1)),0,i);
}
return arr;
}
function shuffle_insert(m) //洗牌 //插牌法优化版，可以用数学归纳法证明，这种洗牌是均匀的。
{
//每次生成一张最大的牌，与随机的某张牌换位子
var arr = new Array(m);
arr[0] = 0;
for (var i=1; i<m; i++) {
var rnd = Math.floor(Math.random()*(i+1));
arr[i] = arr[rnd];
arr[rnd] = i;
}
return arr;
}
//alert(shuffle_pick(10))
var funcs = [shuffle_pick_1, shuffle_pick, shuffle_swap, shuffle_insert_1, shuffle_insert],
funcNames = [“抽牌”, “抽牌优化”, “换牌”, “插牌”, “插牌优化”]
m = 10000,
times=[];
for(var i = 0; i < funcs.length; i++){
var d0= new Date();
funcs[i](m);
funcNames[i] = (new Date() – d0) + ‘\t' + funcNames[i];
}
alert(funcNames.join(‘\n'));
</script>
</body>
</html>

到此这篇关于JS实现数组随机排序的方法详解的文章就介绍到这了,更多相关JS数组随机排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • bootstrap校验laydate起止日期联动失效问题及解决方法

    bootstrap校验laydate起止日期联动失效问题及解决方法

    这篇文章主要介绍了bootstrap校验laydate起止日期联动失效问题,项目中用到bootstrapValidator，以及laydate（by:贤心，插件效果美观），本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-01-01
  • 原生js封装的一些jquery方法(详解)

    原生js封装的一些jquery方法(详解)

    下面小编就为大家带来一篇原生js封装的一些jquery方法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Javascript级联下拉菜单以及AJAX数据验证核心代码

    Javascript级联下拉菜单以及AJAX数据验证核心代码

    最初是只要输入框的两个数据相符就行，现在的要求是两个下拉菜单的数据也要相符，于是，我利用此机会，将代码重构了一次，感兴趣的朋友们可以借此学习一下
    2013-05-05
  • JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    这篇文章主要介绍了JS实现放大、缩小及拖拽图片的方法,可兼容IE及火狐等浏览器,通过javascript自定义函数实现针对图片的放大、缩小及拖拽等功能,涉及javascript动态操作页面元素的相关技巧,需要的朋友可以参考下
    2016-08-08
  • 微信小程序仿知乎实现评论留言功能

    微信小程序仿知乎实现评论留言功能

    这篇文章主要为大家详细介绍了微信小程序仿知乎实现评论留言功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js实现音乐播放器

    js实现音乐播放器

    这篇文章主要为大家详细介绍了js实现音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript中Cookie操作实例

    JavaScript中Cookie操作实例

    这篇文章主要介绍了JavaScript中Cookie操作实例,本文先是讲解了Cookie的语法,然后给了实际操作实例,需要的朋友可以参考下
    2015-01-01
  • 学习JavaScript一定要知道的3个小技巧

    学习JavaScript一定要知道的3个小技巧

    这篇文章主要给大家分享的是学习JavaScript一定要知道的3个小技巧，通常在 Angular 或 React 项目中，code review 时看到一些老式的 JavaScript 代码，就会将开发人员归类为初学者，下面我们就来一起看看初学者需要知道的三个小技巧,需要的朋友可以参考一下
    2021-12-12
  • js Li来实现的效果

    js Li来实现的效果

    原理就是利用js控制li的一些样式，在实际应用中，还需要注意li的list-style属性。
    2008-12-12
  • javascript入门之数组[新手必看]

    javascript入门之数组[新手必看]

    本文介绍了javascript 数组的定义和数组元素的操作，ECMAScript中的数组方法...希望对大家有所帮助
    2016-11-11

最新评论