JavaScript中for...in与for...of遍历的区别详解

作者:函数茶馆时间:2026-10-23 19:21:04浏览:664

本文深入解析JavaScript中for...in与for...of的核心区别。for...in遍历数组时返回字符串索引及原型属性,存在类型与顺序问题,更适合遍历对象;而for...of专用于可迭代对象,直接获取元素值。文章通过代码实例展示两者在数组和对象遍历中的表现及潜在陷阱,帮助开发者选择正确的遍历方式。

数组遍历基础与forEach限制

在JavaScript中,遍历数组最常用的方式是for循环。ES5标准引入了forEach方法,此外map、filter、some、every、reduce和reduceRight等数组方法也具备遍历功能,但它们的返回值各不相同。需要注意的是,使用forEach遍历数组时,无法通过break语句中断循环,且return语句仅用于返回当前迭代项,不会终止整个循环或返回到外层函数。

接下来,我们将重点探讨for...in与for...of这两种遍历方式的具体区别。

for...in遍历机制与缺陷

for...in遍历机制

首先通过一个基础示例来观察其行为。


//for in 应用于数组
Array.prototype.sayHello = function(){
  console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = [1,2,10,30,100];
myArray.name='数组';
 
for(let index in myArray){
  console.log(index);
}
//输出结果如下
0,1,2,3,4,name,str,sayHello
 
//for in 应用于对象中
Object.prototype.sayHello = function(){
  console.log('Hello');
}
Obeject.prototype.str = 'World';
var myObject = {name:'zhangsan',age:100};
 
for(let index in myObject){
  console.log(index);
}
//输出结果
name,age,str,sayHello
//首先输出的是对象的属性名,再是对象原型中的属性和方法,
//如果不想让其输出原型中的属性和方法,可以使用hasOwnProperty方法进行过滤
for(let index in myObject){
  if(myObject.hasOwnProperty(index)){
    console.log(index)
  }
}
//输出结果为
name,age
//你也可以用Object.keys()方法获取所有的自身可枚举属性组成的数组。
Object.keys(myObject)

从示例可以看出,当for...in用于数组时,它返回的是数组的索引(下标)以及数组原型上定义的方法和属性;当用于对象时,它返回的是对象的属性名以及原型链上的方法和属性。

虽然可以使用for...in遍历数组,但这种方式存在以下显著问题:

1. 索引index是字符串类型的数字,无法直接进行数学运算。

2. 遍历顺序可能不遵循数组内部的实际存储顺序。

3. for...in会遍历数组所有可枚举的属性,包括原型链上的属性。例如,上述示例中定义的原型方法method和属性name也会被遍历出来。


Object.prototype.sayHello = function(){
  console.log('Hello');
}
var myObject = {
  name:'zhangsan',
  age:10
}
 
for(let key of myObject){
  consoloe.log(key);
}
//输出结果
//typeError
 
Array.prototype.sayHello = function(){
  console.log("Hello");
}
var myArray = [1,200,3,400,100];
for(let key of myArray){
  console.log(key);
}
//输出结果
1,200,3,400,100

for...in与for...of核心区别总结

综上所述,for...in遍历的是数组的索引(即键名),而for...of遍历的是数组的元素值。因此,for...in更适合用于遍历对象,不建议使用for...in来遍历数组。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章