javascript中for…of和for..in循環的區別

Posted on by

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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：