浅谈Javascript数组的使用_javascript技巧
数组的大小
js的数组可以动态调整大小,更确切点说,它没有数组越界的概念,a[a.length]没什么问题。比如声明一个数组a = [1, 3, 5],现在的数组大小是3,最后一个元素的索引是2,但是你依然可以使用a[3],访问a[3]返回的是undefined,给a[3]赋值:a[3] = 7,是给数组a添加了一个元素,现在数组a的长度是4了。你可以试试把下面这段代码放到浏览器里运行下:
var a = []; for(int i = 0; i
在我的电脑上,火狐会立马崩掉,chrome这一个标签cpu占用99%(使用chrome的任务管理器查看的)。
js的length的值会随着数组元素的改变而改变,当然你也可以手动设置数组的 length 属性,设置更大的length不会给数组分配更多的空间,但是设置更小的length则会导致所有下标大于等于新length的属性被删除。
另外有一点就是,数组的length值是怎么来的,有的资料说是最大一个数字索引值加一,应该是对的,不过如果把空槽也算数的话,length值就是数组的元素数。上张图解释下:
从图里可以看到,有个数组a,a[0]和a[10]都已赋值,这时候a的length是11,中间有9个empty slot(姑且就翻译为空槽好了)。那这九个空槽算不算数呢,我觉得应该算,这样就能合理的解释length值了。那这些空槽的值是什么呢?undefined!所以呢,如果在chrome里,使用foreach遍历(forin),那么这些空槽正好都能跳过,而使用for遍历,则会打印出undefined。至于在firefox里,表现不太一样,自己试吧。
数组的遍历
昨天在看微博上转的js教程的时候,里面说在遍历数组的时候,判断语句i 关于数组的foreach遍历,js的方式相对于java/c#等语言是很奇怪的: 可以看到,打印的结果不是数组的元素,而是数字索引值(感觉这好像也可以说明,js的数组也是用hash的方式存储的),不管怎样,这一点要注意。(至于为什么这样,我觉得数组元素都是数组的属性,这个遍历是遍历的length值,从0到length。而不是逐个输出数组的元素,因为元素是属性,数组又不只数字索引这一种属性,那么为什么这样遍历的时候只输出它们呢,而不是length,push,join等方法?公平起见,只好输出数组的数字索引了。当然,这只是我自己的看法,具体怎么样我没研究。) 数组的一些方法 数组有push和pop方法,这样数组就像堆栈一样了。对数组使用delete,可以将数组中某个元素移除,但是那样会在数组中留下一个空洞(也就是说delete也可以删除数组中的元素,但是只是删除该位置的值,不改变数组大小,原位置类型是undefined),这是因为排在被删除元素之后的元素保留着它们最初的属性,所以应该使用splice对进行过delete操作的数组进行瘦身,它会将被删除的属性移除,但这样效率并不是很高。数组中还有map、reduce、filter等方法,这里就不多说了(跟python中的list挺像的)。 补充 最后补充一点,我前面说过,js中的数组就是对象(废话,本来就是对象),那么是不是说,数组和对象可以互相互替换着用呢?答案是可以的。不过为了明确,还是分开用比较好,下面说下什么时候该用数组,什么时候该用对象(参考《javascript语言精粹》): 当属性名是小而连续的整数时,应该使用数组,否则,使用对象。 番外 觉得闭包被神化了,可能语言层面上的实现有技术,但是在应用层面我觉得就应该那样啊,使用的时候都感觉不到那是在用闭包。但是这个闭包却几乎成了面试前端必问的概念了。 以上所述就是本文的全部内容了,希望大家能够喜欢。
for(var name in ['huey', 'dewey', 'louie']) {
console.log(name);
}
/*
打印结果:
0
1
2
*/
另外由于js中对数组和对象使用 typeof 的结果都是 Object,因此判断一个对象是否为数组的方法:
var is_array = function(value) {
return Object.prototype.toString.apply(value) === '[object Array]';
};
推荐阅读
-
js获取元素相对窗口位置的实现代码_javascript技巧
-
javascript的数组和常用函数详解_基础知识
-
js 判断checkbox是否选中的实现代码_javascript技巧
-
引用 js在IE与FF之间的区别详细解析_javascript技巧
-
一个级联菜单代码学习及removeClass与addClass的应用_javascript技巧
-
js实现同一页面多个运动效果的方法_javascript技巧
-
来自国外的页面JavaScript文件优化_javascript技巧
-
js截取小数点后几位的写法_javascript技巧
-
javascript dom操作之cloneNode文本节点克隆使用技巧_javascript技巧
-
javascript使用appendChild追加节点实例_javascript技巧