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

for…in可以用來干什么

（1）for…in最好用來遍歷對象，但也可以遍歷數(shù)組（有缺陷）
（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]); // 遍歷出來的是對象中屬性各自對應(yīng)的值1,2,3
}

需要注意的是，使用for…in遍歷對象時，不僅會把對象上的屬性遍歷出來，還會把對象原型鏈上的可枚舉的屬性遍歷出來

再看看for…in遍歷數(shù)組能不能成功

const arr = [1,2,3,4,5]
for(var a in arr){
    console.log(a); // 輸出的是數(shù)組索引
    console.log(arr[a]); // 輸出的是數(shù)組索引對應(yīng)的值
}

結(jié)果是成功的，但又為什么說最好不要用for…in遍歷數(shù)組呢？

（1）for…in遍歷出的數(shù)組索引為字符串型數(shù)字，不能直接進(jìn)行幾何運(yùn)算
（2）遍歷的順序可能不是按照實際數(shù)組的內(nèi)部順序
（3）使用for…in會遍歷所有的可枚舉屬性，包括原型

for…of能用來做什么

（1）for…of可以用來遍歷數(shù)/數(shù)組/字符串/map/set等擁有迭代器對象的集合
（2）for…of遍歷出來的是key-value中的value值

// 遍歷數(shù)組
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);
}

補(bǔ)充：
（1）for…of不能用來遍歷對象，因為普通對象中沒有迭代器對象
（2）與forEach()不同的是，for…of可以使用break,continue,return等語句

總結(jié)下來就是：

（1）在遍歷對象時用for…in，在遍歷數(shù)組時用for…of
（2）for…in遍歷出的是key，for…of遍歷出的結(jié)果是value。
也就是說遍歷數(shù)組時，for…in遍歷的是數(shù)組的索引，for…of遍歷的是數(shù)組的元素值。

到此這篇關(guān)于javascript中for...of和for..in循環(huán)的區(qū)別的文章就介紹到這了,更多相關(guān)javascript for...of和for..in內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: