js对象数组按属性快速排序

 更新时间:2011年01月31日 19:08:25   作者:  
前一篇《关于selector性能比赛》中提到,目测觉得在$("div,p,a")这样有逗号时,sizzle耗时异常(600多个元素,花了200ms),说是它可能没有优化ie下的排序。
按所推荐的程序在IE下跑了下,的确,排序耗时很小。
复制代码 代码如下:

<script>
/*
* 洗牌
*/
function getRandomPlayCard(m){
var array1=new Array(m);
for(var i=0;i<m;i++){
var rnd=Math.floor(Math.random()*(i+0.99999))
array1[i]=array1[rnd];
array1[rnd]=i;
}
return array1;
};
/*
* 快速排序,按某个属性,或按“获取排序依据的函数”,来排序.
* @method soryBy
* @static
* @param {array} arr 待处理数组
* @param {string|function} prop 排序依据属性,获取
* @param {boolean} desc 降序
* @return {array} 返回排序后的新数组
*/
var sortBy =function (arr, prop, desc){
var props=[],
ret=[],
i=0,
len=arr.length;
if(typeof prop=='string') {
for(; i<len; i++){
var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
}
}
else if(typeof prop=='function') {
for(; i<len; i++){
var oI = arr[i];
(props[i] = new String(oI && prop(oI) || ''))._obj = oI;
}
}
else {
throw '参数类型错误';
}
props.sort();
for(i=0; i<len; i++) {
ret[i] = props[i]._obj;
}
if(desc) ret.reverse();
return ret;
};
for(var i=0;i<1000;i++){
document.write('<div>a'+i+'</div>')
}
var els=document.getElementsByTagName('div');
var cards=getRandomPlayCard(els.length);
var randomEls=[];
for(var i=0,len=cards.length;i<len;i++) randomEls[cards[i]]=els[i];//按洗出的牌来洗元素数组
alert(['总数:',randomEls.length,'打乱顺序后: ',randomEls[0].innerHTML,randomEls[randomEls.length-1].innerHTML]);
var d0=new Date();
var elsSorted=sortBy(randomEls,function(el){return el.sourceIndex+100000000;})
alert(['总数:',elsSorted.length,'排序耗时:',new Date()-d0,'重新排序后: ',elsSorted[0].innerHTML,elsSorted[elsSorted.length-1].innerHTML]);
</script>

Array原生的sort,当它传一个比较函数时,由于它内部用哪种排序算法,都需要多次比对,所以,耗时是很自然的事。
上面的快速排序,它并没有多次比对,
而是:
1。取出el属性值,用属性值产生一个String对象,
2。将el附在String对象上。
3。用String对象组成数组。
4。用原生的sort进String对象数组排序。
5。在排好序的String数组中,按序取出el。
即得到排好序的el数组。

相关文章

  • JS函数内部属性之arguments和this实例解析

    JS函数内部属性之arguments和this实例解析

    在函数内部,有两个特殊的对象:arguments和this。这篇文章主要介绍了函数内部属性之arguments和this ,需要的朋友可以参考下
    2018-10-10
  • Bootstrap学习笔记之css样式设计(1)

    Bootstrap学习笔记之css样式设计(1)

    这篇文章主要为大家详细介绍了bootstrap学习笔记之css样式设计,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • js实现3D图片展示效果

    js实现3D图片展示效果

    本文主要介绍了js实现3D图片展示效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • uni-app中弹窗的使用与自定义弹窗

    uni-app中弹窗的使用与自定义弹窗

    众所周知弹窗在我们实际开发场景中是非常常用的,最近在工作中就遇到了相关需求,所以下面这篇文章主要给大家介绍了关于uni-app中弹窗使用与自定义弹窗的相关资料,需要的朋友可以参考下
    2022-04-04
  • JavaScript之解构赋值的理解

    JavaScript之解构赋值的理解

    今天小编就为大家分享一篇关于JavaScript之解构赋值的理解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • JavaScript实现的链表数据结构实例

    JavaScript实现的链表数据结构实例

    这篇文章主要介绍了JavaScript实现的链表数据结构实例,本文直接给出实现代码,需要的朋友可以参考下
    2015-04-04
  • js中json对象和字符串的理解及相互转化操作实现方法

    js中json对象和字符串的理解及相互转化操作实现方法

    这篇文章主要介绍了js中json对象和字符串的理解及相互转化操作实现方法,结合实例形式分析了json对象与字符串的功能以及相互转换操作实现技巧,需要的朋友可以参考下
    2017-09-09
  • js中indexof的用法详细解析

    js中indexof的用法详细解析

    本篇文章主要是对js中indexof的用法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • Ionic学习日记实现验证码倒计时

    Ionic学习日记实现验证码倒计时

    本篇文章主要介绍了Ionic学习日记实现验证码倒计时,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • JavaScript仿windows计算器功能

    JavaScript仿windows计算器功能

    这篇文章主要为大家详细介绍了JavaScript仿windows计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论