标签：支持 概率 value cat tps var javascrip 自己的 遍历
1.有8张图片，每张图片要放两次，生成如下数组，长为16，[0,1,2,3,4,5,6,7,0,1,2,3,4,5,6,7] 其中两两相同的代表两张相同的图片，0对应文件夹image下的0.jpg，其余类似。
var randArr = []; for(var j = 0; j < 2;j++){ for (var i = 0; i < m; i++) { randArr.push(i); } }
2.将上面的数组传入random（），将数组内容打乱，即将图片打乱（随机交换位置）。
function random(data){ //随机打乱数组 for(var i = data.length-1; i >=0; i--){ var randomIndex = Math.floor(Math.random()*(i+1)); var itemAtIndex = data[randomIndex]; data[randomIndex] = data[i]; data[i] = itemAtIndex; } }
16个位置，概率问题，第一个位置，16选1，第二个位置15选1...最后一个1选1.所以i值要由大变小
3.为了将图片在屏幕上显示，应创建一个二维数组，然后将打乱后的图片数组传入。
注意：JS是不允许多维数组的，所谓的二维数组是数组嵌套。如var test = [["0","0"],["1","1"],["2","2"]]，对于理解程序中的map（）嵌套比较重要。
function arrs(n,data){ //生成坐标“二维”数组 var arr = []; for (var i = 0; i < n; i++){ arr[i] = []; for(var j = 0; j < n; j++){ arr[i].push(j); } } //把打乱的数组放入“二维”数组里 var i = 0; var res = arr.map(function(ba){ return ba.map(function(bb){ i++ return data[i-1] }); }); img(res) }
3.1 对其中map（）遍历的说明
其有返回值，可以return
arr[].map(function(value,index,array){
//do something
return XXX
})
参数：value数组中的当前项，必须；index当前项的索引,array原始数组，后两个可选；
map的回调函数中支持return返回值，return的是XXX，相当于把数组中的这一项变为XXX（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）
var ary = [12,23,24,42,1]; var res = ary.map(function (item,index,input) { return item*10; }) console.log(res);//-->[120,230,240,420,10]; 原数组拷贝了一份，并进行了修改 console.log(ary);//-->[12,23,24,42,1]； 原数组并未发生变化
3.2 map（）的在该游戏中的应用
var res = arr.map(function(ba){ return ba.map(function(bb){ i++; return data[i-1]; }); });
arr（）是“二维”数组，这就是map（）嵌套的原因，若为4X4的数组[[xx,xx,xx,xx],[xx,xx,xx,xx],[xx,xx,xx,xx],[xx,xx,xx,xx]]黄色阴影部分执行第二个map（），返回后产生一个新的数组[YY,YY,YY,YY],依次执行，4个嵌套的数组执行完后，又产生一个新的数组[[YY,YY,YY,YY],[YY,YY,YY,YY],[YY,YY,YY,YY],[YY,YY,YY,YY]]，赋给res。
至此，每张图片都有了自己的坐标。
4.将图片显示
function img(resdata){ //根据坐标显示图片 var newImg = []; for(var i = 0; i < resdata.length; i++){ for(var j = 0; j < resdata[i].length;j++){ newImg.push( resdata[i][j]); } } for (var i = 0; i < newImg.length; i++) { var str = "<li value="+newImg[i]+">"+ i +"</li>"; $("#grid").append(str); $(‘li:eq(‘+ i +‘)‘).html("<div class=‘pai‘><div class=‘back‘ ><img src=‘./image/" + newImg[i] + ".jpg‘ width=‘100%‘></div><div class=‘front‘><img src=‘./image/all.jpg‘ width=‘100%‘></div></div>"); }; }
理解了数组嵌套，resdata.length才不会理解出错。
:eq() 选择器选取带有指定 index 值的元素。
给pai（牌）的背面和正面加上图片，数组中的0,1,2,3,4,5,6,7对应文件夹下的0.jpg，1.jpg等.
最开始的randArr[](代表文件夹下图片的数组) -> data[]（随机打乱后的数组）-> res[给每个图片一个坐标]-> newImg[]（显示图片）
把“二维”数组变为一维数组newImg[]，所以newImg.length为16.而newImg[i]是0-7中的一个。
reload 方法，该方法强迫浏览器刷新当前页面。
语法：location.reload([bForceGet])参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。 true, 则以GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")
标签：支持 概率 value cat tps var javascrip 自己的 遍历
原文地址：http://www.cnblogs.com/yujihang/p/6649234.html
