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 相关文章推荐
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
vuex实现简易计数器
Oct 27 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
8个PHP数组面试题
2015/06/23 PHP
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
简单的通用表达式求10乘阶示例
2014/03/03 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python实现飞机大战
2018/09/11 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
C#笔试题
2015/07/14 面试题
售后专员岗位职责
2013/12/08 职场文书
法学专业自我鉴定
2014/02/05 职场文书
园艺师求职信
2014/03/10 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2014年终工作总结范本
2014/12/15 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
导游词之临安白水涧
2019/11/05 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技
Spring Boot 实现 WebSocket
2022/04/30 Java/Android