寫在前面

我沒事的時候喜歡看一下大牛的部落格和論壇，最近看了張鑫旭大哥關於介紹for...of的部落格，這裡簡單的總結一下，給自己一個記憶理解的過程，同時分享給那些一直關注我喜歡技術的人。鄙人能力有限，寫的不妥，多多指教。

什麼叫做物件？

沒寫之前首先解釋一下什麼叫做“物件”，為什麼要解釋呢？因為我發現很多人不管是什麼層次的人，在學習的過程中啊，都有一些概念傻傻分不清，所以我覺得還是有必要解釋一波，這裡的物件不是象棋裡面的那物件，而是我們說的JS裡面的物件，如果非要給物件一個解釋的話，我只能說萬物皆物件，像我們常常使用的字串、數字、陣列、日期等等都是物件，怎麼判斷是不是物件呢？物件是擁有自己的屬性和方法。或者說擁有自己的屬性和方法的都可以叫做物件。

什麼是for-of？

呃...今天的主題呢是使用for-of處理JS物件，我們都知道一般情況下呢for迴圈是用來處理陣列的，這個話題我在之前也是不止一次的說過，怎麼遍歷怎麼實現都寫過，感興趣的可以翻翻之前的部落格看一下，這裡就不贅述了，至於什麼是for-of啊，這裡說一下，其實呢他和for-in應該不同時間的雙胞胎姐妹...(別罵我，你是個zz吧，雙胞胎哪有不同時間的)，好吧，說的不恰當，其實是ES6新出的一個可以遍歷物件的辦法，有多厲害呢？下面我們認識一下：

迭代陣列：

var arr = [3, 5, 7];
for (var i of arr) {
   console.log(i);
}
// 結果是：
// 3
// 5
// 7
 

迭代陣列的索引：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

var arr = [3, 5, 7];
arr.foo = 'hello';

for (var i in arr) {
   if (arr.hasOwnProperty(i)) {
    console.log(i);
  }
}
// 結果是：
// 0
// 1
// 2
// foo

還有一種情況就是我們在使用for..in的時候啊，經常會希望可以按照我們自己的想法中斷遍歷，例如這樣：

var arr = [3, 5, 7];

arr.forEach(function (value) {
  console.log(value);
  if (value == 5) {
    return false;
  }
});
// 結果是：
// 3
// 5
// 7
 

但是奈何for...in實現不了，他是不可以直接break跳出迴圈的，但是在es6的for of中就解決了這個問題：

var arr = [3, 5, 7];

for (let value of arr) {
  console.log(value);
  if (value == 5) {
    break;
  }
}
// 結果是：
// 3
// 5

我們一直說for...of很強大，下面看看強大到什麼地步，迭代字串，“what fuck?”

let str = 'boo';

for (let value of str) {
  console.log(value);
}
// 結果是：
// "b"
// "o"
// "o"

還可以迭代argument型別的陣列：

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);
// 結果是：
// 1
// 2
// 3

迭代NodeList類的DOM集合：

let elements = document.querySelectorAll('body');

for (let element of elements) {
  console.log(element.tagName);
}
// 結果是：
// "BODY"

迭代型別陣列：

let typeArr = new Uint8Array([0x00, 0xff]);

for (let value of typeArr) {
  console.log(value);
}
// 結果是：
// 0
// 255

迭代map：

let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let [key, value] of mapData) {
  console.log(value);
}
// 結果是：
// 1
// 2
// 3

迭代set：

let setData = new Set([1, 1, 2, 2, 3, 3]);

for (let value of setData) {
  console.log(value);
}
// 結果是：
// 1
// 2
// 3

......

看了這麼多的好處是不是心動了，其實吧他也有缺點，由於他是ES6的新特性，所以他的相容性還是不是那麼的強大，IE瀏覽器是不支援的，所以呢，看您自己的專案需求吧，有什麼需求用什麼技術就行了。