也谈前端面试常见问题之「数组乱序」

前言

终于能够开始 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/。

 

关于证实，引用自月影老师的文章（https://www.h5jun.com/post/array-shuffle.html）：

 

随机性的数学概括法证实

 

对 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() 投机取巧！