js数组遍历 千万不要使用for...in...

js数组遍历相信大家都不陌生,很多人会想到for循环和 for...in...循环,但是千万不要使用for...in...循环遍历数组,特别是如果你想写点有用的,能够移植的代码时。下面我们来看看这个可恶的for...in...。

1、语法

for (variable in object) {...
}
这个语法中有个object,我们知道在javascript中对象这个概念是很宽泛的,那这个地方的对象可以是数组吗?当然可以,下面是一个例子:

var a = [1, 2, 3, 4];
for(var i in a){
	console.log(a[i]);
}
这段代码并不出人所料,会输出 1 2 3 4,一点问题都没有,并且是非常正确的用法。但是这只是通常是正确的。

2、for...in...遍历数组的问题

先上代码:

Array.prototype.searchItem = function(value){//函数已被简化
	return right;
}

var a = [1, 2, 3, 4];
for(var i in a){
	console.log(a[i]);
}
这段代码就是在上边的代码的基础上,为Array做了一下扩充。很简单,只是添加了一个用于搜索的函数(这个函数已被我简化成和上边那样)。但是我们来看运行会出现什么情况:

1
2
3
4
function (value){
	return right;
} 

输出的结果中,多出了一行,这一行是一个函数,不是我们定义在数组中的值。到此这个问题就出来了。这个真的是你的本意吗?答案是否定的。

综上所述,用for...in...在通常情况下确实可以正确运行,但是如果我们的代码时放到别人的环境中也想跑,那请不要使用for...in...来循环数组。并且这种错误往往真的很隐蔽。

3、如何解决上述问题——老老实实写for循环

在上述的两种(一种正确,一种错误)情况下,for循环总是可以很好的运行,代码如下:

Array.prototype.searchItem = function(value){
	return right;
}

var a = [1, 2, 3, 4];
for(var i = 0; i< a.length; i++){
	console.log(a[i]);
}
老老实实写好for循环是避免这个错误的最好的做法了。当然还有别的办法,这是这个办法可以在未来可用,使用 for...of...语句,但是这个只能在未来使用,而不是现在,可以参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of 。


总结一下,用简单的方法去解决复杂的问题是我们程序员的基本思路,当然如果你为了花哨而落入陷阱那你只能自己爬出来。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值