本文对比JavaScript中for循环与for...in遍历数组的差异，重点分析当通过Array.prototype扩展方法时，for...in会遍历到原型链上的属性，导致额外输出。建议遍历数组时使用标准for循环以避免此类隐患。
for循环与for...in遍历数组的类型差异
首先观察以下代码示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 一个普通的数组
var arr =[3,5,2,6];
// 普通的for 循环遍历
for(var i = 0 ; i < arr.length; i++){
console.log(i,"类型："+typeof i,arr[i]);
}
// 用for in 遍历数组
for(var k in arr){
console.log(k,"类型："+typeof k,arr[k]);
}
</script>
</body>
</html>该代码展示了标准for循环与for...in循环在遍历数组时的一个显著区别。
在标准for循环中，变量i为number类型，代表数组的索引下标；而在for...in循环中，变量i（或k）为string类型，代表数组的键名（key）。
这仅仅是一个类型上的区别，尚不构成严重问题。
接下来看另一段代码示例。
数组原型扩展导致的遍历异常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 一个普通的数组
var arr =[3,5,2,6];
// 在数组原型上扩展一个方法
Array.prototype.extend = function(){
console.log("在数组原型扩展一个方法");
}
// 普通的for 循环遍历
for(var i = 0 ; i < arr.length; i++){
console.log(i,"类型："+typeof i,arr[i]);
}
// 用for in 遍历数组
for(var k in arr){
console.log(k,"类型："+typeof k,arr[k]);
}
</script>
</body>
</html>这段代码在上一例基础上，通过原型链为Array对象扩展了一个自定义方法。实现非常简单，仅添加了一个函数。但运行结果却出现了意外情况：
输出结果中多出了一行内容，该行对应的是我们扩展的函数，而非数组中定义的实际值。这表明遍历过程中包含了非数组元素的内容，问题由此显现。
综上所述，在常规情况下，使用for...in遍历数组通常能正常运行。
然而，如果项目采用类似foreach的方式遍历数组，假设未来有开发者为了扩展原生Array类，或引入了其他扩展了原生Array的外部JS框架，就会引发上述遍历到原型方法的问题。
因此，遍历数组时最好使用标准的for循环。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。