JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法
數(shù)組亂序的意思是,把數(shù)組內(nèi)的所有元素排列順序打亂。
常用的辦法是給數(shù)組原生的sort方法傳入一個(gè)函數(shù),此函數(shù)隨機(jī)返回1或-1,達(dá)到隨機(jī)排列數(shù)組元素的目的。
arr.sort(function(a,b){ return Math.random()>.5 ? -1 : 1;});
這種方法雖直觀,但效率并不高,經(jīng)我測(cè)試,打亂10000個(gè)元素的數(shù)組,所用時(shí)間大概在35ms上下(firefox)
本人一直具有打破沙鍋問(wèn)到底的優(yōu)良品質(zhì),于是搜索到了一個(gè)高效的方法。原文見此
if (!Array.prototype.shuffle) {
Array.prototype.shuffle = function() {
for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
return this;
};
}
arr.shuffle();
此方法是為Array.prototype添加了一個(gè)函數(shù),叫shuffle——不過(guò)叫什么名字不重要啦,重要的是他的效率。
拿我上面那個(gè)10000個(gè)元素的數(shù)組來(lái)測(cè)試,用這個(gè)方法亂序完成僅需要7,8毫秒的時(shí)間。
把數(shù)組元素增加10倍到100000來(lái)測(cè)試,第一種sort方法費(fèi)時(shí)500+ms左右,shuffle方法費(fèi)時(shí)40ms左右,差別是大大的。
完整測(cè)試代碼:
var count = 100000,arr = [];
for(var i=0;i.5 ? -1 : 1;});
Array.prototype.sort.call(arr,function(a,b){ return Math.random()>.5 ? -1 : 1;});
document.write(arr+'
');
var t1 = new Date().getTime();
document.write(t1-t);
//以下方法效率最高
if (!Array.prototype.shuffle) {
Array.prototype.shuffle = function() {
for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
return this;
};
}
var t = new Date().getTime();
arr.shuffle();
document.write('
'+arr+'
');
var t1 = new Date().getTime();
document.write(t1-t);
另外,大家有沒(méi)有注意到shuffle代碼里的for循環(huán),他沒(méi)有后半截!也就是只有for(..)卻沒(méi)有后面的{..},居然可以這樣寫!而且居然正常執(zhí)行!好奇特,我得去博客園問(wèn)問(wèn)。
- python json load json 數(shù)據(jù)后出現(xiàn)亂序的解決方案
- JavaScript中數(shù)組的排序、亂序和搜索實(shí)現(xiàn)代碼
- JavaScript數(shù)組的快速克隆(slice()函數(shù))和數(shù)組的排序、亂序和搜索(sort()函數(shù))
- js實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
- js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)
- 通過(guò)js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序
相關(guān)文章
基于JavaScript實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫代碼的相關(guān)資料,代碼簡(jiǎn)單易用,非常實(shí)用,需要的朋友可以參考下2016-05-05javascript與css3動(dòng)畫結(jié)合使用小結(jié)
本文給大家講述的是如何使用javascript結(jié)合CSS動(dòng)畫來(lái)實(shí)現(xiàn)一些占用資源更少,更優(yōu)化的動(dòng)畫效果,思路十分巧妙,這里推薦給小伙伴們參考下。2015-03-03JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出一個(gè)DIV框完整實(shí)例(帶緩沖動(dòng)畫漸變效果)
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出一個(gè)DIV框的實(shí)現(xiàn)方法,帶緩沖漸變動(dòng)畫效果,涉及鼠標(biāo)事件的響應(yīng)及結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)形成動(dòng)畫漸變效果的相關(guān)技巧,需要的朋友可以參考下2016-03-03JS實(shí)現(xiàn)盒子跟著鼠標(biāo)移動(dòng)及鍵盤方向鍵控制盒子移動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)盒子跟著鼠標(biāo)移動(dòng)及鍵盤方向鍵控制盒子移動(dòng)效果,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01簡(jiǎn)單聊聊JavaScript中的事件循環(huán)
js的事件循環(huán)(event-loop)是我們前端學(xué)習(xí)中非常重要的一部分,也是面試中經(jīng)常被問(wèn)到的點(diǎn),這篇文章我們就來(lái)給大家著重講解一下吧2023-02-02