JavaScript学习笔记之数组随机排序


Posted in Javascript onMarch 23, 2016

推荐阅读:JavaScript学习笔记之数组求和方法

JavaScript中提供了sort()和reverse()方法对数组项重新排序。但很多时候这两个方法无法满足我们实际业务的需求,比如说扑克牌游戏中的随机洗牌。

JavaScript学习笔记之数组随机排序

在这篇文章一起来学习如何完成上面这个示例的效果,以及一些有关于数组随机排序的相关知识。

在网上查了一下有关于数组随机排序的相关资料,都看到了Math.random()的身影。打开浏览器控制器,输入:

Math.random()

JavaScript学习笔记之数组随机排序

从图中可以看出Math.random()得到的是0~1之间的随机数。众所周知,sort()可以调用一个函数做为参数,如果这个函数返回的值为-1表示数组中的a项排在b项前。如此一来,可以写一个随机函数,让Math.random()随机出来的数与0.5做为一个比较,如果大于.5就返回 -1(a排在b前面),反之返回1(b排在a前面):

function randomSort(a, b) {
return Math.random() > 0.5 ? -1 : 1;
}

看个示例:

var arr = [1,2,3,4,5,6,7,8,9];
arr.sort(randomSort);

JavaScript学习笔记之数组随机排序

这样一来,就可以实现文章开头的示例效果:

虽然前面的方法实现了数组的随机排序,但总感觉每个元素被派到新数组的位置不是随机的。就如前面的示例,数组arr中值为1的元素,它的原先键值为0,随机排序后,1的键值要求上为0-8的几率是一样的。然后在这里是递减的,原因是sort()方法是依次比较的。

针对这种现象,我们可以使用下面这种递归的方法来处理:

function randomSort(arr, newArr) {
// 如果原数组arr的length值等于1时,原数组只有一个值,其键值为0
// 同时将这个值push到新数组newArr中
if(arr.length == 1) {
newArr.push(arr[0]);
return newArr; // 相当于递归退出
}
// 在原数组length基础上取出一个随机数
var random = Math.ceil(Math.random() * arr.length) - 1;
// 将原数组中的随机一个值push到新数组newArr中
newArr.push(arr[random]);
// 对应删除原数组arr的对应数组项
arr.splice(random,1);
return randomSort(arr, newArr);
}

如此一来,我们就可以这样使用:

for (var i = 0; i < 10; i++) {
var arr=[1,2,3,4,5,6,7,8,9];
var newArr=[];
randomSort(arr,newArr);
console.log(newArr);
}

输出结果:

JavaScript学习笔记之数组随机排序

执行randomSort(arr,newArr)函数之后,原数组arr就清空了。

如果使用这种方法来做文章开头洗牌的示例,就要在resetPic()函数中重置pukePic数组:

除了上面的两种方法之外,@Traveller在DIV.IO分享了一篇《数组元素随机化排序算法实现》,这篇文章提供了三种数组项随机排序的实现方法:

使用数组sort方法对数组元素随机排序

Array.prototype.shuffle = function(n) {
var len = this.length ,
num = n ? Math.min(n,len) : len,
arr = this.slice(0);
arr.sort(function(a,b){
return Math.random()-0.5;
});
return arr.slice(0,num-1);
}

随机交换数组内的元素

lib = {}
lib.range = function(min,max) {
return min + Math.floor(Math.random()*(max-min+1));
}

Array.prototype.shuffle = function(n) {
var len = this.length,
num = n ? Math.min(n,len) : len,
arr = this.slice(0),
temp,
index;
for (var i=0;i<len;i++){
index = lib.range(i,len-1);
temp = arr[i];
arr[i] = arr[index];
arr[index]=temp;
}
return arr.slice(0,num);
}

随机从原数组抽取一个元素,加入到新数组

lib = {}
lib.range = function(min,max) {
return min+Math.floor(Math.random()*(max-min+1));
}
Array.prototype.shuffle = function(n) {
var len = this.length, 
num = n ? Math.min(n,len) : len,
arr = this.slice(0),
result=[],
index;
for (var i=0;i<num;i++){
index = lib.range(0,len-1-i);
// 或者 result.concat(arr.splice(index,1))
result.push(arr.splice(index,1)[0]);
}
return result
}

洗牌算法

数组随机排序其基本原理是洗牌算法(Fisher?Yates shuffle):

是一种将有限集合的顺序打乱的一种算法

原理

定义一个数组(shuffled),长度(length)是原数组(arr)长度
取 0 到 index (初始0) 随机值 rand, shuffled[index] = shuffled[rand], shuffled[rand] = arr[index]
index++ ; 重复第二步,直到 index = length -1
就是 shuffled 从 0 到 length-1 的赋值过程,并且新加入的值是 arr[index],shuffled[index] 的值是已赋值的元素中随机值shuffled[rand],因为这样会有两个重复的值,所以 shuffled[rand] 就等于新加入的值 arr[index]

underscore.js 中的 shuffle 方法

function random(min, max) {
if (max == null) {
max = min;
min = 0;
}
return min + Math.floor(Math.random() * (max - min + 1));
};
function shuffle(arr) {
var length = arr.length,
shuffled = Array(length);
for (var index = 0, rand; index < length; index++) {
rand = random(0, index);
if (rand !== index) shuffled[index] = shuffled[rand];
shuffled[rand] = arr[index];
}
return shuffled;
}

实际运用:

var arr = [1,2,3,4,5,6,7,8,9];
for (var i = 0; i < 10; i++){
console.log(shuffle(arr));
}

Chrome输出的结果如下:

JavaScript学习笔记之数组随机排序

同样的,使用洗牌算法来完成文章最开头的示例:

JavaScript学习笔记之数组随机排序

还有更简单易理解的写法:

function shuffle(arr) {
var i, 
j,
temp;
for (i = arr.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
};

总结

这篇文章主要总结和收集了有关于数组随机排序我相关资料。当然在坊间实现类似功能的方法还有很多种,此处只是收集和整理了这些,如果你有更好的方法,欢迎在评论中与我们一起分享。

以上内容是小编给大家介绍的JavaScript学习笔记之数组随机排序的相关介绍,希望对大家有所帮助!

Javascript 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 #Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 #Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 #Javascript
BootStrap实用代码片段之一
Mar 22 #Javascript
Javascript中的几种继承方式对比分析
Mar 22 #Javascript
JS函数定义方式的区别介绍
Mar 22 #Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 #Javascript
You might like
php精确的统计在线人数的方法
2015/10/21 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
深入理解vue Render函数
2017/07/19 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
Python求导数的方法
2015/05/09 Python
python实现识别相似图片小结
2016/02/22 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python3多线程知识点总结
2019/09/26 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
python 如何调用远程接口
2020/09/11 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
优秀员工表扬信
2014/01/17 职场文书
学校课外活动总结
2014/05/08 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
地震捐款倡议书
2014/08/29 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL