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 相关文章推荐
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
精通JavaScript的this关键字
May 28 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
Angular2库初探
Mar 01 Javascript
Javascript实现基本运算器
Jul 15 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
基于vue+element实现全局loading过程详解
Jul 10 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
1 Tube Radio
2021/03/02 无线电
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
php代码检查代理ip的有效性
2016/08/19 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
php源码的安装方法和实例
2019/09/26 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
python解析xml文件操作实例
2014/10/05 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
python利用opencv保存、播放视频
2020/11/02 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
社区活动邀请函范文
2014/01/29 职场文书
文明社区申报材料
2014/08/21 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js