為什麼要學陣列資料處理？

因為當資料量大，或是不確定資料數量的資料下
就要透過一些語法來針對陣列去處理

那這個小節就是主要講解forEach的部分

forEach 寫法介紹

data.forEach(function(item,index,array){
})
item = 那一筆取的值
index = 第幾筆資料(從0算起)
array = 整筆陣列的樣子

let data = [30,40];

data.forEach(function(item,index,array){
    console.log(item,index,array); //會取出值 第幾筆 整串陣列的資訊
})

//會回傳 30 0 [30,40]
    //  40 1 [30,40]

陣列數字累加與變數作用域講解

let data = [30,40,100];

let total = 0;

data.forEach(function(item,index){ //會從第一筆陣列執行到最後一筆
    total+=item;
})

console.log(total);

這樣就可以透過迴圈跑完陣列所有資料對資料進行加總

搭配 if，篩選出陣列裡面有幾個偶數

let data = [30,40,100,3333,55594]

let total = 0; //宣告一個計數偶數的變化
let newData=[];

data.forEach(function(item,index){
    console.log(item);
    if(item%2 == 0){ //如果可以被2除盡
        total+=1;
        newData.push(item); //將陣列裡的偶數存進newData陣列裡
    }
})

console.log(newData);
console.log(total); 顯示總共幾筆偶數

forEach讀取資料

forEach讀取的資料不會限制數字或是字串、布林值 都可以讀取

let data = [30,"hello",true];

data.forEach(function(item,index){
    console.log(item);
})

也可以是物件

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

data.forEach(function(item,index){ //item會獲得的是物件資料
    console.log(item);
    console.log(item.name,item.sex);//也可以讀取到物件內的資訊
})

範例練習-男女人數計算機-透過物件整合資料

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

let maleTotal = 0; //一般變數方式
let womanTotal = 0;

let peplo = { //透過物件方式存取
    male:0,
    woman:0
}

data.forEach(function(item,index){ //item會獲得的是物件資料
    if(item.sex == "woman"){
        console.log("是女生");
        womanTotal+=1; //一般變數方式
        peplo.woman+=1; //透過物件方式存取
    }else{
        console.log("是男生");
        maleTotal+=1;
        peplo.male+=1;
    }
})

如何整合 innerHTML 資料

那接下來要講的是forEach要搭配DOM去做整合
可以透過forEach將資料寫進網頁裡

HTML

<ul class="list">       

    </ul>

all.JS

//首先先宣告變數以陣列物件的方式儲存內容
let data = [
    {
        Charge: "免費",
        name: "小白充電站"
    }, {
        Charge: "投幣式",
        name: "小花充電站"
    }, {
        Charge: "投幣式",
        name: "小明充電站"
    }, {
        Charge: "投幣式",
        name: "小天充電站"
    }

];
//接下來以function的方式寫內容
function init() {
    const list = document.querySelector(".list"); //先用變數接下選擇器找到的class="list"的位置
    let str = ""; //宣告一個變數放字串
    data.forEach(function (item, index) {
        let content = `<li>${item.name}，${item.Charge}</li>`; //宣告一個變數放撈出的資料
        str += content; //將剛剛撈出來的資料加總再str的變數裡
        console.log(str); 
    })

    list.innerHTML = str; //印出str (有剛剛加總完的全部資料)
}

init(); //執行function init

DOM 拉出全域變數進行管理

如果在function內有重複使用到的const變數
可以將他拉出函式放在外面 就可以在每個函數裡面進行應用
不需要每個都在寫一次

充電站應用範例

有使用到input可以進行資料新增
然後顯示的部分有篩選

codepen範例連結