用户点击某一张牌之后,后端会返回该牌对应的奖品id,前端负责把这个id对应的图片渲染到所点击的那个牌的位置,而其他的牌每次随机显示(不能重复),总奖品数量大于前端展示的五个(一共8个左右),如何能够保证不重复的情况下用最好的效率实现排序?
还是用最经典的洗牌算法吧。
function shuffer(arr){
for (i=arr.length-1;i>0;i--){
let j = Math.floor(Math.random()*(i+1));
[arr[i],arr[j]]=[arr[j],arr[i]];//es6 写法
/* es5 写法
var temp = arr[j];
arr[j]=arr[i];
arr[i]=temp;
*/
}
return arr;
}
八个奖品的信息做成一个数组,打乱数组的顺序,然后从中间选前5个就可以了
假设有五个
0=>A 1=>B 2=>C 3=>D 4=>E
1)随机一个1到100之间的数(用随机函数),对数组长度(第一次就是5)取余得到的结果然后从数组里面去除这个元素
分两种情况
取出的元素刚好是最后一个,那么重复此步骤
取出的元素不是最后一个,那么取出这个元素之后将最后一个元素放到刚才被取走的元素位置
然后数组长度减一
举例:
0=>A 1=>B 2=>C 3=>D 4=>E
第一次要取走的下标为2(元素为C),数组变成
0=>A 1=>B 2=>E 3=>D
第二次要取走的元素下标为1(元素B),数组变成
0=>A 1=>D 2=>E
如此继续下去...