Javascript学习笔记之数组的遍历和 length 属性
作者:bea
尽管数组在 Javascript 中是对象,但是不建议使用 for in 循环来遍历数组,实际上,有很多理由来阻止我们对数组使用 for in 循环。 因为 for in 循环将会枚举原型链上的所有属性,并且唯一阻止的方法是使用 hasOwnProperty 来判断,这将比普通的 for 循环要慢不少。 遍历 为了达到最佳性能来遍历一个数组,最好的方式就是使用经典的 for 循环。 代码如下: var list = [1, 2, 3, 4, 5, ...... 1000
尽管数组在 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方法的~~
有用 | 无用
遍历
为了达到最佳性能来遍历一个数组,最好的方式就是使用经典的 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 中__proto__和prototype详解
- js 加密压缩出现bug解决方案
- js Object2String方便查看js对象内容
- js的[defer]和[async]属性
- 使用JavaScript 编写简单计算器
- JS和JQ的event对象区别分析
- JavaScript实现大数的运算
- 使表格的标题列可左右拉伸jquery插件封装
- jQuery实现隔行背景色变色
- jQuery实现统计复选框选中数量
- 基于jQuery实现文本框缩放以及上下移动功能
- 基于jQuery实现复选框的全选 全不选 反选功能
- 基于jQuery实现下拉框
- 基于jQuery实现表单提交验证
- jQuery简单实现网页选项卡特效
- jQuery选择器全集详解
- 常见的jQuery选择器汇总
- Javascript学习笔记之相等符号与严格相等符号
- Javascript学习笔记之数组的构造函数