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 相关文章推荐
JS继承 笔记
Jul 13 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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在网页中动态生成PDF文件详细教程
2014/07/05 PHP
php数据访问之查询关键字
2016/05/09 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
React Router v4 入坑指南(小结)
2018/04/08 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python yield使用方法示例
2013/12/04 Python
十个Python程序员易犯的错误
2015/12/15 Python
python命令行参数用法实例分析
2019/06/25 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
详解Django配置JWT认证方式
2020/05/09 Python
Python3读写ini配置文件的示例
2020/11/06 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
高中的自我鉴定
2013/12/16 职场文书
厨师长岗位职责
2014/03/02 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
红色革命电影观后感
2015/06/18 职场文书