定义和用法
for…in
for/in 语句用于循环对象属性。
循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
for…of
for/of 语句循环遍历可迭代对象的值。
它允许您循环遍历可迭代的数据结构,例如数组、字符串、映射、节点列表等:
代码对比
-
遍历数组
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 } }
-
遍历对象
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
}