脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js随机函数

通过js随机函数Math.random实现乱序

 更新时间：2020年05月19日 11:10:07   作者：沐浴点阳光  
这篇文章主要介绍了通过js随机函数Math.random实现乱序,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

乱序的意思想必没有不知道：就是将数组打乱。听到乱序一般都会想到js的随机函数Math.random();

var values = [1, 2, 3, 4, 5];
values.sort(function() {
  return Math.random() - 0.5;
});
console.log(values)

利用数组的sort方法，判断随机出来的0~1值与0.5的大小，实现排序。看似一个很不错的方案，代码逻辑也没毛病，一般情况下也确实能够做到乱序。但是，这是一个伪排序，是的还有但是（我也是今天才知道的，不求甚解的毛病啊~），为什么呢？先看看这个乱序的结果吧：

var times = [0, 0, 0, 0, 0];
for (var i = 0; i < 100000; i++) {
  let arr = [1, 2, 3, 4, 5];
  arr.sort(() => Math.random() - 0.5);
  times[arr[4] - 1]++;
};
console.log(times)

测试的原理是：将[1, 2, 3, 4, 5]乱序10万次，计算乱序后数组的最后一个元素是1,2,3,4,5的次数分别是多少。

运行几次得到的结果为：

由这几次运行得到的结果可以看出：2出现的最后的次数明显少于其他数字，不是随机吗？按理说概率应该是相差不多才对啊！
其实问题是在sort方法，各个浏览器对sort的实现方式不一样。

Chrome的sort

基于V8引擎，它的排序算进行了很多的优化，但是核心是小于等于10的数组用插入排序（稳定），大于10的采用了quickSort（不稳定）

FireFox的sort

基于SpiderMonkey引擎，采用了归并排序（稳定）

Safari的sort

基于Nitro（JavaScriptCore ）引擎，如果没有自定义的排序规则传入，采用桶排序（不一定稳定， 桶排序的稳定性取决于桶内排序的稳定性, 因此其稳定性不确定。），传入自定义规则，采用归并排序（稳定）

Microsoft Edge/IE9+

基于Chakra引擎，采用快排（不稳定）

以下用chrome测试乱序各种结果的概率：

var times = 100000;
var res = {};
for(var i = 0; i < times; i++){
  var arr = [1, 2, 3];
  arr.sort(() => Match.random() - 0.5);
  var key = JSON.stringify(arr);
  res[key] ? res[key]++ : res[key] = 1;
}

// 为了方便展示，转换成百分比
for (var key in res) {
  res[key] = res[key] / times * 100 + '%';
}
console.log(res);

结果如下

几种结果出现的概率相差很大...所以说不是一个真正的乱序。

Fisher-Yates算法【也叫“洗牌算法”】：为什么叫 Fisher–Yates 呢？ 因为这个算法是由 Ronald Fisher 和 Frank Yates 首次提出的。代码如下：

function shuffle(a) {
  var j, x, i;
  for (i = a.length; i; i--) {
    j = Math.floor(Math.random() * i);
    x = a[i-1];
    a[i - 1] = a[j];
    a[j] = x;
  }
  return a;
}

其原理就是：遍历数组元素，然后将当前元素与以后随机位置的元素进行交换，这样乱序更加彻底。

如果用ES6的写法还能精简成：

function shuffle(a) {
  for(let i = a.length; i; i--) {
    let j = Math.floor(Math.random() * i);
    [a[i - 1], a[j]] = [a[j], a[i - 1]];
  }
  return a;
}

再用上面的demo测试一下：

var times = 100000;
var res = {};

for (var i = 0; i < times; i++) {
  var arr = shuffle([1, 2, 3]);

  var key = JSON.stringify(arr);
  res[key] ? res[key]++ : res[key] = 1;
}

// 为了方便展示，转换成百分比
for (var key in res) {
  res[key] = res[key] / times * 100 + '%'
}

console.log(res)

得到结果如下：

各种结果的概率都基本相同了，所以真正实现了乱序的效果！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • node.js使用nodemailer发送邮件实例

    node.js使用nodemailer发送邮件实例

    这篇文章主要介绍了node.js使用nodemailer发送邮件的方法,例子中使用的是QQ邮箱,你也可以修改成其它的邮箱如163、gmail等,需要的朋友可以参考下
    2014-03-03
  • JavaScript如何自定义trim方法

    JavaScript如何自定义trim方法

    本文介绍了如何自定义trim方法，trim的作用就是去除字符串前后空格,这个方法在字符串处理方面很有实用价值，需要的朋友可以参考下
    2015-07-07
  • bootstrap 表单验证使用方法

    bootstrap 表单验证使用方法

    在web开发过程中表单验证是比较常见的需求，友好的错误提示能够用户带来极好的用户体验效果，今天小编给大家带来如何使用bootstrap 表单验证功能，一起看看吧
    2017-01-01
  • JS和JQuery实现雪花飘落效果

    JS和JQuery实现雪花飘落效果

    本文主要给大家讲述了如何用JS和JQuery两种方式实现雪花飘落的动画效果，有需要的朋友收藏一下吧。
    2017-11-11
  • js表头排序实现方法

    js表头排序实现方法

    这篇文章主要介绍了js表头排序实现方法,涉及数字、字母、字符串比较及排序等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 判断客户端浏览器是否安装了Flash插件的多种方法

    判断客户端浏览器是否安装了Flash插件的多种方法

    各种方法判断客户端浏览器是否安装了Flash插件，对于必须要支持flash才能浏览的页面来说，提前做下说明，用户体验会更好。
    2010-08-08
  • JavaScript中16进制颜色与rgb颜色互相转换的示例代码

    JavaScript中16进制颜色与rgb颜色互相转换的示例代码

    这篇文章主要介绍了JavaScript中16进制颜色与rgb颜色互相转换的示例代码,通过示例代码介绍了JS 颜色16进制、rgba相互转换问题,感兴趣的朋友一起看看吧
    2024-01-01
  • js实现点击切换和自动播放的轮播图

    js实现点击切换和自动播放的轮播图

    这篇文章主要为大家详细介绍了js实现点击切换和自动播放的轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 点击按钮或链接不跳转只刷新页面的脚本整理

    点击按钮或链接不跳转只刷新页面的脚本整理

    点击按钮或链接时不跳转只刷新页面，在某些情况下还是比较实用的，下面整理些不错的示例，感兴趣的朋友可以参考下
    2013-10-10
  • 原生JavaScript实现瀑布流布局

    原生JavaScript实现瀑布流布局

    这篇文章主要介绍了原生JavaScript实现瀑布流布局的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论