過去我們可以使用 for、while、do while、for-in 等內建的函式來處理資料，而在 ES6 中我們多了 for-of 這個更方便的用法來處理這些疊代型的資料（陣列、字串、map、set等）。

舉例來說～我們很常會需要把一個陣列中的每個值抓出來做處理，之前遇到這種情況，我最常用的就是 for 循環，而 ES6 的for-of 可以用更簡單的方式達到一樣的功能，以下就簡單來做個比較&練習唄～

for 迴圈 vs. for-of

我們有一個陣列，紀錄我喜歡的 youtuber，現在需要把每個 youtuber 的名稱獨立抓出來使用，for 迴圈作法如下：

let youtuber = ['洋蔥人','howhow','fred吃上癮','啾啾鞋','黃大謙'];
for (let i = 0; i < youtuber.length; i++) {
  console.log(youtuber[i]);
}

而這樣的作法，功能比較繁瑣、可讀性也不是很高，如果用for-of的作法，就會像這樣：

let youtuber = ['洋蔥人','howhow','fred吃上癮','啾啾鞋','黃大謙'];
for (let name of youtuber) {
  console.log(name);
}

以上兩個都能得到一樣的結果，console 出五個 youtuber 的名稱！
相對於 for迴圈 的語法，for-of 語法簡單了許多，並且可以使用break 終止與 continue 跳過迴圈的功能！

for-of 與 break

假如我們遇到「fred吃上癮」就要終止迴圈的話，就可以這樣寫

let youtuber = ['洋蔥人','howhow','fred吃上癮','啾啾鞋','黃大謙'];
for (let name of youtuber) {
  if (name === 'fred吃上癮') {
    break;
  }
  console.log(name); //洋蔥人 howhow
};

這樣當迴圈跑到「fred吃上癮」時，就會直接終止迴圈，出來的結果就只會有洋蔥人、howhow囉～

for-of 與 continue

而使用 continue 的話，就會跳過「fred吃上癮」，只出現其他的結果，像這樣：

let youtuber = ['洋蔥人','howhow','fred吃上癮','啾啾鞋','黃大謙'];
for (let name of youtuber) {
  if (name === 'fred吃上癮') {
    con;
  }
  console.log(name); //洋蔥人 howhow 啾啾鞋 黃大謙
};

有沒有～fred被跳過了，是不是很方便呢！

不僅如此，for-of 也可以取得陣列中的索引值哦！但是我的時辰不夠了！之後再補上唄XDDD

參考文章
ES6 for of 簡介
pjchender

驚訝倒數 ESLint airbnb 撰寫規則
11.1 不要使用迭代器。更好的做法是使用 JavaScript 的高階函式，像是 map() 及 reduce()，替代如 for-of 的迴圈語法。

哇哩咧～原來 airbnb 的規則不建議使用 for-of 的語法!!!我還寫那ㄇ爽XDDDDDD