【快速入門系列】簡述 for...in 和 for...of 區別

引言

在對數組或對象進行遍歷時，咱們常常會使用到兩種方法：for...in 和 for...of，那麼這兩種方法之間的區別是什麼呢？讓咱們來研究研究。

1、for...in

首先咱們看下MDN對for...in方法的解釋：for...in | MDN

for...in 循環只遍歷可枚舉屬性。像 Array和 Object使用內置構造函數所建立的對象都會繼承自Object.prototype和String.prototype的不可枚舉屬性，例如 String 的 indexOf() 方法或 Object的toString()方法。循環將遍歷對象自己的全部可枚舉屬性，以及對象從其構造函數原型中繼承的屬性（更接近原型鏈中對象的屬性覆蓋原型屬性）。

首先，咱們簡單的使用for...in分別對對象和數組進行遍歷：

// 遍歷對象
let obj = {
  a: 1,
  b: 2,
  c: 3
};
for(let item in obj) {
  console.log("item:" + item);
  console.log(obj[item]);
}

// 運行結果
item:a
1
item:b
2
item:c
3

// 遍歷數組
let arr = [1, 2, 3];
for(let item in arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 運行結果
item:0
1
item:1
2
item:2
3

咱們發現，使用for...in進行遍歷時，item值爲對象的key，爲數組的index。
咱們知道，數組索引只是具備整數名稱的枚舉屬性，而且與通用對象屬性相同，所以不能保證for...in以某種固定的順序返回索引，所以，不推薦使用for...in進行數組的遍歷。

下面，咱們在上面代碼的基礎上，在arr數組上增長一個自定義屬性，再次遍歷，查看結果。

arr.name = 'arrName';
for(let item in arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 運行結果
item:0
1
item:1
2
item:2
3
item:name
arrName

咱們發現，for...in不只會遍歷數組中的元素，還會遍歷自定義屬性。

2、for...of

說完for...in咱們再來看看for...of，咱們仍是先來看看MDN對其的解釋 for...of | MDN

for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上建立一個迭代循環，調用自定義迭代鉤子，併爲每一個不一樣屬性的值執行語句。

一樣的，咱們仍是使用與for...in相同的代碼進行測試

// 遍歷對象
let obj = {
  a: 1,
  b: 2,
  c: 3
};
for(let item of obj) {
  console.log("item:" + item);
  console.log(obj[item]);
}

// 運行結果
for(let item of obj) {
                ^

TypeError: obj is not iterable
...

// 遍歷數組
let arr = [1, 2, 3];
for(let item of arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 運行結果
item:1
undefined
item:2
undefined
item:3
undefined

咱們能夠看出，使用for...of對對象進行遍歷時，報了TypeError: obj is not iterable錯誤，對數組進行遍歷時，item直接是數組每一項的值。

咱們再爲arr增長自定義屬性，查看效果。

arr.name = 'arrName';
for(let item in arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 運行結果
item:1
undefined
item:2
undefined
item:3
undefined

for...of沒有對數組的自定義屬性進行遍歷。

3、總結

根據以上測試結果並參考了相關資料，咱們得出瞭如下結論：

1. 遍歷對象時推薦使用for...in，其中item爲對象的key。使用for...of會報錯。
2. 遍歷數組時推薦使用for...of，其中item爲數組每一項的值。使用for...in則不能保證遍歷順序且會遍歷出自定義屬性。
3. for...in是ES5特性，for...of是ES6特性，所以須要注意兼容性。
4. 若是要使用for...of遍歷普通對象，須要配合Object.keys()一塊兒使用。

結束語

以上內容是咱們對for...in和for...of的測試對比，在使用時記住其區別可更快的編寫代碼和排查錯誤，若想了解其更深層區別，建議認真閱讀MDN相關資料。