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

1. • 循环数组

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])
  }
}