# 陣列操作（forEach、map、 filter、find、findIndex）
###### tags:`JavaScript 必修篇 - 前端修練全攻略`
[[筆記] 六角學院：JavaScript 陣列處理方法](https://www.hexschool.com/2017/09/01/2017-09-01-javascript-for/)
# forEach 一筆一筆讀取物件資料
會一筆一筆把資料取出來，再用 function 的方式執行
- 參數一（item）：資料內容
- 參數二（index）：第幾筆
- 參數三（array）：陣列資訊
### 陣列數字累加與變數作用域
```javascript=
let data = [30, 40, 100];
let total = 0;
data.forEach(function(item,index){total += item});
console.log(total)
```
### 搭配 if，篩選出陣列裡面有幾個偶數
```javascript=
let data = [30, 40, 100, 333, 4429];
let totalEven = 0; // 計算有多少偶數
let newData = []; // 計算偶數的陣列
data.forEach(function(item,index){
console.log(item);
if( item%2 == 0){
totalEven += 1;
newData.push(item); // 將都是偶數的item放到newData陣列
}
})
console.log(newData); // [30,40,100]
console.log(totalEven); // 3
```
##### 男女人數計算機-透過物件整合資料
```javascript=
let data = [
{
name:"Tom",
sex:"male"
},
{
name:"Mary",
sex:"woman"
},
{
name:"Jane",
sex:"woman"
},
{
name:"Jenny",
sex:"woman"
},
{
name:"Joan",
sex:"woman"
}
];
// let momenNum = 0;
// let manNum = 0;
let people = {
male:0,
woman:0
}
data.forEach(function(item, index){
if(item.sex == "woman"){
people.woman+=1;
}
else{
people.male+=1;
}
});
// console.log(`女生有${people.woman}個，男生有${people.male}個`)
console.log(people);
```
線上 OPEN DATA 電動充電站網址：[JSON 網址](https://data.kcg.gov.tw/user/login?came_from=https%3A%2F%2Fdata.kcg.gov.tw%2Fdataset%2Fa98754a3-3446-4c9a-abfc-58dc49f2158c%2Fresource%2F48d4dfc4-a4b2-44a5-bdec-70f9558cd25d%2Fdownload%2Fyopendata1070622opendatajson-1070622.json)
##### 高雄 OPEN DATA-陣列物件處理
```javascript=
let data = [{"Name":"bobo","Charge":"投幣式"},{"Name":"coco","Charge":"免費"}]
let total = {
free:[],
paid:[]
}
data.forEach(function(item,index){
if(item.Charge=="免費"){
total.free.push(item);
}
else if(item.Charge=="投幣式"){
total.paid.push(item);
}
})
console.log(total) // {free:[{},{}], paid:[{}]}
```
## forEach 題型練習
如何整合 innerHTML 資料、搭配網頁初始化狀態、免費與投幣式事件監聽設計、事件監聽搭配 if 流程判斷、DOM 拉出全域變數進行管理、篩選條件增加流程、新增充電站 UI 介面邏輯新增
> 本章節 Codepen 範例程式碼網址：[範例](https://codepen.io/hexschool/pen/oNYPPPx?editors=1010)
```htmlembedded=
<h2>新增資料</h2>
<input type="text" placeholder="充電站名稱" class="stationName">
<select class="stationCharge">
<option value="免費">免費</option>
<option value="投幣式">投幣式</option>
</select>
<input type="button" class="btn" value="儲存">
<h2>資料顯示</h2>
<div class="filter">
<input type="button" value="全部">
<input type="button" value="免費">
<input type="button" value="投幣式">
</div>
<ul class="list">
</ul>
```
```javascript=
let data = [
{
Charge:"免費",
name:"小美充電站"
},
{
Charge:"投幣式",
name:"小花充電站"
},
{
Charge:"投幣式",
name:"阿天充電站"
},
{
Charge:"免費",
name:"求求充電站"
},
];
// 搭配網頁初始化狀態
// 適用在從伺服器抓到資料時 先讓各項先顯示在螢幕上
const list = document.querySelector(".list");
// 預設載入函示
function init(){
let str = "";
data.forEach(function(item,index){
let content = `<li>${item.name}，${item.Charge}</li>`;
str +=content
})
list.innerHTML = str;
}
init();
// 篩選器邏輯
const stationFilter = document.querySelector(".filter")
stationFilter.addEventListener("click",function(e){
// 事件監聽搭配 if 流程判斷
if(e.target.value == undefined){
console.log("你點擊到空的地方");
return;//強制終端程式碼
}
let str ="";
data.forEach(function(item,index){
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;
})
// 新增邏輯
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();
stationCharge.value = "免費";
stationName.value = "";
})
```
# map 陣列操作
1. 能將原始陣列運算後，重新組合回傳一個新組合回傳一個新陣列。
2. 不會影響到原陣列。
3. 一定要return值，沒有的話會顯示undefined
```javascript=
const arr = [1,5,10];
const newArr = arr.map(function(item){
return item*item;
})
console.log(newArr) // 顯示新陣列 [1,25,100]
// 但 arr一樣維持[1,5,10]
```
```javascript=
const data = [1,8,13,20];
const newData = data.map(function(item){
let obj ={};
obj.chechNum = item>10;
return obj;
})
console.log(newData); // 顯示陣列物件
```
> forEach 適合用在：
1. 想把陣列都跑一遍
2. 想塞新東西
3. 想對特定index做處理
4. forEach 不會回傳新陣列
> map 適合用在：
1. 組好新變數，回傳新陣列
# filter 資料篩選
1. 篩選出符合條件的內容，組合後回傳新陣列。
2. 不會影響到原陣列。
3. 適合用在比價、下拉選擇市區、有誰及格..
```javascript=
const data = [1,8,13,20];
const newData = data.filter(function(item){
return item>=10;
})
console.log(newData);
```
```javascript=
const scoreData = [{
name:"小明",
score: 88
}, {
name:"小英",
score: 62
}, {
name:"小花",
score: 53
}
]
const filterScore = scoreData.filter(function(item){
return item.score >= 60;
})
```
# find 尋找第一筆吻合資料
因為只有一筆，回傳的不是陣列，是物件
```javascript=
const data = [1,3,5,8,13,20];
const newData = data.find(function(item){
return item>=10;
})
console.log(newData); // 顯示第一筆：13
```
# findIndex 尋找資料索引
```javascript=
const colors = ["red","blue","black"];
const blueIndex = colors.findIndex(function(item){
return item=="blue";
})
console.log(blueIndex) // 顯示 １(index)
```
```javascript=
// 查詢訂單編號在哪一筆
const orders = [
{
name: "小廖",
orderId: "12332421"
}, {
name: "小華",
orderId: "12332490"
}, {
name: "小美",
orderId: "12332486"
}
];
const huaID = orders.findIndex(function(item){
return item.orderId == "12332490";
})
console.log(`這個訂單編號是${orders[huaID].name}的`)
// 顯示"這個訂單編號是小華的"
```
Sign in with Wallet
Connect another wallet