javascript中for...of和for..in循环的区别

for…in可以用来干什么

（1）for…in最好用来遍历对象，但也可以遍历数组（有缺陷）
（2）for…in遍历的是key-value中的key值

我们先看怎么使用for…in遍历对象

const obj = {
    a:1,
    b:2,
    c:3
}

for( var o in obj){
    console.log(o); // 遍历出来的是对象中的属性，a,b,c
    console.log(obj[o]); // 遍历出来的是对象中属性各自对应的值1,2,3
}

需要注意的是，使用for…in遍历对象时，不仅会把对象上的属性遍历出来，还会把对象原型链上的可枚举的属性遍历出来

再看看for…in遍历数组能不能成功

const arr = [1,2,3,4,5]
for(var a in arr){
    console.log(a); // 输出的是数组索引
    console.log(arr[a]); // 输出的是数组索引对应的值
}

结果是成功的，但又为什么说最好不要用for…in遍历数组呢？

（1）for…in遍历出的数组索引为字符串型数字，不能直接进行几何运算
（2）遍历的顺序可能不是按照实际数组的内部顺序
（3）使用for…in会遍历所有的可枚举属性，包括原型

for…of能用来做什么

（1）for…of可以用来遍历数/数组/字符串/map/set等拥有迭代器对象的集合
（2）for…of遍历出来的是key-value中的value值

// 遍历数组
var arr = [1,2,3,4,3,5,7];
for (let i of arr){
    console.log(i);
}

// 遍历字符串
var str = 'hello'
for (let s of str){
    console.log(s); 
}

// 遍历set集合
const set = new Set([1,2,3,4])
for (let s of set){
    console.log(s);
}

补充：
（1）for…of不能用来遍历对象，因为普通对象中没有迭代器对象
（2）与forEach()不同的是，for…of可以使用break,continue,return等语句

总结下来就是：

（1）在遍历对象时用for…in，在遍历数组时用for…of
（2）for…in遍历出的是key，for…of遍历出的结果是value。
也就是说遍历数组时，for…in遍历的是数组的索引，for…of遍历的是数组的元素值。

到此这篇关于javascript中for...of和for..in循环的区别的文章就介绍到这了,更多相关javascript for...of和for..in内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！