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中Object和Function的关系的三段简单代码
Jun 27 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 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
Banner程序
2006/10/09 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
php递归json类实例
2014/12/02 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
js中eval详解
2012/03/30 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
jQuery使用方法
2017/02/04 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Django如何实现上传图片功能
2019/08/16 Python
Python 存取npy格式数据实例
2020/07/01 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
介绍一下linux的文件权限
2014/07/20 面试题
新法人代表任命书
2014/06/06 职场文书
学习十八大宣传标语
2014/10/09 职场文书
民主生活会发言材料
2014/10/20 职场文书
学生上课说话检讨书
2014/10/25 职场文书
2014年话务员工作总结
2014/11/19 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
《窃读记》教学反思
2016/02/18 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
Python利用FlashText算法实现替换字符串
2022/03/31 Python
Go语言编译原理之源码调试
2022/08/05 Golang