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 相关文章推荐
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
基于axios 的responseType类型的设置方法
Oct 29 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 Memcached应用实现代码
2010/02/08 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php实现encode64编码类实例
2015/03/24 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Pytorch之Variable的用法
2019/12/31 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
深入分析python 排序
2020/08/24 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
给男朋友的道歉信
2014/01/12 职场文书
主题酒店策划书
2014/01/28 职场文书
中央空调节能方案
2014/06/15 职场文书
生活小常识广播稿
2014/09/16 职场文书
入股合作协议书
2014/10/12 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS