Hugo Habor

Tag: forEach

JSON與foreach的逐一條列應用。
像是很多專案必須讀取國家資料中心的metadata，許多檔案格式為CSV、JSON、Html可以利用網頁技術去爬蟲；拿一個範例來嘗試看看就知道這些語法的實際用途。

[主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) – Cool3c

在這裡我們使用台北市資料大平台 UBike2.0 作為資料依據!

目的

來抓取空位數量 >15，抓取空位數量 <15。

JSON 檔案範例:

臺北市資料大平臺 (data.taipei)

HTML
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="\JavaScript\JSForEACH\ForEach_OpenDataJSON.js"> </script>

    <title>For Each Document</title>
</head>
<body>
    
</body>
</html>
```
JavaScript

我們利用foreach() 來去找裡面UBike的空位資料，這樣能夠確保在這數組資料裡面，能每一組數組都查詢到。
```
let UbikeData =[
"JSON 資料"
]


let totalnum ={
    fifteenUp:0,
    fifteenDown:0

}
// 抓取空位數量 >15， 抓取空位數量 <15。
////////////////////////////////

UbikeData.forEach(function(item,index){

    if(item.bemp  >15){
        // 大於15
    totalnum.fifteenUp  +=1;
        // 小於15
    }else if (item.bemp <15)
    totalnum.fifteenDown  +=1;
}
)

console.log(totalnum);
```
執行結果
January 11, 2024
JavaScript-forEach()方法
當你想要呼叫陣列裡的資料，你可以使用forEach()的方法，forEach() 會需要隱含數的觀念。

把我們想要執行的函式，從頭到尾逐一（iterates through）的把陣列裡的元素帶進去這個函式，整個處理一遍。

第一個參數遍歷的元素(按照元素順序顯示)，第二個參數是 index，即使你改了參數名字，第一個也一定是遍歷的元素，第二個一定是 index。

Iterating Array in JavaScript using forEach() Method :-#javascript #100DaysOfCode pic.twitter.com/Afe18LXkHy
— Tejinder Sharma (@tejinder_id) January 29, 2022

參考資料:

想知道嗎：JS forEach()的 index 位置 – W.S.Wade – Medium

Array 原型的 forEach 有多好用？學會高階函數之後都不想寫 JavaScript 以外的程式語言了 | by realdennis | Medium

範例Code01

在Funciton(,,) 裡面，我們定義第一個引數、第二個以及第三個他們所代表的型態。

JavaScript
```
let data=[30,40,70]

// function (元素,順序,陣列資料)
data.forEach(function(element,index,array){
console.log(element,index,array);
})
```
範例Code02

在Funciton(,,) 裡面，我們更改了他們的名稱，你會發現…

都是按照這個順序去顯示結果 function (元素,順序,陣列資料)。

JavaScript
```
let data=[30,40,70]

// function (元素,順序,陣列資料)
data.forEach(function(element,index,array){
console.log(element,index,array);
})

// 不管改成甚麼都是function(,,) 順序
data.forEach(function(item,order,combination){
    console.log(item,order,combination);
})
```
範例Code03

利用Funciton(e) 的基本事件條列特性，來混淆看看大家的認知，看它會如何顯示!

JavaScript
```
let data=[30,40,70]

//乎亂寫一通
data.forEach(function(e,index,combination){
    console.log(e,index,combination);
})
```
以上範例顯示結果

表示forEach(,,) 內部參數可以自定義名稱。

判斷是否為偶數_範例

判斷data 陣列裡面的數字，是否為偶數，然後算是總共有幾個偶數以及將偶數排列出來。

JavaScript
```
let data=[30,40,100,333223,554363]
let total =0;
let newdata =[]; // 空陣列

data.forEach(function(item,order){
    
    console.log(item);
    if(item%2==0){

          total+=1;
          newdata.push(item);
                 }
    }
);

console.log(newdata);
console.log(total);
```
顯示結果

留一個問題給大家去思考

若我們將Global 的 let total =0、let data =[8,7,6] 拿出來探討作用域。

試著想想看…

data.forEach({}) 內的 console.log(total) 與外部的 console.log(total) 的結果會是甚麼?

JavaScript
```
let data=[8,7,6];
let total=0;

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

});

 console.log(total);
```
December 26, 2023