最近的一个塔罗牌项目中，有一个洗牌的需求，实在也就是随机打乱数组，遂网上搜了下，再此做个整理…

从上面这个数组入手，我们要做的就是打乱数组内米素的顺序：

代码实现

Array.prototype.shuffle = function () {
    let input = this;
    for (let i = input.length - 1; i >= 0; i--) {
        let randomIndex = Math.floor(Math.random() * (i + 1));
        let itemAtIndex = input[randomIndex];
        input[randomIndex] = input[i];
        input[i] = itemAtIndex;
    }
    return input;
}

在上面的代码中，我们建立了一个 shffle() 方式，该方式用于随机排列数组内的米素。

此外，我们将该方式挂载在了 Array 工具的原型下面，以是任何数组都可以直接挪用该方式：

let tempArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
tempArray.shuffle();

事情原理

看完代码之后，让我们看看它对数组都做了写什么。首先，该方式选中数组的最后一个米素：

确定局限后，从中随机挑选一个数，这里假设随机选中的米素为 4：

然后交流最后一个米素和随机选中的米素的值：

上面的交流完成后，相当于我们完成了对数组最后一个米素的随机处置。接下来选中数组内倒数第二的米素：

之以是从后往前处置，是因为这样便于确定随机选择的局限。这次我们假定随机到的米素为 2:

接着交流倒数第一个米素和 2 号米素的值，完成对倒数第二个米素随机排列的处置。然后是选中倒数第三个米素，重复之前的操作：

剩下的就是一些重复性的事情，不多做先容了。

剖析代码

在上一节给列位用图例演示了洗牌流程，下面我们从代码自己看看洗牌流程。先从 shuffle 函数提及吧：

Array.prototype.shuffle = function () {
    let input = this;
    for (let i = input.length - 1; i >= 0; i--) {
        let randomIndex = Math.floor(Math.random() * (i + 1));
        let itemAtIndex = input[randomIndex];
        input[randomIndex] = input[i];
        input[i] = itemAtIndex;
    }
    return input;
}

shuffle 函数挂载在 Array 工具的原型之下，便于数组直接挪用该函数。在 shuffle 函数内部，this 引用的就是挪用该 shuffle 的数组：

var input = this;

在上面的代码中，我用一个新的变量引用 this，也就是挪用 shuffle 函数的数组。 下一步，看一下 for 循环内都干了什么：

for (let i = input.length - 1; i >= 0; i--) {
    let randomIndex = Math.floor(Math.random() * (i + 1));
    let itemAtIndex = input[randomIndex];
    input[randomIndex] = input[i];
    input[i] = itemAtIndex;
}

该循环用于遍历所有数组内的所有米素，并举行随机交流。注重，遍历顺序是从后往前举行的，也就是说从input.length-1 位置的米素最先，知道遍历到数组中的第一个米素。遍历历程中的位置由变量 i 指定。

这里的变量 i 就是上面图例中被选中的米素

洗牌算法

接下来，使用了两行代码在指定局限内挑选一个随机米素：

let randomIndex = Math.floor(Math.random() * (i + 1));
let itemAtIndex = input[randomIndex];

变量 randomIndex 存储了一个随机数，该随机数可以用作数组的索引，进而提取一个随机米素。注重，该随机数的最大值并不是数组的长度，而是变量 i 的值。

确定了随机米素的索引之后，用新的变量保留该米素的值，然后交流选中米素和随机米素的值：

//使用新的变量保留了随机米素的值
let itemAtIndex = input[randomIndex];
//将选中米素 input[i] 的值赋给随机米素 input[randomIndex]
input[randomIndex] = input[i];
//随机米素的值 itemAtIndex 赋给选中米素 input[i]
input[i] = itemAtIndex;

本质上是一个交换两个米素的值的历程，并不难理解。至此，循环内的逻辑就先容完了，剩下的都是重复操作。

随机性测试

上图是使用 Highcharts 制作的随机性测试图表，以可视化的方式校验本文中洗牌算法的随机性。每次刷新页面都市重新盘算和天生该图表。

天生上图的数据是这样盘算而来的：首先建立一个数组（上图使用的数组为 [0, 1, 2 … 18, 19, 20]），然后使用本文中的洗牌算法重新排序，排序完成后纪录每一个米素的值……以此步骤执行 100000 次，最后对统一索引位置上的数值举行求和。云云执行 10000 次之后，索引之间的总值应该相差不大。

由盘算可得：

链接: http://www.fly63.com/article/detial/5005