for...in和for...of的区别和使用场景

donggua_123

于 2019-12-22 11:12:20 发布

阅读量1.9k

点赞数

分类专栏： js 前端文章标签： for..in for...of 遍历器 iterator

本文链接：https://blog.youkuaiyun.com/dongguan_123/article/details/103650852

版权

本文探讨了JavaScript中for...in和for...of两种遍历方式的区别。for...in遍历数组索引或对象的键，可能会包含原型链上的属性，不适于遍历数组；而for...of遍历数组值或实现了迭代器接口的对象，适用于类数组对象和部署了iterator的结构。同时，文章介绍了迭代器（Iterator）的概念，以及如何为普通对象手动实现遍历器接口。

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

这还要从一道面试题说起，请问下面两种情况分别打印什么：

let arr = [1,2,3,4,5]
for(let i in arr) {
    console.log(i) // 0,1,2,3,4
} 
for(let i of arr) {
    console.log(i) // 1,2,3,4,5
}

可以看到，for in遍历的是数组索引，也是数组的键，for of遍历的是数组值，再看下面的例子

let arrObj1 = {
    a:1,
    b:2,
    c:3
}
for(let i in arrObj1) {
    console.log(i) // a b c
} 
for(let i of arrObj1) {
    console.log(i) // Uncaught TypeError: arrObj1 is not iterable at <anonymous>:1:14
}

for in遍历键，输出a b c，for of报错了，当前对象不可遍历

到这里我们大致可以得出一些结论了，就是：

for in即可以遍历数组，也可以遍历对象

for of只能遍历数组

继续研究一下for in

let bb = [1,2,3]
bb.__proto__.name = 'tttt'
for(let i in bb) {
    console.log(i) // 0 1 2 name
}

可以看到，for in还会遍历数组原型上的属性和方法<

最低0.47元/天解锁文章