iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 12
3

javascript ES6 for ... of

過去我們可以使用 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


上一篇
Day11【ES6 小筆記】陣列的解構賦值-以哥哥的前女友為例(Array Destructuring)
下一篇
Day13【ES6 小筆記】Array.map() - 處理陣列最佳選擇
系列文
透過 ESLint 練習 JavaScript ES630

2 則留言

1
dragonH
iT邦大師 1 級 ‧ 2019-09-13 23:54:26

之前剛好也有遇到這個問題

情境是需要使用迴圈 + promise

e.g.

arr.forEach(async(el, index) => {
  const result = await myPromise(el);
  console.log(result)
});

codepen

結果發現 foreach 沒辦法達到我想要的結果

使用 for of

airbnb eslint 一直顯示警告

後來就發現在官方github 的 issue

有一大串在討論這個/images/emoticon/emoticon11.gif

那個討論好深奧 我現在還看不懂 XDDDDD (還有很多ES6還沒學
之後有學到再回過頭來看!

不過聽你這麼一說
我才想到就是因為我練習都在codepen練
所以沒有馬上發現錯誤 XDDD(不然就可以早早看到警告了
之後練習還是在 vscode 搭配 ESLint 好了

感謝你的分享順便點醒我了!!!

dragonH iT邦大師 1 級‧ 2019-09-15 15:36:01 檢舉

/images/emoticon/emoticon82.gif

0
sx0800
iT邦新手 5 級 ‧ 2020-01-15 06:58:29

airbnb eslint 大概和 for-of 有仇,
我是直接設定關閉檢查 for-of ,
這麼好用的語法不用可惜。

你用最簡潔明瞭的方式解釋程式,非常喜歡。

我要留言

立即登入留言