数组的完全随机排列算法javascript实现 |
Array.prototype.sort 方法被许多 JavaScript 程序员误用来随机排列数组。最近做的前端星计划挑战项目中,一道实现 blackjack 游戏的问题,就发现很多同学使用了 Array.prototype.sort 来洗牌。就连最近一期 JavaScript Weekly上推荐的一篇文章也犯了同样的错误。 AjRwi1 http://www.numino.net 以下就是常见的完全错误的随机排列算法: 7QMwe5 http://www.numino.net function shuffle(arr){ vhsEv6 http://www.numino.net return arr.sort(function(){ HR78rr http://www.numino.net return Math.random() - 0.5; 8klHG9 http://www.numino.net }); v7Xtlm http://www.numino.net } 7KJ73d http://www.numino.net 以上代码看似巧妙利用了 Array.prototype.sort 实现随机,但是,却有非常严重的问题,甚至是完全错误。 GI6Cee http://www.numino.net 证明 Array.prototype.sort 随机算法的错误 8AwsUW http://www.numino.net 为了证明这个算法的错误,我们设计一个测试的方法。假定这个排序算法是正确的,那么,将这个算法用于随机数组 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],如果算法正确,那么每个数字在每一位出现的概率均等。因此,将数组重复洗牌足够多次,然后将每次的结果在每一位相加,最后对每一位的结果取平均值,这个平均值应该约等于 (0 + 9) / 2 = 4.5,测试次数越多次,每一位上的平均值就都应该越接近于 4.5。所以我们简单实现测试代码如下: y1MR01 http://www.numino.net var arr = [0,1,2,3,4,5,6,7,8,9]; 49XbQK http://www.numino.net var res = [0,0,0,0,0,0,0,0,0,0]; skJG9f http://www.numino.net var t = 10000; mdb1YE http://www.numino.net for(var i = 0; i < t; i++){ CVj6io http://www.numino.net var sorted = shuffle(arr.slice(0)); jXwkeG http://www.numino.net sorted.forEach(function(o,i){ 5lvJp1 http://www.numino.net res[i] += o; QbFS42 http://www.numino.net }); OJNaq1 http://www.numino.net } 8Eqm80 http://www.numino.net res = res.map(function(o){ Lb7J3R http://www.numino.net return o / t; OE13eS http://www.numino.net }); ty0KEb http://www.numino.net console.log(res); Q5dc0N http://www.numino.net 将上面的 shuffle 方法用这段测试代码在 chrome 浏览器中测试一下,可以得出结果,发现结果并不随机分布,各个位置的平均值越往后越大,这意味着这种随机算法越大的数字出现在越后面的概率越大。 rFRZQJ http://www.numino.net 为什么会产生这个结果呢?我们需要了解 Array.prototype.sort 究竟是怎么作用的。 QdZ9ue http://www.numino.net 首先我们知道排序算法有很多种,而 ECMAScript 并没有规定 Array.prototype.sort 必须使用何种排序算法。在这里,有兴趣的同学不妨看一下 JavaScriptCore 的源码实现: xPAF26 http://www.numino.net 排序不是我们今天讨论的主题,但是不论用何种排序算法,都是需要进行两个数之间的比较和交换,排序算法的效率和两个数之间比较和交换的次数有关系。 f4ryDo http://www.numino.net 最基础的排序有冒泡排序和插入排序,原版的冒泡或者插入排序都比较了 n(n-1)/2 次,也就是说任意两个位置的元素都进行了一次比较。那么在这种情况下,如果采用前面的 sort 随机算法,由于每次比较都有 50% 的几率交换和不交换,这样的结果是随机均匀的吗?我们可以看一下例子: iC0Ix0 http://www.numino.net function bubbleSort(arr, compare){ 6DbAHy http://www.numino.net var len = arr.length; Fk65Dh http://www.numino.net for(var i = 0; i < len - 1; i++){ SQK1x7 http://www.numino.net for(var j = 0; j < len - 1 - i; j++){ hUZ6PN http://www.numino.net var k = j + 1; 3a3Xto http://www.numino.net if(compare(arr[j], arr[k]) > 0){ bgR2X4 http://www.numino.net var tmp = arr[j]; l3qnt7 http://www.numino.net arr[j] = arr[k]; 4uEEdi http://www.numino.net arr[k] = tmp; mP2x71 http://www.numino.net } zfHJHV http://www.numino.net } PaM90L http://www.numino.net } br2FO2 http://www.numino.net return arr; m47Xvv http://www.numino.net } y7SXU1 http://www.numino.net function shuffle(arr){ FQ4cif http://www.numino.net return bubbleSort(arr, function(){ spSMB4 http://www.numino.net return Math.random() - 0.5; ltwQvM http://www.numino.net }); Z0Z8v4 http://www.numino.net } 4ue5qe http://www.numino.net var arr = [0,1,2,3,4,5,6,7,8,9]; raU1TG http://www.numino.net var res = [0,0,0,0,0,0,0,0,0,0]; ICIC8z http://www.numino.net var t = 10000; Z4Y1lN http://www.numino.net for(var i = 0; i < t; i++){ WX8K12 http://www.numino.net var sorted = shuffle(arr.slice(0)); 2QOAh9 http://www.numino.net sorted.forEach(function(o,i){ 6q0z47 http://www.numino.net res[i] += o; gGSnU7 http://www.numino.net }); DNctBe http://www.numino.net } 8Re3zy http://www.numino.net res = res.map(function(o){ o0oEz7 http://www.numino.net return o / t; UbR2je http://www.numino.net }); eLB596 http://www.numino.net console.log(res); 170aV7 http://www.numino.net 上面的代码的随机结果也是不均匀的,测试平均值的结果越往后的越大。(笔者之前没有复制原数组所以错误得出均匀的结论,已更正于 2016-05-10) krfcQK http://www.numino.net 冒泡排序总是将比较结果较小的元素与它的前一个元素交换,我们可以大约思考一下,这个算法越后面的元素,交换到越前的位置的概率越小(因为每次只有50%几率“冒泡”),原始数组是顺序从小到大排序的,因此测试平均值的结果自然就是越往后的越大(因为越靠后的大数出现在前面的概率越小)。 5r6iX7 http://www.numino.net 我们再换一种算法,我们这一次用插入排序: hwy79b http://www.numino.net function insertionSort(arr, compare){ Cs89Es http://www.numino.net var len = arr.length; 5lvw7O http://www.numino.net for(var i = 0; i < len; i++){ 9JJ6N6 http://www.numino.net for(var j = i + 1; j < len; j++){ d9937z http://www.numino.net if(compare(arr[i], arr[j]) > 0){ 5r66ms http://www.numino.net var tmp = arr[i]; 4lMZpg http://www.numino.net arr[i] = arr[j]; 0Q0as5 http://www.numino.net arr[j] = tmp; 0vq6LD http://www.numino.net } jzezFs http://www.numino.net } ABArx2 http://www.numino.net } lR76wn http://www.numino.net return arr; STxJWq http://www.numino.net } aUo1OB http://www.numino.net function shuffle(arr){ SVNRJJ http://www.numino.net return insertionSort(arr, function(){ 0M56ub http://www.numino.net return Math.random() - 0.5; BI1b56 http://www.numino.net }); 6OZUhL http://www.numino.net } 9WuYH8 http://www.numino.net var arr = [0,1,2,3,4,5,6,7,8,9]; k76GHu http://www.numino.net var res = [0,0,0,0,0,0,0,0,0,0]; VsBkiN http://www.numino.net var t = 10000; vdl1Pg http://www.numino.net for(var i = 0; i < t; i++){ aATYQ1 http://www.numino.net var sorted = shuffle(arr.slice(0)); nmj0C3 http://www.numino.net sorted.forEach(function(o,i){ LfIHA1 http://www.numino.net res[i] += o; nGE9xr http://www.numino.net }); 9TsDQb http://www.numino.net } 9tv1C9 http://www.numino.net res = res.map(function(o){ LFEbcM http://www.numino.net return o / t; Zxl2pt http://www.numino.net }); 7T5JFu http://www.numino.net console.log(res); pazA98 http://www.numino.net 由于插入排序找后面的大数与前面的数进行交换,这一次的结果和冒泡排序相反,测试平均值的结果自然就是越往后越小。原因也和上面类似,对于插入排序,越往后的数字越容易随机交换到前面。 19adv9 http://www.numino.net 所以我们看到即使是两两交换的排序算法,随机分布差别也是比较大。除了每个位置两两都比较一次的这种排序算法外,大多数排序算法的时间复杂度介于 O(n) 到 O(n2) 之间,元素之间的比较次数通常情况下要远小于 n(n-1)/2,也就意味着有一些元素之间根本就没机会相比较(也就没有了随机交换的可能),这些 sort 随机排序的算法自然也不能真正随机。 2SxBdt http://www.numino.net 我们将上面的代码改一下,采用快速排序: Tk7M1e http://www.numino.net function quickSort(arr, compare){ dhUEiX http://www.numino.net arr = arr.slice(0); 88ZskZ http://www.numino.net if(arr.length <= 1) return arr; og4HmX http://www.numino.net var mid = arr[0], rest = arr.slice(1); 8b9gCI http://www.numino.net var left = [], right = []; xnsomp http://www.numino.net for(var i = 0; i < rest.length; i++){ VK575d http://www.numino.net if(compare(rest[i], mid) > 0){ k7Yt64 http://www.numino.net right.push(rest[i]); lqNaIn http://www.numino.net }else{ s6bq47 http://www.numino.net left.push(rest[i]); 9Q4JY8 http://www.numino.net } b48av6 http://www.numino.net } mUHF56 http://www.numino.net return quickSort(left, compare).concat([mid]) xqD22c http://www.numino.net .concat(quickSort(right, compare)); y285M1 http://www.numino.net } n6Gic2 http://www.numino.net function shuffle(arr){ KeTNwF http://www.numino.net return quickSort(arr, function(){ guGKaG http://www.numino.net return Math.random() - 0.5; ZgQs34 http://www.numino.net }); HGb2IS http://www.numino.net } KhB0KB http://www.numino.net var arr = [0,1,2,3,4,5,6,7,8,9]; CJ8cDK http://www.numino.net var res = [0,0,0,0,0,0,0,0,0,0]; QpbXZn http://www.numino.net var t = 10000; 20g0PP http://www.numino.net for(var i = 0; i < t; i++){ PuD2GR http://www.numino.net var sorted = shuffle(arr.slice(0)); PfPwle http://www.numino.net sorted.forEach(function(o,i){ 8t0cYs http://www.numino.net res[i] += o; R7q5Jq http://www.numino.net }); RZxu16 http://www.numino.net } Q7Nsnu http://www.numino.net res = res.map(function(o){ Twy8Ag http://www.numino.net return o / t; XB6pFq http://www.numino.net }); 3ZGl31 http://www.numino.net console.log(res); 6I63iX http://www.numino.net 快速排序并没有两两元素进行比较,它的概率分布也不随机。 lvm0cB http://www.numino.net 所以我们可以得出结论,用 Array.prototype.sort 随机交换的方式来随机排列数组,得到的结果并不一定随机,而是取决于排序算法是如何实现的,用 JavaScript 内置的排序算法这么排序,通常肯定是不完全随机的。 aQ2A30 http://www.numino.net 经典的随机排列 9i7Urq http://www.numino.net 所有空间复杂度 O(1) 的排序算法的时间复杂度都介于 O(nlogn) 到 O(n2) 之间,因此在不考虑算法结果错误的前提下,使用排序来随机交换也是慢的。事实上,随机排列数组元素有经典的 O(n) 复杂度的算法: K7134c http://www.numino.net function shuffle(arr){ zc7vk3 http://www.numino.net var len = arr.length; 06p01w http://www.numino.net for(var i = 0; i < len - 1; i++){ sQ33h5 http://www.numino.net var idx = Math.floor(Math.random() * (len - i)); kLFRV8 http://www.numino.net var temp = arr[idx]; OpBCDU http://www.numino.net arr[idx] = arr[len - i - 1]; rFufEO http://www.numino.net arr[len - i -1] = temp; X5Q35z http://www.numino.net } Ug719D http://www.numino.net return arr; u9rwQi http://www.numino.net } fMCJ80 http://www.numino.net 在上面的算法里,我们每一次循环从前 len - i 个元素里随机一个位置,将这个元素和第 len - i 个元素进行交换,迭代直到 i = len - 1 为止。 bC4B9A http://www.numino.net 我们同样可以检验一下这个算法的随机性: Nl1G25 http://www.numino.net function shuffle(arr){ PwH496 http://www.numino.net var len = arr.length; pXzu9I http://www.numino.net for(var i = 0; i < len - 1; i++){ goda4P http://www.numino.net var idx = Math.floor(Math.random() * (len - i)); Hr23N0 http://www.numino.net var temp = arr[idx]; v8KBJ8 http://www.numino.net arr[idx] = arr[len - i - 1]; R4xvhD http://www.numino.net arr[len - i -1] = temp; rRgE37 http://www.numino.net } L4175u http://www.numino.net return arr; 268hyR http://www.numino.net } Gtnm8h http://www.numino.net var arr = [0,1,2,3,4,5,6,7,8,9]; pag5Tj http://www.numino.net var res = [0,0,0,0,0,0,0,0,0,0]; 840J6D http://www.numino.net var t = 10000; cBR8yc http://www.numino.net for(var i = 0; i < t; i++){ uRuqio http://www.numino.net var sorted = shuffle(arr.slice(0)); j5X949 http://www.numino.net sorted.forEach(function(o,i){ sMz3h5 http://www.numino.net res[i] += o; 5Y7Ap6 http://www.numino.net }); DxBnwX http://www.numino.net } Dr76rx http://www.numino.net res = res.map(function(o){ 9z9XN0 http://www.numino.net return o / t; wUI0FZ http://www.numino.net }); 2lNWk6 http://www.numino.net console.log(res); kUn5wH http://www.numino.net 从结果可以看出这个算法的随机结果应该是均匀的。不过我们的测试方法其实有个小小的问题,我们只测试了平均值,实际上平均值接近只是均匀分布的必要而非充分条件,平均值接近不一定就是均匀分布。不过别担心,事实上我们可以简单从数学上证明这个算法的随机性。 3ASt8T http://www.numino.net 随机性的数学归纳法证明 ef58x2 http://www.numino.net 对 n 个数进行随机: 891yT6 http://www.numino.net 首先我们考虑 n = 2 的情况,根据算法,显然有 1/2 的概率两个数交换,有 1/2 的概率两个数不交换,因此对 n = 2 的情况,元素出现在每个位置的概率都是 1/2,满足随机性要求。 he2Q3F http://www.numino.net 假设有 i 个数, i >= 2 时,算法随机性符合要求,即每个数出现在 i 个位置上每个位置的概率都是 1/i。 P91S48 http://www.numino.net 对于 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)。 L70av9 http://www.numino.net 综合 1. 2. 3. 得出,对于任意 n >= 2,经过这个算法,每个元素出现在 n 个位置任意一个位置的概率都是 1/n。 Tk0zKg http://www.numino.net 总结 EH9ghC http://www.numino.net 一个优秀的算法要同时满足结果正确和高效率。很不幸使用 Array.prototype.sort 方法这两个条件都不满足。因此,当我们需要实现类似洗牌的功能的时候,还是应该采用巧妙的经典洗牌算法,它不仅仅具有完全随机性还有很高的效率。 pIZHem http://www.numino.net 除了收获这样的算法之外,我们还应该认真对待这种动手分析和解决问题的思路,并且捡起我们曾经学过而被大多数人遗忘的数学(比如数学归纳法这种经典的证明方法)。 XMa8a4 http://www.numino.net 有任何问题欢迎与作者探讨~ r9rAY0 http://www.numino.net 本文转载自:https://www.h5jun.com/post/array-shuffle.html
|
|