javascript中for...of和for..in循環(huán)的區(qū)別

更新時間：2022年08月16日 15:26:23 投稿：zx

JS中循環(huán)語句眾多，你是否也有用的時候突然不知道用哪個的經歷，本文主要介紹了javascript中for...of和for..in循環(huán)的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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等語句