[每日一題]面試官問：for in和for of 的區別和原理？
阿新 • • 發佈：2021-01-09
關注「鬆寶寫程式碼」，精選好文，每日一題
時間永遠是自己的
每分每秒也都是為自己的將來鋪墊和增值
>作者：saucxs ｜ songEagle
## 一、前言
2020.12.23 日剛立的 flag，每日一題，題目型別不限制，可以是：演算法題，面試題，闡述題等等。
本文是「每日一題」第 7 題：[每日一題]面試官問：for in和for of 的區別和原理？
往期「每日一題」：
+ 第 6 題 [[每日一題]面試官問：Async/Await 如何通過同步的方式實現非同步？](https://mp.weixin.qq.com/s/UAYBnQvekRugR8DVEUPB3Q)
+ 第 5 道[「每日一題」到底該如何回答：vue資料繫結的實現原理？](https://mp.weixin.qq.com/s/8eo4frdB-zMA7nD_1wdnLw)
+ 第 4 道[「每日一題」與面試官手撕程式碼：如何科學高效的尋找重複元素？](https://mp.weixin.qq.com/s/jFZ_2f272LhBBPuuLaWnyg)
+ 第 3 道[「「每日一題」面試官問你對 Promise 的理解？可能是需要你能手動實現各個特性」](https://mp.weixin.qq.com/s/QuuPd2KCp50snN7F2o3oYg)
+ 第 2 道[「[每日一題]ES6 中為什麼要使用 Symbol？」](https://mp.weixin.qq.com/s/omeVJdtabo5MeN3DItDfWg)
+ 第 1 道[「一道面試題是如何引發深層次的靈魂拷問？」](https://mp.weixin.qq.com/s/O8j9gM5tD5rjLz1kdda3LA)
## 二、for in和for of 的區別和原理？
這個題目本身不是特別難，只能說是作為社招的基礎面試題，但是如果想回答好這道題也不是很容易。
不信接著往下看：
### 1、簡單回答
很多人會去問：for in 和for of的區別，
我說：for in是獲取屬性名，for of獲取屬性值。
### 2、看一些例子
首先我們先看一個物件遍歷的例子
```js
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。
我們現在再看一個數組遍歷的例子
```js
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
}
```
這回沒有報錯，為什麼呢？
我們再看一個例子：
```js
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。
```js
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 的區別和原理？
+ 第 6 題 [[每日一題]面試官問：Async/Await 如何通過同步的方式實現非同步？](https://mp.weixin.qq.com/s/UAYBnQvekRugR8DVEUPB3Q)
+ 第 5 題：[「每日一題」到底該如何回答：vue資料繫結的實現原理？](https://mp.weixin.qq.com/s/8eo4frdB-zMA7nD_1wdnLw)
+ 第 4 道[「每日一題」與面試官手撕程式碼：如何科學高效的尋找重複元素？](https://mp.weixin.qq.com/s/jFZ_2f272LhBBPuuLaWnyg)
+ 第 3 道[「「每日一題」面試官問你對 Promise 的理解？可能是需要你能手動實現各個特性」](https://mp.weixin.qq.com/s/QuuPd2KCp50snN7F2o3oYg)
+ 第 2 道[「[每日一題]ES6 中為什麼要使用 Symbol？」](https://mp.weixin.qq.com/s/omeVJdtabo5MeN3DItDfWg)
+ 第 1 道[「一道面試題是如何引發深層次的靈魂拷問？」](https://mp.weixin.qq.com/s/O8j9gM5tD5rjLz1k