通过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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python中map、any、all函数用法分析
2015/04/21 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
Numpy掩码式数组详解
2018/04/17 Python
Python count函数使用方法实例解析
2020/03/23 Python
Python如何实现FTP功能
2020/05/28 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
美德好少年主要事迹
2014/01/29 职场文书
绿色小区申报材料
2014/08/22 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
旅行社计调工作总结
2015/08/12 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
员工给公司的建议书
2019/06/24 职场文书