也談前端面試常見問題之『數組亂序』

前言

終于可以開始 Collection Functions 部分了。

可能有的童鞋是第一次看樓主的系列文章,這里再做下簡單的介紹。樓主在閱讀 underscore.js 源碼的時候,學到了很多,同時覺得有些知識點可以獨立出來,寫成文章與大家分享,而本文正是其中之一(完整的系列請猛戳 https://github.com/hanzichi/underscore-analysis)。之前樓主已經和大家分享了 Object 和 Array 的擴展方法中一些有意思的知識點,今天開始解讀 Collection 部分。

看完 Collection Functions 部分的源碼,首先迫不及待想跟大家分享的正是本文主題 —— 數組亂序。這是一道經典的前端面試題,給你一個數組,將其打亂,返回新的數組,即為數組亂序,也稱為洗牌問題。

一個好的方案需要具備兩個條件,一是正確性,毋庸置疑,這是必須的,二是高效性,在確保正確的前提下,如何將復雜度降到最小,是我們需要思考的。

splice

幾年前樓主還真碰到過洗牌問題,還真的是 "洗牌"。當時是用 cocos2d-js(那時還叫 cocos2d-html5)做牌類游戲,發牌前毫無疑問需要洗牌。

當時我是這樣做的。每次 random 一個下標,看看這個元素有沒有被選過,如果被選過了,繼續 random,如果沒有,將其標記,然后存入返回數組,直到所有元素都被標記了。后來經同事指導,每次選中后,可以直接從數組中刪除,無需標記了,于是得到下面的代碼。

function shuffle(a) {
  var b = [];

  while (a.length) {
    var index = ~~(Math.random() * a.length);
    b.push(a[index]);
    a.splice(index, 1);
  }

  return b;
}

這個解法的正確性應該是沒有問題的(有興趣的可以自己去證明下)。我們假設數組的元素為 0 - 10,對其亂序 N 次,那么每個位置上的結果加起來的平均值理論上應該接近 (0 + 10) / 2 = 5,且 N 越大,越接近 5。為了能有個直觀的視覺感受,我們假設亂序 1w 次,并且將結果做成了圖表,猛戳 http://hanzichi.github.io/test-case/shuffle/splice/ 查看,結果還是很樂觀的。

驗證了正確性,還要關心一下它的復雜度。由于程序中用了 splice,如果把 splice 的復雜度看成是 O(n),那么整個程序的復雜度是 O(n^2)。

Math.random()

另一個為人津津樂道的方法是 "巧妙應用" JavaScript 中的 Math.random() 函數。

function shuffle(a) {
  return a.concat().sort(function(a, b) {
    return Math.random() - 0.5;
  });
}

同樣是 [0, 1, 2 ... 10] 作為初始值,同樣跑了 1w 組 case,結果請猛戳 http://hanzichi.github.io/test-case/shuffle/Math.random/

看平均值的圖表,很明顯可以看到曲線浮動,而且多次刷新,折現的大致走向一致,平均值更是在 5 上下 0.4 的區間浮動。如果我們將 [0, 1, 2 .. 9] 作為初始數組,可以看到更加明顯不符預期的結果(有興趣的可以自己去試下)。究其原因,要追究 JavaScript 引擎對于 Math.random() 的實現原理,這里就不展開了(其實是我也不知道)。因為 ECMAScript 并沒有規定 JavaScript 引擎對于 Math.random() 應該實現的方式,所以我猜想不同瀏覽器經過這樣的亂序后,結果也不一樣。

什么時候可以用這種方法亂序呢?"非正式" 場合,一些手寫 DEMO 需要亂序的場合,這不失為一種 clever solution。

但是這種解法不但不正確,而且 sort 的復雜度,平均下來應該是 O(nlogn),跟我們接下來要說的正解還是有不少差距的。

Fisher–Yates Shuffle

關于數組亂序,正確的解法應該是 Fisher–Yates Shuffle,復雜度 O(n)。

其實它的思想非常的簡單,遍歷數組元素,將其與之前的任意元素交換。因為遍歷有從前向后和從后往前兩種方式,所以該算法大致也有兩個版本的實現。

從后往前的版本:

function shuffle(array) {
  var _array = array.concat();

  for (var i = _array.length; i--; ) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = _array[i];
    _array[i] = _array[j];
    _array[j] = temp;
  }
  
  return _array;
}

