iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

我的JavaScript日常系列 第 13

JavaScript Day 13. forEach()

為什麼必須知道怎麼使用陣列方法呢?舉例來說,我們拿到一筆資料長這個樣子:

let data = [5,8,9,10,20,50];

然後我們必須把這裡的資料都加起來,在沒有學到 forEach 或任何其他陣列方法的時候,可能我們會這麼做:

console.log(data[0]+data[1]+data[2]+data[無限延長的陣列資料]); 
// 假如有一千筆,有沒有寫完的一天^_^

相信已經學到這裡的我們,大概可以判斷什麼樣的程式碼長得很冗長、很詭異,馬上可以使我們警鈴大作。使用以上的方法在目前的數值中確實是可以達到相加的結果,但實際上我們會經常不確定陣列資料的內容是什麼,因此要直接對陣列資料進行操作是很困難的。

所以,我們才需要使用陣列方法,在這裡就一起來討論 forEach 吧。

forEach 能將陣列的每一筆資料都跑一次,並傳入 console.log,然後執行給定的函式。直接看範例還是比較好理解的:

let data = [30,40];
data.forEach(function(item,index,array) {
    console.log(item,index,array); 
		// 30 0  [30, 40]
		// 40 1  [30, 40]
});

上面的範例中,data 資料裡面有 30 跟 40 ,代入的參數有 item、index、array,console.log 的結果是 30 和 40 都被執行了,於是我們可以知道上面的理論,我自己的說法會是:forEach 會執行陣列的每一筆資料,並且依代入的參數給予結果。

雖然前幾篇已經介紹過很多次這幾個參數,不過在這邊為了方便閱讀也還是再寫一次:

  • item / 陣列個別資訊
  • index / 陣列的第幾筆資料、筆數
  • array / 已讀取陣列當下的狀態(陣列本身)

以上我們又可以知道,為什麼每一筆陣列資料 console.log 之後會有三個結果。另外,參數也可以自定義名稱,只要記得他的回傳模式,也可以依照自己需要的回傳結果代入需要的參數,並且不一定三個都要寫入。

陣列資料累加

接下來要討論的是陣列比較常見的作法,底下範例可以看到使用 forEach 能夠輕鬆的替我們做資料的累加:

let data = [30,40,50,100,200,1500];

// total 幫助加總使用
let total = 0;
data.forEach(function(item,index,array) {
    total += item;
    console.log(total);
		// 30
		// 70
		// 120
		// 220
		// 420
		// 1920
});

搭配 if 的 forEach

forEach 和 if 的搭配,也可以輕鬆幫我們篩選出需要的數值,以下的小範例可以篩選出陣列裡面有幾個偶數,並且把選出來的偶數新增一個偶數陣列。

let data = [30,40,50,100,200,1500,33333,111111];
let total = 0;
// 這裡新增一個空陣列,供篩選出的偶數使用
let newData = [];
data.forEach(function (item,index) {
    if(item%2 == 0) {
        total += 1;
        // 到此會選出偶數,接著新增變數,將偶數整理出一個陣列
        newData.push(item);
    };
});

console.log(total); // 6
console.log(newData); // [30, 40, 50, 100, 200, 1500]

讀取資料

forEach 也有讀取資料的能力,除了能讀取數字以外,也能讀取字串、陣列資料、陣列以及物件。

let data = [
    {
        name: "Tom",
        sex: "male"
    },
    {
        name: "Mary",
        sex: "woman"
    }
];

data.forEach(function(item,index) {
    console.log(item.name,item.sex); // Tom male, Mary woman
});

以上簡單的拿了幾個例子出來討論,我的感覺是,在練習的過程會發現上面這些都只是概念,而在實際操作裡幾乎都是以上這些例子的延伸或是混合,因此這裡我就沒有再附上其他更複雜的例子,越到後面越發現重點比較是前面的概念有沒有弄得很清楚。


上一篇
JavaScript Day 12. 每個元素都做運算的 map()
下一篇
JavaScript Day 14. 靈活運用 reduce()
系列文
我的JavaScript日常31

尚未有邦友留言

立即登入留言