for ... in 和for ... of 用法

正在画图的小瓶盖

于 2023-02-07 14:55:19 发布

阅读量167

点赞数 2

文章标签：数据结构 javascript 前端

本文链接：https://blog.youkuaiyun.com/sdybz11zr/article/details/128918776

版权

文章详细介绍了JavaScript中两种循环结构的区别。for...in循环用于遍历数组的索引或对象的属性名称，而for...of则用于遍历数组的元素值。在尝试用for...of循环对象时会导致错误，因为对象在默认情况下不是可迭代的。文章还提供了一个示例，展示了如何在外层使用for...of遍历数组，内层使用for...in遍历对象属性。

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

- 循环数组

for ... in ...循环数组输出的是数组的下标index ，

for ... of ...循环数组输出的是数组每一项的值item

const arr = [1,2,3,4]
 
// for ... in
for (const key in arr){
    console.log(key) // 输出 0,1,2,3
    }
 
// for ... of
for (const key of arr){
    console.log(key) // 输出 1,2,3,4
    }

2. 循环对象

for ... in ... 循环对象输出的是对象的属性名称

for ... of ... 循环对象------报错

const object = { name: 'lx', age: 23 }
    // for ... in
    for (const key in object) {
      console.log(key) // 输出 name,age
      console.log(object[key]) // 输出 lx,23
    }
 
    // for ... of
    for (const key of object) {
      console.log(key) // 报错 Uncaught TypeError: object is not iterable
    }

总结

如果遇到数组对象可以外层用for of 取出数组每一项的值内层用 for in取出对象的属性值

const list = [{ name: 'smallcaps' }, { age: 18 }, { height: "180cm" }]
for (const item of list) {
  for (const name in item) {
    console.log(item[name])
  }
}