關注「松寶寫代碼」，精選好文，每日一題
時間永遠是自己的
每分每秒也都是為自己的將來鋪墊和增值
作者：saucxs ｜ songEagle
一、前言
2020.12.23 日剛立的 flag，每日一題，題目類型不限制，可以是：算法題，面試題，闡述題等等。
本文是「每日一題」第 7 題：[每日一題]面試官問：for in和for of 的區別和原理？
往期「每日一題」：
二、for in和for of 的區別和原理？
這個題目本身不是特別難，只能說是作為社招的基礎面試題，但是如果想回答好這道題也不是很容易。
不信接着往下看：
1、簡單回答
很多人會去問：for in 和for of的區別，
我說：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。
我們現在再看一個數組遍歷的例子
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 循環返回的值都是數據結構的鍵名。
遍歷對象返回的是對象的key值，遍歷數組返回的是數組的下標。
還會遍歷原型上的值和手動添加的值
總的來說：for in適合遍歷對象。
4、for of的特點
for of 循環獲取一對鍵值中的鍵值。
一個數據結構只要部署了Symbol.iterator屬性，就被視為具有iterator接口，可以使用for of。
for of不同於forEach，for of是可以break，continue，return配合使用，for of 循環可以隨時退出循環。
總的來說：for of遍歷所有數據結構的統一接口。
5、深入探索
哪些數據結構部署了Symbol.iterator屬性？
以下數據結構的有iterator接口的：
- 數組Array
- Map
- Set
- String
- arguments對象
- Nodelist對象，類數組
凡是部署了iterator接口的數據結構都可以使用數組的擴展運算符(...)，和解構賦值等操作。
如果我非常想讓對象用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、學習資料福利
回復「算法」獲取算法學習資料
3、每日一題
-
本文是「每日一題」第 7 題：面試官問：for in和for of 的區別和原理？