# JS Chapter5_陣列與物件應用
###### tags: `JS鐵人賽`
## 陣列與物件A合格式
相同資料使用陣列整理；各筆資料的細部資訊用物件描述

兩個水果攤
第一個水果攤老闆叫Tom，香蕉有6個，蘋果有5個，還沒打烊
第二個水果攤老闆叫John，香蕉有9個，蘋果有8個，還沒打烊

let market = 
    {
        bossName : 'Tom',
        banana : 6,
        apple : 5,
        isClose : false,
    }
    ,
    {
        bossName : 'John',
        banana : 9,
        apple : 8,
        isClose : false,
    }
];

console.log(market)

## 陣列與物件混合讀取

* 矩陣讀取用 [數字]
* 物件讀取用 .物件名稱

console.log(market[0].apple);

## 物件包物件

let home = {
    dogs: 3,
    motherStatus:{
        age: 30,
        name: 'Mary'
    },
    dadStatus:{
        age: 31,
        name: 'Gary'
    },
};

console.log(home.dadStatus.age);

## JSON格式
各種資料庫設計格式不一樣，但同樣都用Json格式傳遞資料，使用檢視網頁原始碼複製JSON資料庫，有時候物件內會包**陣列**，或物件包**物件**

高雄市政府開放資料
https://data.kcg.gov.tw/dataset?res_format=JSON

如何判斷資料性質為何？
看最外圍是[] OR {}

* 物件資料

* 陣列資料


### 篩選自己想要的資料格式，並賦予至特定變數

// let 變數 = 指定資料
// 以第一張圖為例
let ary = data.entries;

## 陣列物件搭配if流程判斷

這邊使用的方法為取得第一筆資料的處理方式
若有數筆資料則會使用更快的方式，但背後的運作邏輯就是這樣

let peopleStatus = [
    {
        name: 'Tom',
        age: 18,
        status: '',
    },
    {
        name: 'Rose',
        age: 25,
        status: '',
    },
]

peopleStatus[0].degree = 39;
console.log(peopleStatus[0]);
if (peopleStatus[0].degree>=37.5){
    peopleStatus[0].status = '您不得進入';
    console.log(peopleStatus[0].status);
}else{
    peopleStatus[0].status = '歡迎進入';
    console.log(peopleStatus[0].status);
}

console.log(peopleStatus[0]);

## 陣列for each資料處理方法

### 為什麼要學陣列資料處理
>* 大量處理陣列資料
>* 判斷資料是否可用

### forEach寫法介紹
>* item：取出矩陣值
>* index：矩陣位置
>* array：所處的矩陣結構
>* function執行次數端看矩陣數量而定，如果陣列內只有一筆則跑一次，兩筆則跑兩次
>* forEach跑function會自動將矩陣值代入參數
>* 可以自訂參數名稱

變數.forEach(function(item,index,array){
    
}) 

//未使用到的參數可直接忽略不寫，例如不會用到array，則：
變數.forEach(function(item,index){
    
}) 

// 此範例function會跑三次才離開forEach

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

console.log('hello');

### 陣列數字累加與變數作用域

>正確示範

let data = [30,40,50];
let total = 0;

data.forEach(function(item){
    total += item;
})
console.log(total);

>錯誤示範
>>在function內設定的變數非全域變數，因此執行一次function後數值會歸零

let data = [30,40,50];

data.forEach(function(item){
    let total = 0;
    total += item;
})
console.log(total);

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

let data = [30,40,100,33333,555566];
let total = 0;

// 設定一個變數為空矩陣，以便後續重新篩選資料
let newData = [];

data.forEach(function(item,index){
    if(item%2 ==0){
    total+=1;
    
    // 將通過條件的值賦予至newData空矩陣
    newData.push(item);
    }
})
console.log(total);
console.log(newData);

### forEach vs for迴圈
https://wcc723.github.io/development/2020/10/05/js-for-loop-vs-for-each/

### forEach讀取資料
利用forEach讀取矩陣當中的物件資料

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

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

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

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

let people ={
    maleTotal:0,
    femaleTotal:0
};

data.forEach(function(item){
    if(item.sex == 'woman'){
        people.maleTotal+=1
    }else{
        people.femaleTotal+=1
    }
})
console.log(people);
 

### 輕軌運量資料處理