「前端进阶」数组乱序

引言

数组乱序指的是：将数组元素的排列顺序随机打乱。

将一个数组进行乱序处理，是一个非常简单但是非常常用的需求。 比如，“猜你喜欢”、“点击换一批”、“中奖方案”等等，都可能应用到这样的处理。

sort 结合 Math.random

微软曾在browserchoice.eu上做过一个关于不同浏览器使用情况的调查，微软会在页面中以随机顺序向用户显示不同的浏览器。

然而每个浏览器出现的位置并不是随机的。IE在最后一个位置出现的概率大概是50%，Chrome在大部分情况下都会出现在浏览器列表的前三位。

这是怎么回事，不是说好的随机顺序么？

这是他们用来做随机shuffle的代码：

arr.sort(() =>Math.random() - 0.5);
复制代码

乍一看，这似乎是一个合理的解决方案。事实上在使用搜索引擎搜索“随机打乱数组”，这种方式会是出现最多的答案。

然而，这种方式并不是真正意思上的乱序，一些元素并没有机会相互比较， 最终数组元素停留位置的概率并不是完全随机的。

来看一个例子：

/**
* 数组乱序
*/
function shuffle(arr) {
 return arr.sort(() => Math.random() - 0.5);
}
复制代码

/**
* 用于验证 shuffle 方法是否完全随机
*/
function test_shuffle(shuffleFn) {
 // 多次乱序数组的次数
 let n = 100000; 
 // 保存每个元素在每个位置上出现的次数
 let countObj = {
 a:Array.from({length:10}).fill(0),
 b:Array.from({length:10}).fill(0),
 c:Array.from({length:10}).fill(0),
 d:Array.from({length:10}).fill(0),
 e:Array.from({length:10}).fill(0),
 f:Array.from({length:10}).fill(0),
 g:Array.from({length:10}).fill(0),
 h:Array.from({length:10}).fill(0),
 i:Array.from({length:10}).fill(0),
 j:Array.from({length:10}).fill(0),
 }
 for (let i = 0; i < n; i ++) {
 let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
 shuffleFn(arr);
 countObj.a[arr.indexOf('a')]++;
 countObj.b[arr.indexOf('b')]++;
 countObj.c[arr.in