前端面试系列-JavaScript-for ... in和for...of

最新推荐文章于 2025-06-11 08:58:50 发布

LYFlied

最新推荐文章于 2025-06-11 08:58:50 发布

阅读量1.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： javascript 前端性能面试

本文链接：https://blog.youkuaiyun.com/qq_39903567/article/details/115203524

本文探讨了JavaScript中的for...in和for...of循环的区别。for...in主要用于遍历对象，易受原型链影响，而for...of支持数组和类数组对象，更高效。两者的性能对比显示，for循环最佳，其次是for...of，然后是for...in，后者因字符串转换和遍历所有属性导致性能下降。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、for … in、for…of区别

1.for … in

for…in 循环一般用于对象的遍历，不适用于遍历数组。

遍历数组的缺点：数组的下标 index 值是数字，for-in遍历的 index值"0",“1”,"2"等是字符串。存在一个转换过程，降低性能

任何对象都继承了Object对象，继承的类的属性是默认不可遍历的，for… in 循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性。
可以用hasOwnProperty() 方法，在循环内部判断一下，某个属性是否为对象自身的属性。

2. for…of

for…of 循环不仅支持数组，还支持大多数类数组对象，也支持字符串遍历。 for…of 它可以正确响应 break、continue 和 return 语句。

3.区别

for in 一般常用来遍历对象或json，不适用于遍历数组。
for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
for in循环出的是key，for of循环出的是value
遍历对象时，for in，包括原型链上的属性，需要用hasOwnProperty()判断；for of + Object.keys()得到的是自身可枚举属性

二、转为ES5代码

ES6代码

let arr = [1,2,3,4]

for(let item of arr){
	console.log(item)
}

for(let index in arr){
	console.log(arr[index])
}

let obj = {
	name:"小强",
    age:23