underscore 中采用從前往后遍歷元素的方式,實現如下:

// Shuffle a collection, using the modern version of the
// [Fisher-Yates shuffle](http://en.wikipedia.org/wiki/Fisher–Yates_shuffle).
_.shuffle = function(obj) {
  var set = isArrayLike(obj) ? obj : _.values(obj);
  var length = set.length;
  var shuffled = Array(length);
  for (var index = 0, rand; index < length; index++) {
    rand = _.random(0, index);
    if (rand !== index) shuffled[index] = shuffled[rand];
    shuffled[rand] = set[index];
  }
  return shuffled;
};

將其解耦分離出來,如下:

function shuffle(a) {
  var length = a.length;
  var shuffled = Array(length);

  for (var index = 0, rand; index < length; index++) {
    rand = ~~(Math.random() * (index + 1));
    if (rand !== index) 
      shuffled[index] = shuffled[rand];
    shuffled[rand] = a[index];
  }

  return shuffled;
}

跟前面一樣,做了下數據圖表,猛戳 http://hanzichi.github.io/test-case/shuffle/Fisher-Yates/

關于證明,引用自月影老師的文章

隨機性的數學歸納法證明

對 n 個數進行隨機:

  1. 首先我們考慮 n = 2 的情況,根據算法,顯然有 1/2 的概率兩個數交換,有 1/2 的概率兩個數不交換,因此對 n = 2 的情況,元素出現在每個位置的概率都是 1/2,滿足隨機性要求。

  2. 假設有 i 個數, i >= 2 時,算法隨機性符合要求,即每個數出現在 i 個位置上每個位置的概率都是 1/i。

  3. 對于 i + 1 個數,按照我們的算法,在第一次循環時,每個數都有 1/(i+1) 的概率被交換到最末尾,所以每個元素出現在最末一位的概率都是 1/(i+1) 。而每個數也都有 i/(i+1) 的概率不被交換到最末尾,如果不被交換,從第二次循環開始還原成 i 個數隨機,根據 2. 的假設,它們出現在 i 個位置的概率是 1/i。因此每個數出現在前 i 位任意一位的概率是 (i/(i+1)) * (1/i) = 1/(i+1),也是 1/(i+1)。

  4. 綜合 1. 2. 3. 得出,對于任意 n >= 2,經過這個算法,每個元素出現在 n 個位置任意一個位置的概率都是 1/n。

小結

關于數組亂序,如果面試中被問到,能說出 "Fisher–Yates Shuffle",并且能基本說出原理(你也看到了,其實代碼非常的簡單),那么基本應該沒有問題了;如果能更進一步,將其證明呈上(甚至一些面試官都可能一時證明不了),那么就牛逼了。千萬不能只會用 Math.random() 投機取巧!

Read More:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,835評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,676評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,730評論 0 380
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,118評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,873評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,266評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,330評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,482評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,036評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,846評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,025評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,575評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,279評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,684評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,953評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,751評論 3 394
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,016評論 2 375

推薦閱讀更多精彩內容

  • 回溯算法 回溯法:也稱為試探法,它并不考慮問題規模的大小,而是從問題的最明顯的最小規模開始逐步求解出可能的答案,并...
    fredal閱讀 13,705評論 0 89
  • 數組在程序設計中,為了處理方便, 把具有相同類型的若干變量按有序的形式組織起來。這些按序排列的同類數據元素的集合稱...
    朱森閱讀 3,970評論 2 13
  • 最近看了一篇非常有趣的文章:關于JavaScript的數組隨機排序,其作者為oldj前輩。文中指出我們用來“將一個...
    LucasHC閱讀 579評論 0 6
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,723評論 18 399
  • 數據的基本概念 個案(case):在一個數據集中,我們收集信息的對象。變量(variable):對每個個案收集的屬...
    ux2017閱讀 2,306評論 0 4