EP.28 RE：從零開始的學習 JS 生活-第二十八日之 ES6 迴圈

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
轉生第二十八日，這一篇將會介紹 ES6 的 `forEach` 以及 `for...of`

前言

轉生第二十八日，這一篇將會介紹 ES6 的 forEach 以及 for...of

forEach

ES6 其實幫助我們許多開發上的簡化，當然迴圈的功能也是，原本傳統使用 for 迴圈我們要這樣寫 ↓

for 定義

所以若我們要使用 for 迴圈跑一個陣列資料，就必須這樣撰寫：

1
2
3
4
5
6
var arrayData = ['a', 'b', 'c'];
var len = arrayData.length;

for(var i = 0; i < len;i++) {
  console.log(arrayData[i]);
}

光括號內的東西我自己在寫就覺得很累，而且還必須重新宣告一個變數儲存陣列長度，但是如果使用 ES6 新的寫法呢?其實就會省很多事情，其新寫法的規則如下 ↓

forEach 定義

所以我們就可以這樣子改寫：

1
2
3
4
5
6
7
var arrayData = ['a', 'b', 'c'];

arrayData.forEach(function(item,index,array){
  console.log('值' + item);
  console.log('索引' + index);
  console.log('陣列本身' + array);
})

可以發現迴圈的語法簡短非常多，而且非常好寫 ↓

forEach

當然其實還可以更簡短寫法，前面我們有學到箭頭函式，所以可以這樣子寫：

1
2
3
4
5
6
7
var arrayData = ['a', 'b', 'c'];

arrayData.forEach((item,index,array) => {
  console.log('值' + item);
  console.log('索引' + index);
  console.log('陣列本身' + array);
})

如果程式碼只輸出一行的話，還可以更簡寫：

1
2
3
var arrayData = ['a', 'b', 'c'];

arrayData.forEach(item => console.log('值' + item))

在執行上也是完全沒有問題的 ↓

一行搞定

而這簡寫又稱之為縮寫寫法。

for…of

接下來介紹另一種陣列迴圈，這個我個人也比較少在使用，也就是 for...of，其撰寫方式也很簡單 ↓

for...of

所以我們就可以這樣子改寫前面的範例程式碼：

1
2
3
4
5
var arrayData = ['a', 'b', 'c'];

for(var item of arrayData) {
  console.log(item);
}

通常可能會有人拿 ES5 的 for...in 與 ES6 for...of 做比較，基本上以我個人來講 for...in 我都拿來處理物件的資料比較多，for...of 則是處理陣列，用這種方式去區分用途會比較簡單理解，而 for...in 最主要用途也是處理物件，所以基本上這兩者是有一定的差異。

詳細可以看看 MDN 這一篇的 for…in 介紹

最後如果你對於處理陣列其他的方法感到好奇的話，可以參考我先前寫的這一篇文章：關於 JavaScript 陣列20種操作的方法

結尾

下一篇的 RE：從零開始的學習 JS 生活-第二十七日 將會介紹 ES6 的 Template String。