for?of?和?for?in?的區(qū)別介紹
1.共性
for of
和 for in
都是用來遍歷的屬性
2.區(qū)別
for...in
語句用于遍歷數(shù)組或者對象的屬性(對數(shù)組或者對象的屬性進(jìn)行循環(huán)操作)。for in
得到對對象的key
或數(shù)組,字符串的下標(biāo)for of
和forEach
一樣,是直接得到值for of
不能用于對象
1.兩者對比例子(遍歷對象)
const obj = { a: 1, b: 2, c: 3 } for (let i in obj) { console.log(i) //輸出 : a b c } for (let i of obj) { console.log(i) //輸出: Uncaught TypeError: obj is not iterable 報錯了 }
說明: for in
和 for of
對一個obj對象
進(jìn)行遍歷,for in 正常的獲取了對象的 key值,分別打印 a、b、c,而 for of卻報錯了。
2.兩者對比例子(遍歷數(shù)組)
const arr = ['a', 'b', 'c'] // for in 循環(huán) for (let i in arr) { console.log(i) //輸出 0 1 2 } // for of for (let i of arr) { console.log(i) //輸出 a b c }
3.特點(diǎn)
①. for in
特點(diǎn)
- for … in 循環(huán)返回的值都是數(shù)據(jù)結(jié)構(gòu)的 鍵值名(即下標(biāo))。
- 遍歷對象返回的對象的key值,遍歷數(shù)組返回的數(shù)組的下標(biāo)(key)。
- for … in 循環(huán)不僅可以遍歷數(shù)字鍵名,還會遍歷原型上的值和手動添加的其他鍵。
- 特別情況下, for … in 循環(huán)會以看起來任意的順序遍歷鍵名
- for in 的 常規(guī)屬性和 排序?qū)傩?/li>
- 在ECMAScript規(guī)范中定義了 「數(shù)字屬性應(yīng)該按照索引值??升序排列,字符串屬性根據(jù)創(chuàng)建時的順序升序排列?!乖谶@?我們把對象中的數(shù)字屬性稱為 「排序?qū)傩浴梗赩8中被稱為 elements,字符串屬性就被稱為 「常規(guī)屬性」, 在V8中被稱為 properties。
function Foo() { this[100] = 'test-100' this[1] = 'test-1' this["B"] = 'bar-B' this[50] = 'test-50' this[9] = 'test-9' this[8] = 'test-8' this[3] = 'test-3' this[5] = 'test-5' this["A"] = 'bar-A' this["C"] = 'bar-C' } var bar = new Foo() for(key in bar){ console.log(`index:${key} value:${bar[key]}`) }
//輸出: index:1 value:test-1 index:3 value:test-3 index:5 value:test-5 index:8 value:test-8 index:9 value:test-9 index:50 value:test-50 index:100 value:test-100 index:B value:bar-B index:A value:bar-A index:C value:bar-C
總結(jié)一句: for in 循環(huán)特別適合遍歷對象。
①. for of
- for of 循環(huán)用來獲取一對鍵值對中的值,而 for in 獲取的是 鍵名
- 一個數(shù)據(jù)結(jié)構(gòu)只要部署了 Symbol.iterator 屬性, 就被視為具有 iterator接口, 就可以使用 for of循環(huán)。
- for of 不同與 forEach, 它可以與 break、continue和return 配合使用,也就是說 for of 循環(huán)可以隨時退出循環(huán)。
知識點(diǎn)補(bǔ)充:
簡述for in 和 for of 的區(qū)別
1、推薦在循環(huán)對象屬性的時候使用 for...in,在遍歷數(shù)組的時候的時候使用 for...of
2、for...in 循環(huán)出的是 key,for...of 循環(huán)出的是 value
3、注意,for...of 是 ES6 新引入的特性。修復(fù)了 ES5 引入的 for...in 的不足
4、for...of 不能循環(huán)普通的對象(如通過構(gòu)造函數(shù)創(chuàng)造的),需要通過和 Object.keys()搭配使用
for in遍歷數(shù)組的毛?。?/strong>
1.index索引為字符串型數(shù)字,不能直接進(jìn)行幾何運(yùn)算
2.遍歷順序有可能不是按照實(shí)際數(shù)組的內(nèi)部順序
3.使用for in會遍歷數(shù)組所有的可枚舉屬性,包括原型。例如上栗的原型方法method和name屬性
所以for in更適合遍歷對象,不要使用for in遍歷數(shù)組。
那么除了使用for循環(huán),如何更簡單的正確的遍歷數(shù)組達(dá)到我們的期望呢(即不遍歷method和name),ES6中的for of更勝一籌.
遍歷對象
遍歷對象 通常用for in來遍歷對象的鍵名
到此這篇關(guān)于for of 和 for in 的區(qū)別的文章就介紹到這了,更多相關(guān)for of 和 for in 的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于JS通過google翻譯插件實(shí)現(xiàn)多語言版本
這篇文章主要介紹了JS通過google翻譯插件實(shí)現(xiàn)多語言版本,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06echarts餅圖labelLine線的長度自適應(yīng)設(shè)置
這篇文章主要給大家介紹了關(guān)于echarts餅圖labelLine線的長度自適應(yīng)設(shè)置的相關(guān)資料,在echarts中,餅圖的標(biāo)簽線可以通過設(shè)置 labelLine屬性來自定義位置,需要的朋友可以參考下2023-08-08javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
常用的頁面效果有彈出層效果,無縫滾動效果,選項(xiàng)卡切換效果,接下來與大家分享一款自己用原生javascript寫的選項(xiàng)卡切換效果,感興趣的朋友可以參考下哈2013-03-03當(dāng)鼠標(biāo)移出灰色區(qū)域時候,菜單項(xiàng)怎么隱藏起來
當(dāng)鼠標(biāo)移出灰色區(qū)域時候,菜單項(xiàng)怎么隱藏起來...2007-11-11js實(shí)現(xiàn)點(diǎn)小圖看大圖效果的思路及示例代碼
點(diǎn)小圖看大圖的效果想必很多的朋友都有見到過吧,下面有個不錯的示例,感興趣的朋友可以參考下2013-10-10js實(shí)現(xiàn)的標(biāo)題欄新消息閃爍提示效果
這篇文章主要介紹了js實(shí)現(xiàn)的標(biāo)題欄新消息閃爍提示效果,一些大型網(wǎng)站也會經(jīng)常用到這個效果,需要的朋友可以參考下2014-06-06如何用js將blob為pcm格式轉(zhuǎn)換為MP3格式
要將PCM文件轉(zhuǎn)換為MP3文件,您可以使用Js實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于如何用js將blob為pcm格式轉(zhuǎn)換為MP3格式的相關(guān)資料,需要的朋友可以參考下2023-11-11