JavaScript中for循环与for...in遍历数组的区别及原型扩展陷阱
本文对比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循环。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
相关标签:
