JS随机洗牌算法之数组随机排序


Posted in Javascript onMarch 23, 2016

推荐阅读:JavaScript学习笔记之数组的增、删、改、查

洗牌算法是一个比较形象的术语,本质上让一个数组内的元素随机排列。举例来说,我们有一个如下图所示的数组,数组长度为 9,数组内元素的值顺次分别是 1~9:

JS随机洗牌算法之数组随机排序

从上面这个数组入手,我们要做的就是打乱数组内元素的顺序:

JS随机洗牌算法之数组随机排序

代码实现

维基百科上的 Fisher?Yates shuffle 词条对洗牌算法做了详细介绍,下面演示的算法也是基于其中的理论编写的:

Array.prototype.shuffle = function() {
var input = this;
for (var i = input.length-1; i >=0; i--) {
var randomIndex = Math.floor(Math.random()*(i+1)); 
var itemAtIndex = input[randomIndex]; 
input[randomIndex] = input[i]; 
input[i] = itemAtIndex;
}
return input;
}
var tempArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
tempArray.shuffle();
// and the result is...
alert(tempArray);

在上面的代码中,我们创建了一个 shffle() 方法,该方法用于随机排列数组内的元素。此外,我们将该方法挂载在了 Array 对象的原型下面,所以任何数组都可以直接调用该方法:

var tempArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
tempArray.shuffle();

工作原理

看完代码之后,让我们看看它对数组都做了写什么。首先,该方法选中数组的最后一个元素:

JS随机洗牌算法之数组随机排序

接下来确定挑选随机元素的范围,从数组的第一个元素到上一步选中的元素都属于这一范围:

JS随机洗牌算法之数组随机排序

确定范围后,从中随机挑选一个数,这里假设随机选中的元素为 4:

JS随机洗牌算法之数组随机排序

然后交换最后一个元素和随机选中的元素的值:

JS随机洗牌算法之数组随机排序

上面的交换完成后,相当于我们完成了对数组最后一个元素的随机处理。接下来选中数组内倒数第二的元素:

JS随机洗牌算法之数组随机排序

之所以从后往前处理,是因为这样便于确定随机选择的范围。这次我们假定随机到的元素为 2:

JS随机洗牌算法之数组随机排序

接着交换倒数第一个元素和 2 号元素的值,完成对倒数第二个元素随机排列的处理。然后是选中倒数第三个元素,重复之前的操作:

JS随机洗牌算法之数组随机排序

剩下的就是一些重复性的工作,不多做介绍了。

分析代码

在上一节给各位用图例演示了洗牌流程,下面我们从代码本身看看洗牌流程。先从 shuffle 函数说起吧:

Array.prototype.shuffle = function() {
var input = this;
for (var i = input.length-1; i >=0; i--) {
var randomIndex = Math.floor(Math.random()*(i+1)); 
var itemAtIndex = input[randomIndex]; 
input[randomIndex] = input[i]; 
input[i] = itemAtIndex;
}
return input;
}

shuffle 函数挂载在 Array 对象的原型之下,便于数组直接调用该函数。在 shuffle 函数内部,this 引用的就是调用该 shuffle 的数组:

var input = this;

在上面的代码中,我用一个新的变量引用 this,也就是调用 shuffle 函数的数组。下一步,看一下 for 循环内都干了什么:

for (var i = input.length-1; i >=0; i--) {
var randomIndex = Math.floor(Math.random()*(i+1)); 
var itemAtIndex = input[randomIndex]; 
input[randomIndex] = input[i]; 
input[i] = itemAtIndex;
}

该循环用于遍历所有数组内的所有元素,并进行随机交换。注意,遍历顺序是从后往前进行的,也就是说从 input.length-1 位置的元素开始,知道遍历到数组中的第一个元素。遍历过程中的位置由变量 i 指定。

这里的变量 i 就是上面图例中被选中的元素:

洗牌算法

接下来,使用了两行代码在指定范围内挑选一个随机元素:

var randomIndex = Math.floor(Math.random()*(i+1)); 
var itemAtIndex = input[randomIndex];

变量 randomIndex 存储了一个随机数,该随机数可以用作数组的索引,进而提取一个随机元素。注意,该随机数的最大值并不是数组的长度,而是变量 i 的值。

确定了随机元素的索引之后,用新的变量保存该元素的值,然后交换选中元素和随机元素的值:

var itemAtIndex = input[randomIndex];
input[randomIndex] = input[i]; 
input[i] = itemAtIndex;

在这三行代码中,第一行使用新的变量保存了随机元素的值;第二行将选中元素 input[i] 的值赋给随机元素 input[randomIndex];第三行就随机元素的值 itemAtIndex 赋给选中元素 input[i]。本质上是一个互换两个元素的值的过程,并不难理解。

至此,循环内的逻辑就介绍完了,剩下的都是重复操作。

随机性测试

JS随机洗牌算法之数组随机排序

上图是使用 Highcharts 制作的随机性测试图表,以可视化的方式校验本文中洗牌算法的随机性。每次刷新页面都会重新计算和生成该图表。

生成上图的数据是这样计算而来的:首先创建一个数组(上图使用的数组为 [0, 1, 2 ... 18, 19, 20]),然后使用本文中的洗牌算法重新排序,排序完成后记录每一个元素的值……以此步骤执行 100000 次,最后对同一索引位置上的数值进行求和。如此执行 10000 次之后,索引之间的总值应该相差不大。

由计算可得:

JS随机洗牌算法之数组随机排序

以上内容是小编给大家介绍的JS随机洗牌算法之给数组随机排序的相关叙述,希望对大家有所帮助!

Javascript 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
vue实现在线翻译功能
Sep 27 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 #Javascript
JavaScript学习笔记之数组去重
Mar 23 #Javascript
JavaScript学习笔记之数组随机排序
Mar 23 #Javascript
JavaScript学习笔记之数组求和方法
Mar 23 #Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 #Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 #Javascript
BootStrap实用代码片段之一
Mar 22 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
两个开源的Php输出Excel文件类
2010/02/08 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python实现网页录音效果
2020/10/26 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
毕业生自荐书模版
2014/01/04 职场文书
物业品质提升方案
2014/06/08 职场文书
英语系毕业生求职信
2014/07/13 职场文书
学校党员对照检查材料
2014/08/28 职场文书
担保书范文
2015/01/20 职场文书
亲属关系公证书样本
2015/01/23 职场文书
资料员岗位职责
2015/02/10 职场文书
家装电话营销开场白
2015/05/29 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
python爬虫--selenium模块
2021/03/31 Python
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
python manim实现排序算法动画示例
2022/08/14 Python