關於數組亂序的深挖——「感受一直在寫毒代碼」

最近看了一篇很是有趣的文章:關於JavaScript的數組隨機排序,其做者爲oldj前輩。文中指出咱們用來「將一個數組隨機排序」的經典寫法所存在的問題,獲益匪淺。javascript

本文將以更加詳盡的材料和更多樣的code demo進行闡述。並嘗試用「Fisher–Yates shuffle」洗牌算法進行終極解答。html

多個熟悉的場景

將一個數組進行亂序處理,是一個很是簡單可是很是經常使用的需求。
好比,「猜你喜歡」、「點擊換一批」、「中獎方案」等等,均可能應用到這樣的處理。包括我本身在寫代碼的時候,也確實遇到過。
通常比較經典且流行的方案爲:對對象數組採用array.sort()方法,並傳入一個比較函數(comparison function),這個比較函數隨機返回一個介於[-0.5, 0.5]之間的數值:前端

var numbers = [12,4,16,3];
numbers.sort(function() {
    return .5 - Math.random();
});複製代碼

關於這麼作的理論基礎這裏再也不進行闡釋。若是您不明白,能夠了解一下JS中sort函數的使用方法。java

有毒的array.sort方法

正像oldj前輩文章指出的那樣,其實使用這個方法亂序一個數組是有問題的。git

爲此,我寫了一個腳本進行驗證。並進行了可視化處理。強烈建議讀者去Github圍觀一下,clone下來本身試驗。程序員

腳本中,我對github

var letters = ['A','B','C','D','E','F','G','H','I','J'];複製代碼

letters這樣一個數組使用array.sort方法進行了10000次亂序處理,並把亂序的每一次結果存儲在countings當中。
結果在頁面上進行輸出:算法

var countings = [
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0},
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0},
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0},
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0},
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0},
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0},
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0},
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0},
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0},
    {A:0,B:0,C:0,D:0,E:0,F:0,G:0,H:0,I:0,J:0}
];
var letters=['A','B','C','D','E','F','G','H','I','J'];
for (var i = 0; i < 10000; i++) {
    var r = ['A','B','C','D','E','F','G','H','I','J'].sort(function() {
        return .5 - Math.random();
    });
    for(var j = 0; j <= 9; j++) {
        countings[j][r[j]]++;
    }
}
for(var i = 0; i <= 9;i++) {
    for(var j = 0;j <= 9;j++) {
        document.getElementById('results').rows[i + 1].cells[j + 1].firstChild.data = countings[i][letters[j]];
    }
}複製代碼

獲得結果如圖:數組

最終結果

這個結果對數組中的每一項元素在亂序後的結果進行了統計。
若是點擊「recalculate」按鈕,能夠進行屢次10000次取樣試驗。性能優化

無論點擊按鈕幾回,你都會發現總體亂序以後的結果絕對不是「徹底隨機」。
好比A元素大機率出如今數組的頭部,J元素大機率出如今數組的尾部,全部元素大機率停留在本身初始位置。

由此能夠先粗暴地得出結論:
使用array.sort方法進行亂序處理,絕對是有問題的。

array.sort方法底層究竟如何實現?

可是爲何會有問題呢?這須要從array.sort方法排序底層提及。
Chrome v8引擎源碼中,能夠清晰看到,

v8在處理sort方法時,使用了插入排序和快排兩種方案。當目標數組長度小於10時,使用插入排序;反之,使用快排。
Chrome’s v8 uses a combination of InsertionSort and QuickSort. That is, if the array is less than 10 elements in length, it uses an InsertionSort.

其實無論用什麼排序方法,大多數排序算法的時間複雜度介於O(n)到O(n2)之間,元素之間的比較次數一般狀況下要遠小於n(n-1)/2,也就意味着有一些元素之間根本就沒機會相比較(也就沒有了隨機交換的可能),這些 sort 隨機排序的算法天然也不能真正隨機。

怎麼理解上邊這句話呢?其實咱們想使用array.sort進行亂序,理想的方案或者說純亂序的方案是數組中每兩個元素都要進行比較,這個比較有50%的交換位置機率。這樣一來,總共比較次數必定爲n(n-1)。
而在sort排序算法中,大多數狀況都不會知足這樣的條件。於是固然不是徹底隨機的結果了。

