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使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
ES6 async、await的基本使用方法示例
Jun 06 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
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python的randrange()方法使用教程
2015/05/15 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
python实现三次样条插值
2018/12/17 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python下简易的单例模式详解
2019/04/08 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python可以用哪些数据库
2020/06/22 Python
解决pip install psycopg2出错问题
2020/07/09 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
司机岗位职责
2013/11/15 职场文书
初三化学教学反思
2014/01/23 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
产假请假条
2014/04/10 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js