# 第五堂：陣列方法與資料處理

* 記得錄影

## 陣列方法
* typeof：查詢型別
* include：判斷元素是否存在

const fruits = ["apple", "banana", "cherry"];

// 檢查是否包含某個水果
if (fruits.includes("banana")) {
    console.log("清單裡有香蕉！");
} else {
    console.log("清單裡沒有香蕉！");
}

const purchasedMemberNames = ["Alice", "Bob", "Charlie", "Hannah"];

// 檢查某會員是否已購買課程
function hasPurchased(name) {
    if (purchasedMemberNames.includes(name)) {
        console.log(`${name} 已購買課程。`);
    } else {
        console.log(`${name} 尚未購買課程。`);
    }
}

// 測試用例
hasPurchased("Alice");  // Alice 已購買課程。
hasPurchased("Diana");  // Diana 尚未購買課程。

## forEach
用來遍歷陣列元素的方法

* 基本用法

[1,2,3,4,5].forEach(function(item){
    console.log(item);
});

// 1
// 2
// 3
// 4
// 5

* 語法參數講解

let data = [3,30,100];

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

使用範例：

* forEach 陣列數字累加

let data = [3,30,100];
let total=0;

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

* forEach 物件裡面的數字累加

let data = [
  {
    num: 10
  },
  {
    num: 30
  },
  {
    num: 100
  }
];
let total = 0;

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

* forEach + if
* [男生共有幾位？](https://codepen.io/hexschool/pen/yLVGWpx?editors=1010)
* [國中人數共有幾位？](https://codepen.io/hexschool/pen/vYbXbMB?editors=0010)、[資料集](https://data.tainan.gov.tw/dataset/junior-number/resource/4f56ba22-0b13-4570-8be6-2d66483ffa5f)
* [高雄里長黨派各有幾位？](https://codepen.io/hexschool/pen/BaMLMez?editors=0010)、[資料集](https://cabu4.kcg.gov.tw/KcgRegion/OpenData/%E9%87%8C%E9%95%B7%E9%80%9A%E8%A8%8A%E9%8C%84.JSON)

## filter
用來依照條件「篩選」陣列元素，並回傳「符合條件」的新陣列的方法

* 基本用法

[1,2,3,4,5].filter(function(item){
    return item > 3;
});

// 回傳新陣列: [4,5]

### filter 取出物件裡面 num 大於 30 的項目

let data = [
  {
    num: 10
  },
  {
    num: 30
  },
  {
    num: 100
  }
];
let filteredData = data.filter(function(item){
  return item.num > 30;
});
// 會得到 [{ num: 100 }]

* filter 只會回傳符合「return 條件」的那些元素組成的新陣列，原陣列不會被修改。
* 回傳 true 表示保留該元素，false 表示過濾掉該元素。
* 與 forEach 不同的地方在於，filter 在遍歷陣列的同時，能夠有選擇地「回傳」符合條件的元素。

| 比較項目 | forEach | filter |
|:-----------:|:----------------------------------------------------------|:---------------------------------------------------------------------------------------------|
| **目的** | 主要用於「遍歷」(iteration)陣列中的每個元素 | 主要用於「篩選」符合特定條件的元素，並回傳篩選後的新陣列 |
| **回傳值** | 沒有回傳值 (`undefined`)，不會自動產生新陣列 | 會回傳一個新陣列，裡面包含所有符合回傳條件 (`return true`) 的元素 |
| **原陣列是否改變** | 不會改變原陣列 | 不會改變原陣列 |
| **常見用法** | - 陣列元素遍歷<br>- 執行累加或副作用（例如：計算總和、印出） | - 根據條件過濾<br>- 取得符合條件的子集合 |

## 第三週主線任務：樂呵呵健身房
* [任務列表](https://rpg.hexschool.com/#/training/12062543649527256883/board/content/12062543649527256884_12062543649527256902)

## 下週二建議預習章節

* [V8、Node.js介紹](https://courses.hexschool.com/courses/2025-node-js/lectures/58664132)
* [Node 模組原理](https://courses.hexschool.com/courses/2025-node-js/lectures/58664139)
* [NPM](https://courses.hexschool.com/courses/2025-node-js/lectures/58664150)