快捷導(dǎo)航

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

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

在JavaScript中for...in和for...of是兩種不同的循環(huán)結(jié)構(gòu),它們各自有特定的用途和特點(diǎn),這篇文章主要介紹了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)文章

150行代碼帶你實(shí)現(xiàn)微信小程序中的數(shù)據(jù)偵聽
在這篇文章中, 我將用150行代碼, 手把手帶你打造一個小程序也可以使用的偵聽器，感興趣的朋友跟隨小編一起看看吧
2019-05-05
JQuery中serialize() 序列化
這篇文章主要介紹了JQuery中serialize() 序列化，十分的細(xì)致全面，推薦給大家，
2015-03-03
JavaScript隊(duì)列函數(shù)和異步執(zhí)行詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript隊(duì)列函數(shù)和異步執(zhí)行的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
淺析JS中常用類型轉(zhuǎn)換及運(yùn)算符表達(dá)式
這篇文章主要介紹了關(guān)于JS中涉及的常用類型轉(zhuǎn)換及運(yùn)算符表達(dá)式 ,包括js中常用類型轉(zhuǎn)換，及常用的運(yùn)算符表達(dá)式，需要的朋友可以參考下
2017-07-07
javascript動態(tài)的改變IFrame的高度實(shí)現(xiàn)自動伸展
動態(tài)的改變IFrame的高度，實(shí)現(xiàn)IFrame自動伸展，父頁面也自動神縮，實(shí)現(xiàn)原理很簡單就是在IFrame子頁面一加載的時候，調(diào)用父IFrame對象，改變其高度，感興趣的朋友可以了解下
2013-10-10
js彈出層(jQuery插件形式附帶reLoad功能)
之前的彈出層做的挺好，但是代碼結(jié)構(gòu)有問題，這次用到了，重構(gòu)了一下，改為jQuery的插件形式，感覺還不錯，有興趣的朋友可以參考下，希望可以幫助到你
2013-04-04
js檢測IE8及以下瀏覽器版本并做出提示的函數(shù)代碼
這篇文章主要介紹了js檢測IE8及以下瀏覽器版本并做出提示的函數(shù)代碼,需要的朋友可以參考下
2023-02-02
EasyUI閃屏EasyUI頁面加載提示(原理+代碼+效果圖)
這篇文章主要介紹了EasyUI閃屏EasyUI頁面加載提示(原理+代碼+效果圖)的相關(guān)資料,需要的朋友可以參考下
2016-02-02
文本框回車提交與禁止提交示例
文本框輸入數(shù)據(jù)后使用回車進(jìn)行提交，想必大家都嘗試過吧，在本文有個不錯的示例，喜歡的朋友可以參下
2013-09-09
js判斷文本框剩余可輸入字?jǐn)?shù)的方法
這篇文章主要介紹了js判斷文本框剩余可輸入字?jǐn)?shù)的方法,可實(shí)現(xiàn)直觀顯示文本框可輸入字?jǐn)?shù)的功能,非常具有實(shí)用價值,需要的朋友可以參考下
2015-02-02