JavaScript 專題系列第十九篇，講解陣列亂序，重點探究 Math.random() 為什麼不能真正的亂序？
亂序
亂序的意思就是將陣列打亂。
嗯，沒有了，直接看程式碼吧。
Math.random
一個經常會遇見的寫法是使用 Math.random()：
var values = [1, 2, 3, 4, 5];
values.sort(function(){
return Math.random() - 0.5;
});
console.log(values)複製程式碼Math.random() - 0.5 隨機得到一個正數、負數或是 0，如果是正數則降序排列，如果是負數則升序排列，如果是 0 就不變，然後不斷的升序或者降序，最終得到一個亂序的陣列。
看似很美好的一個方案，實際上，效果卻不盡如人意。不信我們寫個 demo 測試一下：
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 的次數分別是多少。
一次隨機的結果為：
[30636, 30906, 20456, 11743, 6259]複製程式碼該結果表示 10 萬次中，陣列亂序後的最後一個元素是 1 的情況共有 30636 次，是 2 的情況共有 30906 次，其他依此類推。
我們會發現，最後一個元素為 5 的次數遠遠低於為 1 的次數，所以這個方案是有問題的。
可是我明明感覺這個方法還不錯吶？初見時還有點驚豔的感覺，為什麼會有問題呢？
是的！我很好奇！
插入排序
如果要追究這個問題所在，就必須瞭解 sort 函式的原理，然而 ECMAScript 只規定了效果，沒有規定實現的方式，所以不同瀏覽器實現的方式還不一樣。
為了解決這個問題，我們以 v8 為例，v8 在處理 sort 方法時，當目標陣列長度小於 10 時，使用插入排序；反之，使用快速排序和插入排序的混合排序。
所以我們來看看 v8 的原始碼，因為是用 JavaScript 寫的，大家也是可以看懂的。
原始碼地址：github.com/v8/v8/blob/…
為了簡化篇幅，我們對 [1, 2, 3] 這個陣列進行分析，陣列長度為 3，此時採用的是插入排序。
插入排序的原始碼是：
function InsertionSort(a, from, to) {
for (var i = from + 1; i < to; i++) {
var element = a[i];
for (var j = i - 1; j >= from; j--) {
var tmp = a[j];
var order = comparefn(tmp, element);
if (order > 0) {
a[j + 1] = tmp;
} else {
break;
}
}
a[j + 1] = element;
}
};複製程式碼其原理在於將第一個元素視為有序序列，遍歷陣列，將之後的元素依次插入這個構建的有序序列中。
我們來個簡單的示意圖：
具體分析
明白了插入排序的原理，我們來具體分析下 [1, 2, 3] 這個陣列亂序的結果。
演示程式碼為：
var values = [1, 2, 3];
values.sort(function(){
return Math.random() - 0.5;
});複製程式碼注意此時 sort 函式底層是使用插入排序實現，InsertionSort 函式的 from 的值為 0，to 的值為 3。
我們開始逐步分析亂序的過程：
因為插入排序視第一個元素為有序的，所以陣列的外層迴圈從 i = 1 開始，a[i] 值為 2，此時內層迴圈遍歷，比較 compare(1, 2)，因為 Math.random() - 0.5 的結果有 50% 的概率小於 0 ，有 50% 的概率大於 0，所以有 50% 的概率陣列變成 [2, 1, 3]，50% 的結果不變，陣列依然為 [1, 2, 3]。
假設依然是 [1, 2, 3]，我們再進行一次分析，接著遍歷，i = 2，a[i] 的值為 3，此時內層迴圈遍歷，比較 compare(2, 3)：
有 50% 的概率陣列不變，依然是 [1, 2, 3]，然後遍歷結束。
有 50% 的概率變成 [1, 3, 2]，因為還沒有找到 3 正確的位置，所以還會進行遍歷，所以在這 50% 的概率中又會進行一次比較，compare(1, 3)，有 50% 的概率不變，陣列為 [1, 3, 2]，此時遍歷結束，有 50% 的概率發生變化，陣列變成 [3, 1, 2]。
綜上，在 [1, 2, 3] 中，有 50% 的概率會變成 [1, 2, 3]，有 25% 的概率會變成 [1, 3, 2]，有 25% 的概率會變成 [3, 1, 2]。
另外一種情況 [2, 1, 3] 與之分析類似，我們將最終的結果彙總成一個表格：
| 陣列 | i = 1 | i = 2 | 總計 |
|---|---|---|---|
| [1, 2, 3] | 50% [1, 2, 3] | 50% [1, 2, 3] | 25% [1, 2, 3] |
| 25% [1, 3, 2] | 12.5% [1, 3, 2] | ||
| 25% [3, 1, 2] | 12.5% [3, 1, 2] | ||
| 50% [2, 1, 3] | 50% [2, 1, 3] | 25% [2, 1, 3] | |
| 25% [2, 3, 1] | 12.5% [2, 3, 1] | ||
| 25% [3, 2, 1] | 12.5% [3, 2, 1] |
為了驗證這個推算是否準確，我們寫個 demo 測試一下：
var times = 100000;
var res = {};
for (var i = 0; i < times; i++) {
var arr = [1, 2, 3];
arr.sort(() => Math.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)複製程式碼這是一次隨機的結果：
我們會發現，亂序後，3 還在原位置(即 [1, 2, 3] 和 [2, 1, 3]) 的概率有 50% 呢。
所以根本原因在於什麼呢？其實就在於在插入排序的演算法中，當待排序元素跟有序元素進行比較時，一旦確定了位置，就不會再跟位置前面的有序元素進行比較，所以就亂序的不徹底。
那麼如何實現真正的亂序呢？而這就要提到經典的 Fisher–Yates 演算法。
Fisher–Yates
為什麼叫 Fisher–Yates 呢？ 因為這個演算法是由 Ronald Fisher 和 Frank Yates 首次提出的。
話不多說，我們直接看 JavaScript 的實現：
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專題系列目錄地址：github.com/mqyqingfeng…。
JavaScript專題系列預計寫二十篇左右，主要研究日常開發中一些功能點的實現，比如防抖、節流、去重、型別判斷、拷貝、最值、扁平、柯里、遞迴、亂序、排序等，特點是研(chao)究(xi) underscore 和 jQuery 的實現方式。
如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。