乱序的意思想必没有不知道:就是将数组打乱。
听到乱序一般都会想到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引擎,采用快排(不稳定)
 
关于sort的不同具体说明见:https://zhuanlan.zhihu.com/p/33260052
 
以下用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)
得到结果如下:

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

 
阅读Javascript专题之乱序:https://github.com/mqyqingfeng/Blog/issues/51 之笔记

javascript专题系列--js乱序的更多相关文章

  1. javascript洗牌算法 乱序算法 面试题

    1.2种方案代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...

  2. javascript专题系列--尾调用和尾递归

    最近在看<冴羽的博客>,讲真,确实受益匪浅,已经看了javascript 深入系列和专题系列的大部分文章,可是现在才想起来做笔记.所以虽然很多以前面试被问得一脸懵逼的问题都被“一语惊醒梦中 ...

  3. JavaScript tips —— 谈谈数组乱序

    前言 先看一个段代码 function randArr (arr) { return arr.sort(() => { return (Math.random() - 0.5); }); } 目 ...

  4. JavaScript 专题系列第六篇,讲解深浅拷贝的技巧和以及实现深浅拷贝的思路

    拷贝也是面试经典呐! 数组的浅拷贝 如果是数组,我们可以利用数组的一些方法比如:slice.concat 返回一个新数组的特性来实现拷贝. 比如:   var arr = ['old', 1, tru ...

  5. 字串乱序 PHP&JS

    <?php /** * 字串乱序 PHP&JS * * php 中把字串乱序后输出给客户机的 JAVASCRIPT , JAVASCRIPT 中恢复 * 在指定长度提取一个字符,并把这一 ...

  6. 字串乱序 PHP&JS

    <?php /** * 字串乱序 PHP&JS * * php 中把字串乱序后输出给客户机的 JAVASCRIPT , JAVASCRIPT 中恢复 * 在指定长度提取一个字符,并把这一 ...

  7. 总结下js排序算法和乱序算法

    其实本人最怕的就是算法,大学算法课就感觉老师在讲天书,而且对于前端来说,算法在实际的应用中实在是很有限.毕竟算法要依靠大量的数据为基础才能发挥出算法的效率,就浏览器那性能,......是吧,退一万步说 ...

  8. HTML5之2D物理引擎 Box2D for javascript Games 系列 翻外篇--如何结合createJS应用box2d.js

    太久没有更新了,新年回来工作,突然有收到网友的邮件提问,居然还有人在关注,惭愧,找了下电脑上还有一点儿存着,顺便先发这一个番外篇吧,好歹可以看到真实的效果,等我考完英语,一定会更新下一章," ...

  9. js之数组乱序

    这是最近面试遇到的,不过忘记了,之前也有印象刷到过这道题,就再次记录一下加深印象吧,听到最多的答案是利用sort方法,不过也有说这种方法不好,利用了快排和插入排序,那就整理下吧 <!DOCTYP ...

随机推荐

  1. CF1178 F1 Short Colorful Strip

    题目链接 题意 有个长度为\(m\)公分的布,要在上面每公分都染上颜色,整块布染恰好\(n(n=m)\)种颜色.颜色标号从\(1\)到\(n\).染色需遵循: 1.从颜色\(1\)到颜色\(n\)依次 ...

  2. Python连载23-file_analysis

    一.文件 1.定义:长久保存信息的一种信息集合 2.常用操作:(1)打开关闭(2)读写内容(3)查找 3.open函数 (1)意义:打开文件,带有很多参数 (2)第一个参数:必须有,文件的路径和名称 ...

  3. pytz库时区的坑(转)

    add by zhj: 推荐使用标准库中的dateutil代替pytz 原文:https://www.hongweipeng.com/index.php/archives/1803/ 起步 在djan ...

  4. windows 下安装MongoDB

    一:下载mongodb安装包 下载地址:https://www.mongodb.com/download-center/community 这里推荐下载msi的安装包 二:安装mongodb 双击下载 ...

  5. AppScan基础使用 - 初学篇

    最近找工作,阿里的面试官问过了安全,以前面试中也问到了安全,呆过的公司,朋友呆过的公司,发现安全测试很少 ,可能是应用的比较少. 当今社会安全还是比较重要的,学学有好处,大概了解下  .因为个人比较懒 ...

  6. Vue--运行项目发送http://localhost:8080/sockjs-node/info请求报错,造成浏览器不能热更新

    今早习惯打开vscode 输入 npm run dev 准备修复测试提出的bug 不料一堆通红的报错,让人感到有点绿的慌. 有问题呢,就需要解决问题.经过一番排查后发现是我昨天为了让测试在我本地项目中 ...

  7. opencv::GMM(高斯混合模型)

    GMM方法概述:基于高斯混合模型期望最大化. 高斯混合模型 (GMM) 高斯分布与概率密度分布 - PDF 初始化 初始化EM模型: Ptr<EM> em_model = EM::crea ...

  8. ios问题笔记

    32位 最多内存0到3G 64位 最多内存0到8G iOS模板code4app.com github.com developer.apple.con 动画 label不能变小 只能变大,(而uivie ...

  9. 个人项目(WC.exe)(java)(基于图形界面)

    一.Github项目地址:https://github.com/Leungdc/ENhomework 二.PSP: PSP2.1 Personal Software Process Stages 预估 ...

  10. 010.[转] maven的三大生命周期

    一.Maven的生命周期 Maven的生命周期就是对所有的构建过程进行抽象和统一.包含了项目的清理.初始化.编译.测试.打包.集成测试.验证.部署和站点生成等几乎所有的构建步骤. Maven的生命周期 ...