關(guān)注「松寶寫代碼」逼泣，精選好文药磺，每日一題
?時間永遠(yuǎn)是自己的
每分每秒也都是為自己的將來鋪墊和增值
作者：saucxs ｜ songEagle
一告组、前言
2020.12.23 日剛立的 flag，每日一題癌佩，題目類型不限制木缝，可以是：算法題，面試題驼卖，闡述題等等氨肌。
本文是「每日一題」第 7 題：[每日一題]面試官問：for in和for of 的區(qū)別和原理？
[圖片上傳失敗...(image-c31793-1611497864155)]
往期「每日一題」：
二贩虾、for in和for of 的區(qū)別和原理催烘？
這個題目本身不是特別難，只能說是作為社招的基礎(chǔ)面試題缎罢，但是如果想回答好這道題也不是很容易伊群。
不信接著往下看：
1、簡單回答
很多人會去問：for in 和for of的區(qū)別策精，
我說：for in是獲取屬性名舰始，for of獲取屬性值。
2咽袜、看一些例子
首先我們先看一個對象遍歷的例子
var obj = {name: 'saucxs',age: 21,sex: 1};
for(key in obj){
console.log(key, obj[key]);
// name saucxs
// age 21
// sex 1
}
for(key of obj){
console.log(key, obj[key]);
// typeError :obj is not iterable報錯
}
說明obj對象沒有iterable屬性報錯丸卷，使用不了for of。
我們現(xiàn)在再看一個數(shù)組遍歷的例子
var array = ['a','b','c'];
for(var key in array){
console.log(key, array[key]);
// 0 a
// 1 b
// 2 c
}
for(var key of array){
console.log(key, array[key]);
// a undefined
// b undefined
// c undefined
}
這回沒有報錯询刹，為什么呢谜嫉？
我們再看一個例子：
var array = ['a', 'b', 'c'];
array.name = 'saucxs'
for(key in array){
console.log(key, array[key])
// 0 a
// 1 b
// 2 c
// name saucxs
}
3、for in的特點
for in 循環(huán)返回的值都是數(shù)據(jù)結(jié)構(gòu)的鍵名凹联。
遍歷對象返回的是對象的key值沐兰，遍歷數(shù)組返回的是數(shù)組的下標(biāo)。
還會遍歷原型上的值和手動添加的值
總的來說：for in適合遍歷對象蔽挠。
4住闯、for of的特點
for of 循環(huán)獲取一對鍵值中的鍵值煌珊。
一個數(shù)據(jù)結(jié)構(gòu)只要部署了Symbol.iterator屬性钾麸，就被視為具有iterator接口，可以使用for of踱葛。
for of不同于forEach偶惠，for of是可以break春寿，continue，return配合使用忽孽，for of 循環(huán)可以隨時退出循環(huán)绑改。
總的來說：for of遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一接口。
5兄一、深入探索
哪些數(shù)據(jù)結(jié)構(gòu)部署了Symbol.iterator屬性厘线？
以下數(shù)據(jù)結(jié)構(gòu)的有iterator接口的：
- 數(shù)組Array
- Map
- Set
- String
- arguments對象
- Nodelist對象，類數(shù)組
凡是部署了iterator接口的數(shù)據(jù)結(jié)構(gòu)都可以使用數(shù)組的擴展運算符(...)出革，和解構(gòu)賦值等操作造壮。
如果我非常想讓對象用for of？
可以使用Object.keys()獲取對象的key值集合，在用for of耳璧。
var obj = {name: 'saucxs',age: 18, sex: 1};
for(var key of Object.keys(obj)){
console.log(key, obj[key]);
// name saucxs
// age 21
// sex 1
}
這樣也可以給一個對象部署Symbol.iterator屬性成箫。
謝謝支持
1、文章喜歡的話可以「分享旨枯，點贊蹬昌，在看」三連哦。
2攀隔、作者昵稱：saucxs皂贩，songEagle，松寶寫代碼昆汹∶魉ⅲ「松寶寫代碼」公眾號作者，每日一題筹煮，實驗室等遮精。一個愛好折騰，致力于全棧败潦，正在努力成長的字節(jié)跳動工程師本冲，星辰大海，未來可期劫扒。內(nèi)推字節(jié)跳動各個部門各個崗位檬洞。
3、長按下面圖片沟饥，關(guān)注「松寶寫代碼」添怔，是獲取開發(fā)知識體系構(gòu)建，精選文章贤旷，項目實戰(zhàn)广料，實驗室，每日一道面試題幼驶，進(jìn)階學(xué)習(xí)艾杏，思考職業(yè)發(fā)展，涉及到JavaScript盅藻，Node购桑，Vue，React氏淑，瀏覽器勃蜘，http，算法假残，端相關(guān)缭贡，小程序等領(lǐng)域，希望可以幫助到你，我們一起成長～
[圖片上傳失敗...(image-94f541-1611497864155)]
字節(jié)內(nèi)推福利
- 回復(fù)「校招」獲取內(nèi)推碼
- 回復(fù)「社招」獲取內(nèi)推
- 回復(fù)「實習(xí)生」獲取內(nèi)推
后續(xù)會有更多福利
學(xué)習(xí)資料福利
回復(fù)「算法」獲取算法學(xué)習(xí)資料
往期「每日一題」
1匀归、JavaScript && ES6
第 28 題：【每日一題】(28題)面試官:原型鏈與構(gòu)造函數(shù)結(jié)合方法繼承與原型式繼承的區(qū)別坑资？
第 15 題：【每日一題】面試官問：JS類型判斷有哪幾種方法闻坚？
第 13 題[每日一題]面試官問：['1', '2', '3'].map(parseInt)輸出沽翔，原因，以及延伸窿凤？
2夯秃、瀏覽器
3、Vue
4介陶、HTML5
5色建、算法
第 26 道【每日一題】(26題)算法題:最長公共前綴镀岛？
