###### tags: `Javascript`

# 1. Javascript forEach資料處理方法

## forEach 寫法
* 參數可以只擺前面兩個

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

## forEach融入物件與陣列 將男女資料insert到物件裡的陣列

let people ={
    male:[],
    woman:[]
}
data.forEach(function(item,index){
    if(item.sex == 'woman'){
        people.male.push(item);
    }
    else{
        people.woman.push(item);
})

# 2. forEach結合Dom實際運用

## forEach結合innerHTML

<div>
    <h2>
        新增資料
    </h2>
    <input  type="text" placeholder="充電站名稱"             class="stationName">
    <select name="" id="" class="stationCharge">
        <option value="免費"></option>
        <option value="投幣式"></option>
    </select>
    <input  type="button" class="btn" value = '儲存'>
    <h2>
        資料顯示
    </h2>
    <input  type="button" value = '全部'>
    <input  type="button" value = '免費'>
    <input  type="button"  value = '投幣式'>
</div>

<ul class = "list">
    <li>xx充電站，免費</li>
</ul>

>初始化 確保程式先執行

let date = [
    {
        Charge:"免費",
        name:"小明充電站"
    },{
        Charge:"投幣式",
        name:"小紅充電站"
    }
    
];
//0. 下方兩個函式都有用到此句，所以移到全域變數共同使用
const list = document.querySelector(".list");

//1. 預先載入 列出所有充電站
function init(){
    let str = "";
    data.forEach(function(item,index){
    let content = '<li>${item.name}，${item.charge}</li>';
    str+=content;
    console.log(str);
    })
list.innerHTML = str  
}

init();

//2. 判斷使否有確實點擊到button，如果有點擊到確實依照Charge做出顯示
const stationFilter = document.querySelector(".filter");
stationFilter.addEventListener("click",function(e){
    if(e.target.value == undefined){
        console.log("你沒點擊到")
        return ;
    }
    else{
       let str = "";
       data.forEach(function(item,index){
           //你所點擊到button的value
           if(e.target.value == '全部'){
               str += '<li>${item.name}，${item.charge}</li>'}
           else if(e.target.value == item.Charge){
               str += '<li>${item.name}，${item.charge}</li>'
           }
           })
       
      list.innerHTML = str;
      }
    })
//3. 新增邏輯
const stationName = document.querySelector(".stationName");
const stationCharge = document.querySelector(".stationCharge");
const btn = document.querySelector(".btn");
btn.addEventListener("click",function(e){
    let obj={}
    obj.Charge = stationCharge.value;
    obj.name = stationName.value;
    data.push(obj);
    init();
    
    
})