JavaScript 数组遍历：for 与 for...in 的核心区别及最佳实践

JavaScript数组遍历的两种基本方式

在JavaScript中，遍历数组主要有两种常见方式。

var array=['a']
//标准的for循环
for(var i=1;i<array.length;i++){
alert(array[i])
}
//foreach循环
for(var i in array){
alert(array[i])
}

for与for...in的核心区别

在常规情况下，上述两种遍历数组的方式产生的结果是一致的。首先分析两者的第一个主要区别：

在标准的for循环中，变量i的数据类型是number，代表数组的下标；而在for...in循环中，变量i代表的是对象的键（key），其数据类型为string，这是因为在JavaScript中一切皆对象。你可以尝试执行alert(typeof i)来验证这一区别。虽然这看似是一个小问题，但当我们引入额外代码时，结果就会发生变化。

//扩展了js原生的Array
Array.prototype.test=function()
 
}

原型扩展带来的遍历陷阱

试试看上面的代码执行什么。我们发现标准的for循环仍然只对数组元素进行真正的循环，而for...in循环却会打印出刚才定义的test方法。这就是for与for...in遍历数组的最大区别：如果项目中采用for...in遍历数组，假设某天有人为了扩展JS原生Array类，或者引入了一个外部JS框架也扩展了原生Array，问题就会随之而来。

开发最佳实践建议

基于以上分析，提出两点建议：

1. 不要使用for...in遍历数组，全部统一采用标准的for循环来遍历数组（我们无法保证引入的JS库是否会采用prototype扩展原生Array）。 2. 如果需要对JS原生类进行扩展，建议不要采用prototype方式。