快捷導(dǎo)航

JavaScript中for?in和for?of的區(qū)別示例詳解

更新時間：2025年06月26日 10:59:17 作者：加油樂

在JavaScript中for...in和for...of是兩種不同的循環(huán)結(jié)構(gòu),它們各自有特定的用途和特點,這篇文章主要介紹了JavaScript中for?in和for?of區(qū)別的相關(guān)資料,需要的朋友可以參考下

一. 前言

在對數(shù)組或?qū)ο筮M(jìn)行遍歷時，我們經(jīng)常會使用到兩種方法: for in和for of
它們兩者都可以用于遍歷，不過for in遍歷的是數(shù)組的索引或?qū)ο蟮膶傩悦?code>index），而for of遍歷的是數(shù)組值或元素字段（value）

二. for in

1. for in循環(huán)對象

for in 用于循環(huán)對象時, key為對象中的每個屬性名使用 對象名[key]可以訪問對象中對應(yīng)的屬性值

window.location.
let obj = { name: "張三", age: 28 }
 for (const key in obj) {
     console.log(key);  // name age
     console.log(obj[key]); //張三 28
 }

2. for in循環(huán)數(shù)組

for in 用于循環(huán)數(shù)組時, key為數(shù)組中的每個下標(biāo) , 使用 數(shù)組名[key]可以訪問數(shù)組中對應(yīng)的值

let arr = [1, 5, 8, 9, 19, 85]
    for (const key in arr) {
        console.log(key);  // 0 1 2 3 4 5
        console.log(arr[key]); // 1 5 8 9 19 85
    }

三. for of

1. for of循環(huán)數(shù)組

for of 用于數(shù)組的循環(huán)時 , iterator是數(shù)組的每個值

let arr = [1, 5, 8, 9, 19, 85]
 for (const iterator of arr) {
     console.log(iterator);  //1 5 8 9 19 85
 }

2. for of循環(huán)字符串

for of 用于字符串的循環(huán)時 , iterator是字符串的每個字段

 let str = '這是一段文字'
   for (const iterator of str) {
       console.log(iterator); // 這 是 一 段 文 字
   }

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

JavaScript實現(xiàn)網(wǎng)頁播放器
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)網(wǎng)頁播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Webstorm2016使用技巧(SVN插件使用)
這篇文章主要介紹了Webstorm2016使用技巧(SVN插件使用),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
在JS中如何調(diào)用JSP中的變量
在JS中如何調(diào)用JSP中的變量，具體該怎么實現(xiàn)？下面有個不錯的示例，需要的朋友可以了解下
2014-01-01
jstl中判斷l(xiāng)ist中是否包含某個值的簡單方法
下面小編就為大家?guī)硪黄猨stl中判斷l(xiāng)ist中是否包含某個值的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
JavaScript 中實現(xiàn) use strict的方法及優(yōu)勢
本教程將討論JavaScript中的use strict特性,在這里,我們將通過不同的示例了解如何在JavaScript代碼語句中創(chuàng)建和執(zhí)行use strict關(guān)鍵字,需要的朋友可以參考下
2023-09-09
原生JS實現(xiàn)隨機(jī)點名項目的實例代碼
這篇文章主要介紹了原生JS實現(xiàn)隨機(jī)點名項目的實例代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-04-04
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見排序（Sort）算法詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見排序（Sort）算法,結(jié)合實例形式詳細(xì)分析了js常見排序算法中的冒泡排序、選擇排序、插入排序、希爾排序、歸并排序、快速排序等算法相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
2019-08-08
淺談JS封閉函數(shù)、閉包、內(nèi)置對象
下面小編就為大家?guī)硪黄獪\談JS封閉函數(shù)、閉包、內(nèi)置對象。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
微信小程序使用ucharts在小程序中加入橫屏展示功能的全過程
這篇文章主要給大家介紹了關(guān)于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2022-09-09
JavaScript字典與集合詳解
這篇文章主要介紹了JavaScript字典與集合詳解，集合是由一組無序且不重復(fù)的元素構(gòu)成。我們可以將集合看成一種特殊的數(shù)組，它的特殊之處就是無序且不重復(fù)，這也就意味著我們不能通過下標(biāo)的方式進(jìn)行訪問，而且集合中不會出現(xiàn)重復(fù)的元素
2022-07-07