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

前言

轉生第二十八日,這一篇將會介紹 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。