快捷導(dǎo)航

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

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

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

for…in可以用來(lái)干什么

（1）for…in最好用來(lái)遍歷對(duì)象，但也可以遍歷數(shù)組（有缺陷）
（2）for…in遍歷的是key-value中的key值

我們先看怎么使用for…in遍歷對(duì)象

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

for( var o in obj){
?? ?console.log(o); // 遍歷出來(lái)的是對(duì)象中的屬性，a,b,c
?? ?console.log(obj[o]); // 遍歷出來(lái)的是對(duì)象中屬性各自對(duì)應(yīng)的值1,2,3
}

需要注意的是，使用for…in遍歷對(duì)象時(shí)，不僅會(huì)把對(duì)象上的屬性遍歷出來(lái)，還會(huì)把對(duì)象原型鏈上的可枚舉的屬性遍歷出來(lái)

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

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

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

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

for…of能用來(lái)做什么

（1）for…of可以用來(lái)遍歷數(shù)/數(shù)組/字符串/map/set等擁有迭代器對(duì)象的集合
（2）for…of遍歷出來(lái)的是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不能用來(lái)遍歷對(duì)象，因?yàn)槠胀▽?duì)象中沒(méi)有迭代器對(duì)象
（2）與forEach()不同的是，for…of可以使用break,continue,return等語(yǔ)句

總結(jié)下來(lái)就是：

（1）在遍歷對(duì)象時(shí)用for…in，在遍歷數(shù)組時(shí)用for…of
（2）for…in遍歷出的是key，for…of遍歷出的結(jié)果是value。
也就是說(shuō)遍歷數(shù)組時(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: