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


Posted in Javascript onMay 19, 2020

乱序的意思想必没有不知道:就是将数组打乱。听到乱序一般都会想到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的次数分别是多少。

运行几次得到的结果为:

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

由这几次运行得到的结果可以看出: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);

结果如下

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

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

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)

得到结果如下:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
vant实现购物车功能
Jun 29 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
javascript实现获取中文汉字拼音首字母
May 19 #Javascript
微信小程序实现菜单左右联动
May 19 #Javascript
JS array数组检测方式解析
May 19 #Javascript
基于JS实现table导出Excel并保留样式
May 19 #Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 #Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
JS加载解析Markdown文档过程详解
May 19 #Javascript
You might like
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
详谈python http长连接客户端
2017/06/12 Python
python实现员工管理系统
2018/01/11 Python
python实现车牌识别的示例代码
2019/08/05 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python定时器线程池原理详解
2020/02/26 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
财务出纳员岗位职责
2013/11/26 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
关于车尾的标语大全
2015/08/11 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS