当前位置:首页 > 日记 > 正文

JavaScript 批量创建数组的方法

JavaScript 批量创建数组的方法

JavaScript有许多批量创建数组的方法,为了衡量它们的性能,我分别使用不同的方法创建一个长度为100000的数组,且键和值相等。同时,我定义了下面这个函数用来测量创建数组所耗费的时间:

 function t(fn) {   var start = Date.now();   fn.call(this);   var end = Date.now();   return (end - start) + 'ms';}

以下为常用的几个创建数组的方法以及它们所耗费的时间:

使用join和split

该方法把大量时间耗费在了map操作上,去掉map后只需要2ms

使用apply

这里用到了一个{ length: 100000 }伪数组,NodeList和arguments都是伪数组(array-like object),它们都不是真正意义上的数组,而是带有"length属性"并且同时具备"索引属性"的对象,不能直接使用数组的那些方法,而apply和call却可以接受这种伪数组。我们平时在用的Array.prototype.slice( arguments)就是基于这个原理。

这里把长度为100000的伪数组传递给Array函数,构造出了一个长度为100000的数组,然后再用map赋值。有同学可能要问了,为什么不直接Array(100000)生成数组,这是因为通过Array(100000)生成的数组每个值都为undefined,无法通过map遍历。

使用Array.from()

这是ES6新出的方法,可以将伪数组直接转换为数组

如果把伪数组换成数组,速度下降了很多。

使用Array.fill()

先用Array.fill()填充数组,之后再通过map依个赋值

使用for循环

我表示当时就惊呆了,还一直在检查是不是少打个0. 我表示不服,想用push试一下

发现push也好快哦……

比较下来,发现还是最原始的for循环直接赋值的速度最快,其他几个方法速度都差不多。

但for循环写起来实在麻烦,一句话就能搞定的事需要三句才能搞定。

所以,如果对性能没有太大要求的话(毕竟在实际开发中也不会有100000那么大的数组),使用apply和Array.from最方便。

以上所述是小编给大家介绍的JavaScript 批量创建数组的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

excel2013怎么求平均值excel2013求

excel2013怎么求平均值excel2013求

方法,步骤,平均值,电脑软件,strong,  Excel表格能够使用很多运算,像求平方,平方差,平均值等等,那么今天小编就教你怎么在excel2013中求平均值。希望对你有帮助!excel2013求平均值的方法步骤点击空白工作薄,新建一工作文档excel2013求平均值的方…

Photoshop设计制作漂亮的金色斑斓

Photoshop设计制作漂亮的金色斑斓

妇女节,设计制作,斑斓,火焰,金色,效果字由两大部分构成:金色字和火焰效果;金色字直接使用金色纹理素材,并加上一些简单的图层样式得到;火焰部分也是用图层样式来制作。最终效果1、打开PS后,选择菜单:文件 > 新建,画布尺寸如下图。<图1> 2、用油漆…

JS判断微信扫码的方法

JS判断微信扫码的方法

方法,电脑软件,JS,微信扫码,一、navagitor的userAgent属性中,判断是否含有micromessenger二、代码/** * 判断微信扫码 */ function isWechat() { var ua = navigator.userAgent.toLowerCase(),flag = false; // if(ua.match(/MicroMes…

ISO-8859-1 、Latin-1 西欧编码介

ISO-8859-1 、Latin-1 西欧编码介

编码,西欧,电脑软件,ISO,Latin,这些编码,早些时候在一些应用软件中经常看到,估计很多朋友也看到了,这些编码了!从这个图,我们可以看到这类编码应用很广泛,那么我们一起看看,iso-8859-1字符集,到底是什么样字符集,有那些字符!为什么,它应用可以这么广泛…

基于easyui checkbox 的一些操作处

基于easyui checkbox 的一些操作处

处理方法,操作,电脑软件,easyui,checkbox,1、获取已勾选的行:var rows = $('#datagrid').datagrid('getChecked');2、判断checkbox是否全选:var allFlg = $(".datagrid-header-check").find("input").is(":checked");3、checkbox在…

ES6新特性之类 | Class和继承 | Ex

ES6新特性之类 | Class和继承 | Ex

继承,新特性,电脑软件,Extends,Class,本文实例讲述了ES6新特性之类(Class)和继承(Extends)相关概念与用法。分享给大家供大家参考,具体如下:一、类(Class)1.基本语法JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子fu…

ajax同步验证单号是否存在的方法

ajax同步验证单号是否存在的方法

同步,方法,验证,单号,是否存在,本文实例讲述了ajax同步验证单号是否存在的方法。分享给大家供大家参考,具体如下://保存前执行的方法,ajax同步调用后台验证包裹单号是否存在function doBeforeSave(){ var packageCode=document.getElementBy…

微信小程序 页面滑动事件的实例详

微信小程序 页面滑动事件的实例详

滑动事件,详解,实例,页面,程序,微信小程序——页面滑动事件w <view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" styl…

angular2中router路由跳转navigate

angular2中router路由跳转navigate

刷新页面,路由,跳转,详解,电脑软件,本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容,分享出供大家参考学习,下面来看看详细的介绍:一、router.navigate的使用navigate是Router类的一个方法,主要用来跳转路由…

2017微信怎么加qq好友微信加好友的

2017微信怎么加qq好友微信加好友的

步骤,方法,好友,电脑软件,qq,  相对于QQ而言,使用微信的人越来越多,这就会遇到这么一个问题。如何把QQ好友转移到微信上呢,也就是说如何把QQ好友添加为微信好友,下面小编就为大家演示下微信加qq好友的方法,希望能帮到你。2017微信加qq好友的步…

ppt2007恢复文件的方法步骤有哪些

ppt2007恢复文件的方法步骤有哪些

文件,恢复,方法,步骤,有哪些,  在PPT的使用中,我们也难免会因为一时疏忽造成一些意外,比如误删了PPT的内容或者文件,那么如何才能恢复误删的PPT文件呢?以下是小编为您带来的关于ppt2007恢复文件的方法,希望对您有所帮助。ppt2007恢复文件的方…

JavaScript实现的浏览器下载文件的

JavaScript实现的浏览器下载文件的

浏览器,方法,下载文件,电脑软件,JavaScript,废话不多说了,直接给大家贴代码了,具体代码如下所示:function download(src) { var $a = document.createElement('a'); $a.setAttribute("href", src); $a.setAttribute("download"…