Javascript学习笔记之数组的遍历和 length 属性


Posted in Javascript onNovember 23, 2014

尽管数组在 Javascript 中是对象,但是不建议使用 for in 循环来遍历数组,实际上,有很多理由来阻止我们对数组使用 for in 循环。
因为 for in 循环将会枚举原型链上的所有属性,并且唯一阻止的方法是使用 hasOwnProperty 来判断,这将比普通的 for 循环要慢不少。

遍历

为了达到最佳性能来遍历一个数组,最好的方式就是使用经典的 for 循环。

var list = [1, 2, 3, 4, 5, ...... 100000000];

for(var i = 0, l = list.length; i < l; i++) {

    console.log(list[i]);

}

这儿有一个额外的技巧,就是通过 l = list.length 来缓存数组的长度。
尽管属性 length 是定义在数组本身的,但是在循环的每一次遍历时仍然会有开销。尽管最新的 Javascript 引擎可能已经对这种情况作了性能上的优化,但是你并不能保证你的 Javascript 代码会一直在这种浏览器上运行。
实际上,不缓存长度的循环要比缓存长度的循环性能上慢不少。

length 属性

尽管 length 属性仅仅通过 getter 方法返回数组中元素的个数,但是可以通过 setter 方法来截断数组。

var foo = [1, 2, 3, 4, 5, 6];

foo.length = 3;

foo; // [1, 2, 3]

foo.length = 6;

foo.push(4);

foo; // [1, 2, 3, undefined, undefined, undefined, 4]

给 length 属性赋值一个更小的数将会截断数组,如果赋值一个更大的数则不会截断数组。

总结

为了性能达到最优,建议使用 for 循环而不是使用 for in 循环,同时缓存 length 属性。

还有数组对象是没有任何方法的,只有一个唯一的属性length。字符串对象是有length方法的~~

Javascript 相关文章推荐
jQuery 使用手册(五)
Sep 23 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
javascript表单事件处理方法详解
May 15 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
javascript时间差插件分享
Jul 18 Javascript
leaflet的开发入门教程
Nov 17 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
Javascript 赋值机制详解
Nov 23 #Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 #Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 #Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 #Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 #Javascript
js实例属性和原型属性示例详解
Nov 23 #Javascript
JS常用函数使用指南
Nov 23 #Javascript
You might like
怎样在php中使用PDF文档功能
2006/10/09 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
js+html实现点名系统功能
2019/11/05 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python如何实现数据的线性拟合
2019/07/19 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
python mysql断开重连的实现方法
2019/07/26 Python
python同步两个文件夹下的内容
2019/08/29 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
员工试用期考核自我鉴定
2014/04/13 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js