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 相关文章推荐
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
微信小程序之蓝牙的链接
Sep 26 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
使用Angular CLI生成路由的方法
Mar 24 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
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
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php字符串过滤与替换小结
2015/01/26 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
php封装一个异常的处理类
2017/06/08 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
不使用 JS 匿名函数理由
2017/11/17 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
python使用socket远程连接错误处理方法
2015/04/29 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Python同步遍历多个列表的示例
2019/02/19 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python提取xml里面的链接源码详解
2019/10/15 Python
生产部主管岗位职责
2014/01/06 职场文书
关于母亲节的感言
2014/02/04 职场文书
爱情寄语大全
2014/04/09 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL
redis lua限流算法实现示例
2022/07/15 Redis