René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"从underscore源码看数组乱序","articleBody":"![image](https://user-images.githubusercontent.com/20440496/47947861-d7310000-df5f-11e8-9f53-9717d2d093cc.png)\r\n\r\n\r\n### 前言\r\n\r\n前段时间看到过一道实现数组乱序的面试题，也在《如何轻松拿到淘宝前端 offer》一文中看到作者提到数组乱序的问题，竟然还涉及到 v8 引擎方面的知识，正好近期在拜读 underscore 的源码，自己也没有了解过这方面的知识点，在此就总结下关于数组乱序的知识。\r\n\r\n### 面试题\r\n\r\n看到的面试题大致是这样的：```var arr = ['a', 'b', 'c', 'd', 'c']; 实现数组乱序``` 。\r\n\r\n首先，通过题目可以看出，可能存在一个小陷阱，数组中存在两个 'c' 元素，我想这并不是面试官或者出题人无意打错字，可能是想顺便考察下面试者对数组去重的掌握情况。当然了，这个小细节也可以忽略直接进入实现乱序功能。\r\n\r\n对于有代码洁癖的开发人员来说，是不允许自己的程序中出现相同的元素数组值的，所以我们先把数组去重好了。\r\n\r\n```javascript\r\narr = [...new Set(arr)]; // [\"a\", \"b\", \"c\", \"d\"]\r\n```\r\n\r\n去重之后，就可以思考如何实现乱序了。所谓乱序就是打乱原数组元素之间的位置，使之与原数组之间的结构不一致。一开始想的方案是随意交换两个相邻元素的位置使得与原数组不一致就好了。\r\n\r\n```javascript\r\nfunction shuffle(array) {\r\n    array = array.concat();\r\n    var rand = Math.floor(Math.random() * Number(array.length));\r\n    var temp = array[rand];\r\n    if(array[rand - 1] !== void 0) {\r\n        array[rand] = array[rand - 1];\r\n    \tarray[rand - 1] = temp;\r\n    }else if(arr[rand + 1] !== void 0) {\r\n        array[rand] = array[rand + 1];\r\n    \tarray[rand + 1] = temp;\r\n    }\r\n    return array;\r\n}\r\n```\r\n\r\n但后来一想，发现这只是达到了部分乱序的效果而已，要如何才能达到全部元素随机乱序的效果呢？\r\n\r\n### sort + Math.random\r\n\r\n常见的一种实现方案就是使用数组的 sort 排序方法，原理就是 sort 的 compareFunction 匿名函数的返回值小于 0 则升序排列，大于 0 则降序排列，由于 Math.random() 得到的是 0-1 区间的数，Math.random() - 0.5 有 50% 的概率大于 0，50% 的概率小于 0。 \r\n\r\n```javascript\r\nfunction shuffle(arr) {\r\n    return arr.concat().sort(function() {\r\n        return Math.random() - 0.5;\r\n    })\r\n}\r\n```\r\n\r\n但是这并不是最好的解决方案，sort 排序存在的问题就是元素位置概率不均，某个元素排序后位置不变或者调换在相邻位置的概率更高，测试如下： \r\n\r\n```javascript\r\nvar count = new Array(7).fill(0);\r\n\r\nfor(var i=0; i\u003c10000; i++) {\r\n    var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];\r\n    arr = shuffle(arr);\r\n    count[arr.indexOf('a')]++;\r\n}\r\n\r\nconsole.log(count); // 一次随机乱序的结果 =\u003e [3033, 2927, 1899, 1143, 585, 284, 129]\r\n```\r\n\r\n测试进行了 10000 次的乱序排序，可以看出 'a' 元素出现在第一个位置的次数远高于出现在其他位置的次数，也就是说本应当出现在每个位置的次数应该是差不多的，实际上却差别很大，这种差异大或者不公平的结果的出现，说明这种方案并不是一个很好的解决方案。 \r\n\r\n### v8 对 sort 的实现\r\n\r\n想要知道为什么 sort 排序会出现元素分布不均的情况，就要了解底层的实现方式。v8 源码中对 sort 的实现，出于性能考虑，对于短数组（数组长度小于等于10）使用的是插入排序，长数组（数组长度大于10）使用的是快速排序和插入排序的混合排序。[v8源码地址](https://github.com/v8/v8/blob/master/src/js/array.js)。\r\n\r\n![image](https://user-images.githubusercontent.com/20440496/47947200-f83f2400-df52-11e8-9cd2-2379d20799b5.png)\r\n\r\n插入排序的源码：\r\n\r\n```javascript\r\nfunction InsertionSort(a, from, to) {\r\n\tfor (var i = from + 1; i \u003c to; i++) {\r\n\t\tvar element = a[i];\r\n\t\tfor (var j = i - 1; j \u003e= from; j--) {\r\n\t\t\tvar tmp = a[j];\r\n\t\t\tvar order = comparefn(tmp, element);\r\n\t\t\tif (order \u003e 0) {\r\n\t\t\t\ta[j + 1] = tmp;\r\n\t\t\t} else {\r\n\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t}\r\n\t\ta[j + 1] = element;\r\n\t}\r\n};\r\n```\r\n\r\n简单来说就是将第一个元素视为有序序列，遍历数组，将之后的元素依次插入这个构建的有序序列中。其中 comparefn() 是关键， comparefn 部分：\r\n\r\n![comparefn ](https://user-images.githubusercontent.com/20440496/47947492-54f10d80-df58-11e8-9719-a83f6d47f795.png)\r\n\r\n具体分析 sort 的分布不均的情况，可参考冴羽的[JavaScript专题之乱序](https://github.com/mqyqingfeng/Blog/issues/51)。\r\n\r\n关于 underscore 源码的解读，解读地址： [Underscore.analysis.js](https://github.com/webproblem/Blog/blob/master/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/underscore/Underscore.1.8.3.analysis.js)。\r\n\r\n### Fisher–Yates shuffle\r\n\r\n那么有没有更好的实现方案呢？答案是肯定是有的。先来看看 underscore 源码对数组乱序的实现。\r\n\r\nPS：自己研读 underscore 源码时加的注释。\r\n\r\n```javascript\r\n  /**\r\n   * 得到一个随机乱序的集合副本\r\n   * var arr = ['a', 'b', 'c', 'd'];\r\n   * _.shuffle(arr); // 一次随机的结果 =\u003e [\"b\", \"c\", \"d\", \"a\"]\r\n   */\r\n  _.shuffle = function(obj) {\r\n    // 传入 Infinity 参数是为了一次性返回乱序的结果，如果不传，每次执行都会返回一个单一的随机项\r\n    return _.sample(obj, Infinity);\r\n  };\r\n\r\n  /**\r\n   * 从集合中产生一个随机样本\r\n   * 原理是遍历对象元素，将当前元素与另一个随机元素调换位置，直到遍历结束\r\n   * 数组乱序讲解参考文章：\r\n   * https://github.com/mqyqingfeng/Blog/issues/51\r\n   * https://github.com/hanzichi/underscore-analysis/issues/15\r\n   * @param obj    需要乱序的对象\r\n   * @param n      返回的随机元素个数，如果值为空，会返回一个单一的随机项\r\n   * @param guard  暂没发现这个参数的作用\r\n   */\r\n  _.sample = function(obj, n, guard) {\r\n    // 返回单一的随机项\r\n    if (n == null || guard) {\r\n      if (!isArrayLike(obj)) obj = _.values(obj);\r\n      return obj[_.random(obj.length - 1)];\r\n    }\r\n    var sample = isArrayLike(obj) ? _.clone(obj) : _.values(obj);\r\n    var length = getLength(sample);\r\n    // 防止 n 的值为负数，且 n 的值不能超过对象元素的数量，确保下面的 for 循环正常遍历\r\n    n = Math.max(Math.min(n, length), 0);\r\n    var last = length - 1;\r\n    for (var index = 0; index \u003c n; index++) {\r\n      // 获取随机调换位置元素的下标\r\n      var rand = _.random(index, last);\r\n      var temp = sample[index];\r\n      sample[index] = sample[rand];\r\n      sample[rand] = temp;\r\n    }\r\n    return sample.slice(0, n);\r\n  };\r\n```\r\n\r\nunderscore 实现的大致思路就是遍历数组元素时，将当前元素随机与后面的另一个数组元素的位置进行互换，直到遍历结束。\r\n\r\n这种实现思路就是所谓的 [Fisher–Yates shuffle](https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle) 算法，且时间复杂度为 O(n) ，性能上是最优的。\r\n\r\n按照这个思路再次实现如下：\r\n\r\n```javascript\r\nfunction shuffle(arr) {\r\n    var rand, temp;\r\n    for(var i=0; i\u003carr.length; i++) {\r\n        rand = i + Math.floor(Math.random() * (arr.length - i));\r\n        temp = arr[i];\r\n        arr[i] = arr[rand];\r\n        arr[rand] = temp;\r\n    }\r\n    return arr;\r\n}\r\n```\r\n\r\n再来测试这个方案的效果： \r\n\r\n```javascript\r\nvar count = new Array(7).fill(0);\r\n\r\nfor(var i=0; i\u003c10000; i++) {\r\n    var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];\r\n    arr = shuffle(arr);\r\n    count[arr.indexOf('b')]++;\r\n}\r\nconsole.log(count); // 一次随机乱序排序的结果 =\u003e [1403, 1413, 1448, 1464, 1451, 1456, 1365]\r\n```\r\n\r\n可以看到 ‘b’ 元素出现在各个位置的次数大致是均匀的，达到了真正的乱序效果。\r\n\r\n### 其他实现方案\r\n\r\n还有一种实现思路，可能不是最优的方案。 大致思路就是随机挑选数组中的任意一个元素存放到新数组中，且该元素从原数组中移出，重复这样的操作直到原数组中的元素为空，新数组就是乱序后的结果。\r\n\r\n```javascript\r\nfunction shuffle(arr) {\r\n    var newArr = [], rand;\r\n    arr = arr.concat();\r\n    while(arr.length) {\r\n        rand = Math.floor(Math.random() * arr.length);\r\n        newArr.push(arr[rand]);\r\n        arr.splice(rand, 1);\r\n    }\r\n    return newArr;\r\n}\r\n```\r\n\r\n### 总结\r\n\r\n* 常见的 sort + Math.random 方式乱序其实也是属于局部乱序，并没有达到所有元素都打乱顺序的效果。原因是因为 v8 底层对于短数组使用的是插入排序，长数组使用的是混合排序。\r\n* Fisher–Yates shuffle 算法应该是最优的实现方案，原理是遍历数组，将当前元素与在它后面的任意一个元素交换位置，直到遍历结束。\r\n\r\n### 参考\r\n\r\n* https://github.com/mqyqingfeng/Blog/issues/51\r\n* https://github.com/hanzichi/underscore-analysis/issues/15\r\n* https://blog.oldj.net/2017/01/23/shuffle-an-array-in-javascript/\r\n* https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle","author":{"url":"https://github.com/webproblem","@type":"Person","name":"webproblem"},"datePublished":"2018-11-02T16:19:45.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/7/Blog/issues/7"}