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 相关文章推荐
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
JS实现时间校验的代码
May 25 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
vue mvvm数据响应实现
Nov 11 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下读取文本文件的代码
2008/07/02 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
利用ctypes提高Python的执行速度
2016/09/09 Python
Python编写登陆接口的方法
2017/07/10 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python创建字典的八种方式
2019/02/27 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Django实现网页分页功能
2019/10/31 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
python实现猜拳游戏
2020/03/04 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
工厂保洁员岗位职责
2013/12/04 职场文书
年检委托书
2014/08/30 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
地雷战观后感
2015/06/09 职场文书
离职证明格式样本
2015/06/12 职场文书
体育教师教学随笔
2015/08/15 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书