关于数组乱序的深挖——“感受一直在写毒代码”

时间 2019-11-08

标签关于数组深挖感受一直代码繁體版

原文原文链接

最近看了一篇很是有趣的文章：关于JavaScript的数组随机排序，其做者为oldj前辈。文中指出咱们用来“将一个数组随机排序”的经典写法所存在的问题，获益匪浅。html

本文将以更加详尽的材料和更多样的code demo进行阐述。并尝试用“Fisher–Yates shuffle”洗牌算法进行终极解答。前端

多个熟悉的场景

将一个数组进行乱序处理，是一个很是简单可是很是经常使用的需求。
好比，“猜你喜欢”、“点击换一批”、“中奖方案”等等，均可能应用到这样的处理。包括我本身在写代码的时候，也确实遇到过。
通常比较经典且流行的方案为：对对象数组采用array.sort()方法，并传入一个比较函数（comparison function），这个比较函数随机返回一个介于［－0.5， 0.5］之间的数值：git

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

关于这么作的理论基础这里再也不进行阐释。若是您不明白，能够了解一下JS中sort函数的使用方法。程序员

有毒的array.sort方法

正像oldj前辈文章指出的那样，其实使用这个方法乱序一个数组是有问题的。github

为此，我写了一个脚本进行验证。并进行了可视化处理。强烈建议读者去Github围观一下，clone下来本身试验。算法

脚本中，我对数组

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]];
    }
}

获得结果如图：app

这个结果对数组中的每一项元素在乱序后的结果进行了统计。
若是点击“recalculate”按钮，能够进行屡次10000次取样试验。less

无论点击按钮几回，你都会发现总体乱序以后的结果绝对不是“彻底随机”。
好比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);

解析：
首先咱们有一个已经排好序的数组：

Step1：
第一步须要作的就是，从数组末尾开始，选取最后一个元素。

在数组一共9个位置中，随机产生一个位置，该位置元素与最后一个元素进行交换。

Step2：
上一步中，咱们已经把数组末尾元素进行随机置换。
接下来，对数组倒数第二个元素动手。在除去已经排好的最后一个元素位置之外的8个位置中，随机产生一个位置，该位置元素与倒数第二个元素进行交换。

Step3：
理解了前两部，接下来就是依次进行，如此简单。

本身实现乱序

以上方法，是基于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仓库，欢迎经过代码各类形式交流。
最近看了一篇很是有趣的文章：关于JavaScript的数组随机排序，其做者为oldj前辈。文中指出咱们用来“将一个数组随机排序”的经典写法所存在的问题，获益匪浅。

本文将以更加详尽的材料和更多样的code demo进行阐述。并尝试用“Fisher–Yates shuffle”洗牌算法进行终极解答。