for in 和 for of的区别

const arr = [{ name: '张三' }, { name: '李四' }, { name: '王五' }]

// 使用 for...in 遍历数组可以输出数组的索引值和每一项的值
for (const key in arr) {
  console.log('下标值：', key)
  console.log('数组的每一项', arr[key]);
}

// 使用 for...of 只能输出数组的每一项 无法输出下标值
for (const key of arr) {
  console.log(key); // 输出数组的每一项
}

const object = { name: 'lx', age: 23 }

// for...in 遍历对象可以输出属性名和属性值
for (const key in object) {
  console.log(key); // 属性名
  console.log(object[key]); // 属性值
}

for (const key of object) {
  console.log(key); // 报错：对象不可迭代
}

// 总结：
// for...in 可以同时用来遍历数组和对象 对于数组都能输出索引值和每一项的值 对于对象都能输出属性名和属性值
// 而对对象使用for...of 会导致报错 对象不可迭代
// for...of对数组使用可以快速输出每一项 然而使用for...in也可以

// 在数组中查找指定的某个属性值对应的对象(一元数组)
const list = [{ name: 'lx' }, { age: 23 }, { sex: '男' }, { timer: 120 }, { house: '大房子' }]
for (const val in list) {
  for (const key in list[val]) {
    if (list[val][key] === 'lx') {
      console.log(list[val]); // { name: 'lx' }
    }
  }
}

// for...in和for...of的执行机制
 !(async function () {
      let arr = [1, 2, 3]
      for (const key of arr) {
        // for...of会让muti执行完再进行下一次循环
        let res = await muti(key)
        console.log(res); // 打印出这行再执行下一次for...of循环
      }
    })()