# JavaScript - 陣列 forEach 資料處理方法
###### tags: `javascript` `array` `forEach`

## forEach 寫法介紹
* forEach(function(item, index, array){})
* 參數1 item：陣列資料
* 參數2 index：第 ○ 筆
* 參數3 array：陣列

let data = [30, 40, 50, 60, 70, 80, 90];

// forEach 依序把每一筆資料讀取出來
//參數  //陣列資料 //第○筆 //陣列
data.forEach(function (item, index, array) {
    console.log(item, index, array);
})

// forEach 依序跑完整個陣列才會執行這行
console.log("end"); 

### 陣列數字累加

let data = [30, 40, 100, 200, 300];
// 為了成功累加，宣告變數 total 要放在外層
let total = 0;

data.forEach(function (item, index) {
    total += item;
    console.log(total); // 30 70 170 370 670
})

console.log(total); // 670

### 變數作用域講解

let data = [30, 40, 100, 200, 300];

data.forEach(function (item, index) {
    // 宣告變數 total 放在內層 -> 每執行一次 forEach 都會重新歸零，因此不會累加
    let total = 0;
    total += item;
    console.log(total); // 30 40 100 200 300
})

console.log(total); //因 total 宣告在內層，於外層讀取不到值

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

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let total = 0;
let newData = []; //整理成一個新陣列資料

data.forEach(function (item, index) {
    // console.log(item);
    if (item % 2 == 0) {
        total += 1; //計算共幾筆偶數
        newData.push(item);
    }
})

console.log(total); //顯示共幾筆偶數
console.log(newData); //觀察新陣列資料

### forEach 讀取資料
#### forEach 可讀取不同型別的資料

let data1 = [11, "hello", true];

data1.forEach(function (item, index) {
    console.log(item); //11 hello true    
})

#### forEach 讀取物件型別資料

let data2 = [
    {
        name: "Tom",
        sex: "male"
    },
    {
        name: "Tina",
        sex: "female"
    }
]

data2.forEach(function (item, index) {
    console.log(item, index); //{name: "Tom",sex: "male"}

    // 物件取值的方式
    console.log(item.name); //Tom
    console.log(item.sex); //male
})

### 透過物件整合資料-男女人數計算機

let data = [
    {
        name: "Tom",
        sex: "male"
    },
    {
        name: "Tina",
        sex: "female"
    },
    {
        name: "Jay",
        sex: "male"
    },
    {
        name: "Jason",
        sex: "male"
    },
    {
        name: "Mia",
        sex: "female"
    },
    {
        name: "Jane",
        sex: "female"
    },
]

// 宣告變數
// let femaleTotal = 0;
// let maleTotal = 0;

// 改用物件資料紀錄
let peopleTotal = {
    female: 0,
    male: 0
}

data.forEach(function (item, index) {
    console.log(item.sex);
    if (item.sex == "female") {
        peopleTotal.female += 1;
    } else {
        peopleTotal.male += 1;
    }
})

console.log(peopleTotal); // {female: 3, male: 3}
console.log(peopleTotal.female); // 3
console.log(peopleTotal.male); // 3