热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

JavaScript中实现最高效的数组乱序方法

这篇文章主要介绍了JavaScript中实现最高效的数组乱序方法,数组乱序的意思是,把数组内的所有元素排列顺序打乱,需要的朋友可以参考下

数组乱序的意思是,把数组内的所有元素排列顺序打乱。

常用的办法是给数组原生的sort方法传入一个函数,此函数随机返回1或-1,达到随机排列数组元素的目的。

代码如下:

arr.sort(function(a,b){ return Math.random()>.5 ? -1 : 1;});

这种方法虽直观,但效率并不高,经我测试,打乱10000个元素的数组,所用时间大概在35ms上下(firefox)

本人一直具有打破沙锅问到底的优良品质,于是搜索到了一个高效的方法。原文见此

代码如下:

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添加了一个函数,叫shuffle——不过叫什么名字不重要啦,重要的是他的效率。

拿我上面那个10000个元素的数组来测试,用这个方法乱序完成仅需要7,8毫秒的时间。

把数组元素增加10倍到100000来测试,第一种sort方法费时500+ms左右,shuffle方法费时40ms左右,差别是大大的。

完整测试代码:

代码如下:

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);

另外,大家有没有注意到shuffle代码里的for循环,他没有后半截!也就是只有for(..)却没有后面的{..},居然可以这样写!而且居然正常执行!好奇特,我得去博客园问问。


推荐阅读
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 在跨浏览器开发中,一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理,并提供了最佳实践建议。 ... [详细]
  • 探讨GET与POST请求数据传输的最大容量
    在Web开发领域,GET和POST是最常见的两种数据传输方法。本文将深入探讨这两种请求方式在不同环境下的数据传输能力及其限制。 ... [详细]
  • 本文探讨了如何为Web浏览器(如Firefox)添加全局热键(例如媒体控制键),并详细说明了实现这一功能所需的步骤,包括可能需要的Firefox扩展和Greasemonkey脚本。 ... [详细]
  • 本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条,包括垂直和水平滚动条的控制,以及特定元素的聚焦技术。 ... [详细]
  • 在使用Firefox浏览器打开本地HTML文件时,尝试调用Canvas的drawImage方法可能会遇到NS_ERROR_NOT_AVAILABLE错误。本文探讨了这一问题的原因及解决方案。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • 本文提供了针对Windows 7操作系统中,使用浏览器时出现电脑卡死问题的有效解决方案,包括检查硬件加速设置、安全模式下的故障排查以及利用崩溃日志进行深入分析的方法。 ... [详细]
  • 本实验利用xmlspy2013和firefox工具,探讨如何编写和验证基于DTD的XML文档。实验包括分析XML实例以创建相应的DTD文档,并通过编写有效的XML文档来验证DTD的有效性。 ... [详细]
  • 网页中正确显示英语音标的方法与实例
    在开发教育类网站时,经常遇到的一个问题是如何在网页上正确显示英语音标,以及为何某些情况下音标会显示为乱码。本文将探讨这些问题的成因及解决方案。 ... [详细]
  • Exploring the issue where the onScroll event does not correctly capture clientX and clientY values across different browsers. ... [详细]
  • 本文详细介绍了在Ubuntu 7.10操作系统上安装多种常用软件的方法,包括RAR压缩工具、即时通讯软件Pidgin、办公软件永中Office 2007试用版、多线程下载软件MultiGet及d4x、FTP客户端gFTP与FireFTP插件,以及P2P下载工具aMule。每部分都提供了具体的安装步骤和配置方法。 ... [详细]
  • 本文探讨了在使用HTML5 WebSocket技术构建浏览器内聊天室时遇到的连接不稳定问题,并提供了可能的解决方案和调试方法。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • jQuery 1.4.4 已经发布,这是自 1.4.3 版本以来不到一个月的又一更新。本次更新主要集中在基于用户反馈的错误修复,并引入了一项新的功能。 ... [详细]
author-avatar
手机用户2502910855
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有