JavaScript随机打乱数组顺序之随机洗牌算法

 更新时间:2016年08月02日 11:06:18   投稿:mrr  
这篇文章主要介绍了JavaScript随机打乱数组顺序之随机洗牌算法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

假如有一个数组是这样子:

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();

发现中文搜索随机算法一大堆,但究竟是不是完全随机,效率和兼容性都有待考究,建议后面如果有需要用到随机打乱数组元素,可以用上面这个。

相关文章

  • JS简单计算器实例

    JS简单计算器实例

    这篇文章主要介绍了JS简单计算器的实现方法,以加法实例分析了js实现计算功能的技巧,需要的朋友可以参考下
    2015-01-01
  • 什么是JavaScript注入攻击?

    什么是JavaScript注入攻击?

    本文告诉大家什么是js注入,讨论防止 ASP.NET MVC 应用程序受到 JavaScript 注入攻击的两种技术,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JavaScript 继承的实现

    JavaScript 继承的实现

    正因为JavaScript本身没有完整的类和继承的实现,并且我们也看到通过手工实现的方式存在很多问题, 因此对于这个富有挑战性的任务网上已经有很多实现了
    2009-07-07
  • JavaScript中数组reduce()方法使用详情

    JavaScript中数组reduce()方法使用详情

    这篇文章主要介绍了JavaScript中数组reduce()方法使用详情,reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值,更多相关内容需要的小伙伴可以参考一下下面文章介绍
    2022-09-09
  • Vue项目中关于全局css的处理

    Vue项目中关于全局css的处理

    我们在写CSS的时候,会遇到大量相同的属性(比如:margin-top:10px)这种属性几乎每个vue页面都有。这个时候,我们可以把css挂载到全局上,供所有vue页面使用,同时也方便修改。感兴趣的同学可以参考一下
    2023-04-04
  • js实现图片无缝滚动特效

    js实现图片无缝滚动特效

    这篇文章主要为大家详细介绍了js实现图片无缝循环滚动特效的相关资料,本实例在网页中较为常见,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • javascript实现手动点赞效果

    javascript实现手动点赞效果

    这篇文章主要为大家详细介绍了javascript实现手动点赞效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • Javascript 是你的高阶函数(高级应用)

    Javascript 是你的高阶函数(高级应用)

    这篇文章主要介绍了Javascript 是你的高阶函数 ,需要的朋友可以参考下
    2015-06-06
  • Three.js基础部分学习

    Three.js基础部分学习

    本文主要分享了一个案例,介绍了使用Three.js绘制旋转立方体的方法与实现过程。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 基于javascript的在火狐里面强制换行字符

    基于javascript的在火狐里面强制换行字符

    火狐也不知道为什么,自己功能上,样式上面,都无法让其强制换行,这里用JS来实现火狐里面强制换行的方法。
    2010-06-06

最新评论