发表于： 2017-04-21 22:23:59

1 1259

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

弄清楚JavaScript数组乱序真实的含义，

明白了Array.sort()的伪随机性。

明天计划的事情：（一定要写非常细致的内容）

重写桌游精灵的业务逻辑代码

遇到的问题：（遇到什么困难，怎么解决的）

Array.sort()

all.sort(function() {
   return Math.random() > 0.5;
});

利用Array的sort方法可以更简洁的实现打乱，对于数量小的数组来说足够。因为随着数组元素增加，随机性会变差，所有该方法本质上是伪随机性，不适合在成熟项目中使用。

Shuffling an Array in JavaScript(JavaScript数组乱序)

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;
}
all.shuffle();

在上面的代码中，shffle() 方法用于随机排列数组内的元素。玩家数组调用shuffle(),则无需创建新数组,便可完美实现数组乱序,即可随机分配身份给玩家。

分析代码:

从代码本身看看洗牌流程。先从 shuffle 函数说起吧：
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;
}
shuffle 函数挂载在 Array 对象的原型之下，便于数组直接调用该函数。在 shuffle 函数内部，this 引用的就是调用该 shuffle 函数的数组：
var input = this;
在上面的代码中，新的变量引用 this指代的是调用 shuffle 函数的数组。
下一步，看一下 for 循环内都干了什么：
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;
}
该循环用于遍历所有数组内的所有元素，并进行随机交换。
遍历顺序是从后往前(数组倒序遍历)进行的，也就是说从 input.length-1 位置的元素开始，直至遍历到数组中的第一个元素。遍历过程中的位置由变量 i 指定。

洗牌算法
接下来，使用了两行代码在指定范围内挑选一个随机元素：
var randomIndex = Math.floor(Math.random()*(i+1));
var itemAtIndex = input[randomIndex];
变量 randomIndex 存储了一个随机数，该随机数可以用作数组的索引，进而提取数组的一个随机元素。注意，该随机数的最大值是数组的长度input.length-1 ，即变量 i 的值。
确定了随机元素的索引之后，用新的变量保存该元素的值，然后交换选中元素和随机元素的值：
var itemAtIndex = input[randomIndex];
input[randomIndex] = input[i];
input[i] = itemAtIndex;
在这三行代码中，
第一行使用新的变量保存了随机元素的值；第二行将选中元素 input[i] 的值赋给随机元素 input[randomIndex]；
第三行就随机元素的值 itemAtIndex 赋给选中元素 input[i]。
本质上是一个互换两个元素的值的过程，并不难理解。
至此，循环内的逻辑就介绍完了，剩下的都是重复操作，直至遍历到数组第一个元素停止循环。