JavaScript随机打乱数组顺序之随机洗牌算法


Posted in Javascript onAugust 02, 2016

假如有一个数组是这样子:

var arr1 = ["a", "b", "c", "d"];

如何随机打乱数组顺序,也即洗牌。

有一个比较广为传播的简单随机算法:

function RandomSort (a,b){ return (0.5 - Math.random()); }

实际证明上面这个并不完全随机。

随便一搜网上太多这种东西了,看一下stackoverflow上的一个高分回答,答案出自github上。

knuth-shuffle
The Fisher-Yates (aka Knuth) shuffle for Browser and Node.JS

下面一起看看上面说的这个算法,代码如下:

/*jshint -W054 */
(function (exports) {
'use strict';
// http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
function shuffle(array) {
var currentIndex = array.length
, temporaryValue
, randomIndex
;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
exports.knuthShuffle = shuffle;
}('undefined' !== typeof exports && exports || 'undefined' !== typeof window && window || global));

作者推荐使用浏览器写法:

(function () {
'use strict';
var a = [2,11,37,42]
, b
;
// The shuffle modifies the original array
// calling a.slice(0) creates a copy, which is assigned to b
b = window.knuthShuffle(a.slice(0));
console.log(b);
}());

Nodejs:

npm install -S knuth-shuffle
(function () {
'use strict';
var shuffle = require('knuth-shuffle').knuthShuffle
, a = [2,11,37,42]
, b
;
// The shuffle modifies the original array
// calling a.slice(0) creates a copy, which is assigned to b
b = shuffle(a.slice(0));
console.log(b);
}());

还有其它从这个算法中变形去的,比如下面这个for循环的。其它的就不说了。

/**
* Randomize array element order in-place.
* Using Durstenfeld shuffle algorithm.
*/
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

使用ES2015(ES6)

Array.prototype.shuffle = function() {
let m = this.length, i;
while (m) {
i = (Math.random() * m--) >>> 0;
[this[m], this[i]] = [this[i], this[m]]
}
return this;
}

使用:

[1, 2, 3, 4, 5, 6, 7].shuffle();

发现中文搜索随机算法一大堆,但究竟是不是完全随机,效率和兼容性都有待考究,建议后面如果有需要用到随机打乱数组元素,可以用上面这个。

Javascript 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
canvas的神奇用法
Feb 03 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 #Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 #Javascript
实现React单页应用的方法详解
Aug 02 #Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 #Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 #Javascript
AngularJS ng-mousedown 指令
Aug 02 #Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 #Javascript
You might like
PHP开发的一些注意点总结
2010/10/12 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
PHP如何实现跨域
2016/05/30 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
动态添加js事件实现代码
2009/03/12 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
Python时间戳使用和相互转换详解
2017/12/11 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
python爬虫基础之urllib的使用
2020/12/31 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
优秀应届毕业生自荐信
2013/11/16 职场文书
应届毕业生求职信
2013/11/30 职场文书
物业门卫岗位职责
2013/12/28 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
关于期中考试的反思
2014/02/02 职场文书
铁路工务反思材料
2014/02/07 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技