从数据结构的角度分析 for each in 比 for in 快的多


Posted in Javascript onJuly 07, 2013

之前听说火狐的JS引擎支持for each in的语法,例如下述的代码:

var arr = [10,20,30,40,50];
for each(var k in arr)
console.log(k);

即可直接遍历出arr数组的内容。

由于只有FireFox才支持,所以几乎所有的JS代码都不用这一特征。

不过在ActionScript里天生就支持for each的语法,不论Array还是Vector,还是Dictionary,只要是可枚举的对象都可以for in和for each in。

之前并没有感觉有太大的差异,为了懒得敲一个each单词,一直用熟悉的for in来遍历。

不过今天仔细琢磨了会,从数据结构的角度分析了下,觉得for in和for each in效率上有着本质的区别,无论是JS还是AS。

原因很简单:Array不是真正意义上的数组!

何为真正意义的数组?当然就是传统语言里type[]定义的数据类型,所有元素都是连续保存的。

“Array”虽然也是数组的意思,但熟悉JS的都知道,它其实是个非线性的伪数组,下标可以是任意数字。写入arr[1000000]并非真正申请容纳一百万个元素的空间,而是把1000000转换成相应的哈希值,对应到很小一块储存空间里,从而节省了大量内存。

例如有如下数组:

var arr = [];
  arr[10] = 1000;
  arr[20] = 2000;
  arr[30] = 5000;
  arr[40] = 8000;
  arr[200] = 9000;

用for...in遍历Array,是个很累赘的过程:

从数据结构的角度分析 for each in 比 for in 快的多

遍历时每次访问arr[k],都要进行一次Hash(k)计算,根据散列表的容量取模,如果存在冲突还得寻找最终的值结果。

如果支持for each...in的语法,其内部的数据结构就决定了会快很多:

从数据结构的角度分析 for each in 比 for in 快的多

Array里直接把每个values作为节点,通过链表关联起来维护。每当有值添加或删除,就更新其链接关系。
当for each...in遍历时,只需从第一个节点往后迭代即可,无需任何Hash计算。

当然,对于AS3里Vector这样的线性数组来说,两者相差不大;同理,HTML5里支持二进制的数组ArrayBuffer也是如此。不过从理论上来看,即使arr是个连续的线性数组,for each in还是要快一点:

for...in遍历时,每次访问arr[k]都要进行下标越界检查;而for each in则根据内部链表,直接从底层反馈出迭代变量,节省了越界检查的过程。

Javascript 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 #Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 #Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 #Javascript
JQuery表格内容过滤的实现方法
Jul 05 #Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 #Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 #Javascript
javascript实现跳转菜单的具体方法
Jul 05 #Javascript
You might like
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
深入理解Promise.all
2018/08/08 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python 异常处理实例详解
2014/03/12 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python操作yaml说明
2020/04/08 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
养成教育工作总结
2015/08/13 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
Python基础详解之邮件处理
2021/04/28 Python
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript