从数据结构分析看:用for each...in 比 for...in 要快些


Posted in Javascript onApril 17, 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里储存存了keys的列表,也把每个values值作为链表关联起来。每当有值添加或删除,就更新其链接关系。

当for each...in遍历时,只需从第一个节点往后迭代即可,无需任何Hash计算。

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

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

Javascript 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 #Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 #Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 #Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 #Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 #Javascript
jquery表格内容筛选实现思路及代码
Apr 16 #Javascript
js实现图片轮换效果代码
Apr 16 #Javascript
You might like
谈谈新手如何学习PHP
2006/12/23 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
新浪的图片新闻效果
2007/01/13 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
python -v 报错问题的解决方法
2020/09/15 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
暑期实践思想汇报
2014/01/06 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
现金出纳岗位职责
2014/03/15 职场文书
运动会100米广播稿
2015/08/19 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python