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 Select操作大集合
May 26 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
React中的refs的使用教程
Feb 13 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 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
很实用的一个完整email发送程序
2006/10/09 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
PHP 模拟$_PUT实现代码
2010/03/15 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PDO::commit讲解
2019/01/27 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
js封装成插件的步骤方法
2017/09/11 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
浅谈Python NLP入门教程
2017/12/25 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python求最大值最小值方法总结
2019/06/25 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
Python 自由定制表格的实现示例
2020/03/20 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
创新比赛获奖感言
2014/02/13 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
整改报告怎么写
2014/11/06 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python