大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。
一、背景介绍
洗牌算法(Shuffling Algorithm)，顾名思义，它的产生是用来解决类似洗牌这种场景的问题的，目的是产生一串等概率的随机列，使得很难去预测牌的顺序。
现在的各种牌类游戏都有自己的洗牌算法，为了保证游戏的趣味性，各自的实现中都有自己考虑的因素添加在其中。
1999年，一个很流行的在线扑克平台的开发者开发的洗牌软件，带有很微小但很致命的漏洞，导致了灾难性的结果。
黑客只要知道手中的两张牌和3张公用牌，就可以猜出转牌和河牌时会来什么牌，以及其他玩家的牌。
洗牌算法的应用也很广，比如三国杀游戏、斗地主游戏等等。讲一个最常见的场景，就是播放器的随机播放。 有些播放器的随机播放，是每次产生一个随机数来选择播放的歌曲，这样就有可能还没有听完所有的歌前，又听到已经听过的歌。 另一种就是利用洗牌算法，把待播放的歌曲列表shuffle。 如何判断使用的是哪一种方案呢？ 很简单，如果点上一首还能回去，则利用的是洗牌算法，如果点上一首又是另外一首歌，则说明使用的是随机产生方法。
二、知识剖析
FISHER–YATES SHUFFLE
其算法思想就是 从原始数组中随机抽取一个新的元素到新数组中
从还没处理的数组中，产生一个[0, n]之间的随机数 random
从剩下的n个元素中把第 random 个元素取出到新数组中
删除原数组第random个元素
重复第 2 3 步直到所有元素取完
最终返回一个新的打乱的数组
KNUTH-DURSTENFELD SHUFFLE
每次从未处理的数组中随机取一个元素，然后把该元素放到数组的尾部，即数组的尾部放的就是已经处理过的元素，这是一种原地打乱的算法，每个元素随机概率也相等，时间复杂度从 Fisher 算法的 O(n2)提升到了 O(n)
选取数组(长度n)中最后一个元素(arr[length-1])，将其与n个元素中的任意一个交换，此时最后一个元素已经确定
选取倒数第二个元素(arr[length-2])，将其与n-1个元素中的任意一个交换
重复第 1 2 步，直到剩下1个元素为止
INSIDE-OUT ALGORITHM
Knuth-Durstenfeld Shuffle 是一个in-place算法，原始数据被直接打乱，有些应用中可能需要保留原始数据，因此需要开辟一个新数组来存储打乱后的序列。 Inside-Out Algorithm 算法的基本思想是设一游标i从前向后扫描原始数据的拷贝，在[0, i]之间随机一个下标j，然后用位置j的元素替换掉位置i的数字，再用原始数据位置i的元素替换掉拷贝数据位置j的元素。其作用相当于在拷贝数据中交换i与j位置处的值。
三、常见问题
Fisher–Yates Shuffle是如何实现的？
四、解决方案
FISHER–YATES SHUFFLE的JS实现
varmyArray =newArray();
myArray =[1,2,4,5,22,7,9,11];
console.log(myArray);
Array.prototype.shuffle=function(){
varinput=this;
for(vari=input.length-1;i>=0;i--){
varrandomIndex= Math.floor(Math.random()*(i+1));//获取小于this.length的随机整数
varitemAtIndex=input[randomIndex];
input[randomIndex]=input[i];
input[i]=itemAtIndex;//input[randomIndex]和input[i]交换值
}
returninput;
};
console.log(myArray.shuffle());
//2抽牌法
(functionshuffle_pick_1()//洗牌//抽牌法
{
//生成m张牌
vararr=newArray(7);
arr=[1,2,4,5,7,9,11];
//每次抽出一张牌，放在另一堆。因为要在数组里抽出元素，把后面的所有元素向前拉一位，所以很耗时。
vararr2=newArray();
for(vari=7;i>0;i--){
varrnd= Math.floor(Math.random()*i);
arr2.push(arr[rnd]);
arr.splice(rnd,1);
console.log(arr2);
}
console.log(arr2);
returnarr2;
}());
shuffle 函数挂载在 Array 对象的原型之下，便于数组直接调用该函数。在 shuffle 函数内部，this 引用的就是调用该 shuffle 的数组。 用一个新的变量引用 this，也就是调用 shuffle 函数的数组。接下来的for循环用于遍历所有数组内的所有元素，并进行随机交换。 注意，遍历顺序是从后往前进行的，也就是说从 input.length-1 位置的元素开始，直到遍历到数组中的第一个元素。遍历过程中的位置由变量 i 指定。 接下来，使用了两行代码在指定范围内挑选一个随机元素。 变量randomIndex存储了一个随机数，该随机数可以用作数组的索引，进而提取一个随机元素。注意，该随机数的最大值并不是数组的长度，而是变量i的值。 确定了随机元素的索引之后，用新的变量保存该元素的值，然后交换选中元素和随机元素的值。
五、拓展思考
怎么保证这个算法得到的数组是完全随机的（即等概）？
使用程序得到的一般是伪随机数
笔者目前了解到最优秀的是梅森旋转算法，其在低于623次元的空间以内不存在线性回归，但仍然是一个伪随机算法。
六、参考文献
参考一：洗牌算法怎样才够乱
参考二：洗牌算法shuffle - caochao88
参考三：当随机不够随机：一个在线扑克游戏的教训
参考四：随机问题之--洗牌算法
鸣谢
感谢观看
BY ︱王奎智︱杨纲
课后讨论环节：
问：arr.splice(rnd,1);是什么意思？
答：在arr数组中去除从第rnd个数开始之后的1个数，也就是第rnd个数他本身啦，
问：this在FISHER–YATES SHUFFL算法中是什么意思？
答：他指代了整个函数
问：demo的时候很酷炫的动画是在哪找到的？
答：http://runjs.cn/
ppt链接：https://ptteng.github.io/PPT/PPT/JS-02-shuffle-yggg.html#/
视频链接：https://v.qq.com/x/page/z0525hg38wb.html
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
猛戳这里
https://ptteng.github.io/PPT/PPT/CSS-13-viewport-in-app-yg.html#/2