順便說一下,關於v8引擎的排序方案,源碼使用JS實現的,很是利於前端程序員閱讀。其中,對應不一樣的數組長度,使用了快排和插入排序不一樣方法。同時使用了大量的性能優化技巧,尤爲是關於快排的pivot選擇上十分有意思。感興趣的讀者不妨研究一下。

真正意義上的亂序

要想實現真正意義上的亂序,其實不難。咱們首先要規避不穩定的array.sort方法。
在計算機科學中,有一個專門的:洗牌算法Fisher–Yates shuffle。若是你對算法天生遲鈍,也不要慌張。這裏我一步一步來實現,相信您必定要得懂。

先來總體看一下全部代碼實現,一共也就10行:

Array.prototype.shuffle = function() {
    var input = this;
    for (var i = input.length-1; i >=0; i--) {
        var randomIndex = Math.floor(Math.random()*(i+1)); 
        var itemAtIndex = input[randomIndex]; 
        input[randomIndex] = input[i]; 
        input[i] = itemAtIndex;
    }
    return input;
}
var tempArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
tempArray.shuffle();
console.log(tempArray);  複製代碼

解析:
首先咱們有一個已經排好序的數組:

a1.png

Step1:
第一步須要作的就是,從數組末尾開始,選取最後一個元素。

a2.png

在數組一共9個位置中,隨機產生一個位置,該位置元素與最後一個元素進行交換。

a3.png

a4.png

a5.png

Step2:
上一步中,咱們已經把數組末尾元素進行隨機置換。
接下來,對數組倒數第二個元素動手。在除去已經排好的最後一個元素位置之外的8個位置中,隨機產生一個位置,該位置元素與倒數第二個元素進行交換。

a6.png

a7.png

a8.png

Step3:
理解了前兩部,接下來就是依次進行,如此簡單。

a9.png

本身實現亂序

以上方法,是基於Fisher–Yates shuffle洗牌算法。下面,咱們就須要本身開動腦筋,完成一個亂序方案。
其實這並不難,關鍵在於如何生產真正的亂序。由於每每生成的並非徹底意義上的亂序,關於這一點,讀者能夠參考The Danger of Naïveté一文。

咱們來看一下社區上劉哇勇的一系列進階方案:

function shuffle (array) {
    var copy = [],
        n = array.length,
        i;
    while (n) {
        i = Math.floor(Math.random() * array.length);
        if (i in array) {
            copy.push(array[i]);
            delete array[i];
            n--;
        }
    }
    return copy;
}複製代碼

關於這種方案,也給出了分析:

咱們建立了一個copy數組,而後遍歷目標數組,將其元素複製到copy數組裏,同時將該元素從目標數組中刪除,這樣下次遍歷的時候就能夠跳過這個序號。而這一實現的問題正在於此,即便一個序號上的元素已經被處理過了,因爲隨機函數產生的數是隨機的,全部這個被處理過的元素序號可能在以後的循環中不斷出現,一是效率問題,另外一個就是邏輯問題了,存在一種多是永遠運行不完。

改進的方案爲:

function shuffle(array) {
    var copy = [],
        n = array.length,
        i;
    while (n) {
        i = Math.floor(Math.random() * n--);
        copy.push(array.splice(i, 1)[0]);
    }
    return copy;
}複製代碼

改進的作法就是處理完一個元素後,用Array的splice()方法將其從目標數組中移除,同時也更新了目標數組的長度。如此一來下次遍歷的時候是重新的長度開始,不會重複處理的狀況了。

固然這樣的方案也有不足之處:好比,咱們建立了一個copy數組進行返回,在內存上開闢了新的空間。
不過,這能夠徹底避免:

function shuffle(array) {
    var m = array.length,
        t, i;
    while (m) {
        i = Math.floor(Math.random() * m--);
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }
    return array;
}複製代碼

有趣的是,這樣的實現已經徹底等同於上文洗牌算法Fisher–Yates shuffle的方案了。

總結

本文剖析了「數組亂序」這麼一個簡單,可是有趣的需求場景。
對這個場景的深刻分析,讓咱們認識到JS和計算機算法中的一些玄妙。
文章簡要提到了V8引擎對array.sort的處理、洗牌算法Fisher–Yates等內容。但願對讀者有所啓發。

Happy Coding!

PS:
做者Github倉庫,歡迎經過代碼各類形式交流。百度知識搜索部大前端繼續招兵買馬,高級工程師、實習生職位均有,有意向者火速聯繫。

相關文章
相關標籤/搜索