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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 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
Terran历史背景
2020/03/14 星际争霸
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
javascript for循环性能测试示例
2019/08/07 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python生成验证码图片代码分享
2016/01/28 Python
python删除过期log文件操作实例解析
2018/01/31 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python实现flappy bird游戏
2018/12/24 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
详解python变量与数据类型
2020/08/25 Python
python源文件的字符编码知识点详解
2021/03/04 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
2014年计算机专业个人自我评价
2014/01/19 职场文书
2014和解协议书范文
2014/09/15 职场文书
写景作文评语集锦
2014/12/25 职场文书
2015年体育部工作总结
2015/04/02 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
元旦晚会开场白
2015/05/29 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书