javascript - for.of和for.in的区别

定义和用法

for…in

for/in 语句用于循环对象属性。
循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

for…of

for/of 语句循环遍历可迭代对象的值。
它允许您循环遍历可迭代的数据结构，例如数组、字符串、映射、节点列表等：

代码对比

1. 遍历数组

   const arr1 = [1, 2, 3, 4, 5]
   const arr2 = [{ name: 1 }, { name: 2 }, { name: 3 }]
   
   for (let i in arr1) {
     console.log(i)//0,1,2,3,4
   }
   
   for (let i in arr2) {
     console.log(i) //0,1,2
   }
   
   
   for (let i of arr1) {
     console.log(i) 1,2,3,4,5
   }
   
   for (let i of arr2) {
     console.log(i) //{ name: 1 },{ name: 2 },{ name: 3 }
   }
   
   
   

2. 遍历对象

   const obj = { name: 1, value: 2, }
   
   for (let i in obj) {
     console.log(i) //name,value
   }
   for (let i of obj) {
     console.log(i) //obj is not iterable
   }
   
   

总结

1、 for…in 用来遍历对象，遍历数组得到的是数组的下标
2、 for…of用来遍历可迭代对象，像数组，字符串等，无法用来遍历对象，将会报错
3\、相当于for…in遍历拿到的是key，for…of拿到的是value
4、 如果想使用for…of遍历对象，获取对象value，我们可以先用Object.values()方法先取出来对象的value数组

const obj = { name: 1, value: 3 }

for (let i of Object.values(obj)) {
  console.log(i) //1,3
}