---
# System prepended metadata

title: 第五堂：陣列方法與資料處理
tags: [2025 Node.js 後端工程師培訓營]

---

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

* 記得錄影

## 陣列方法
* 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
用來遍歷陣列元素的方法

* 基本用法
```javascript
[1,2,3,4,5].forEach(function(item){
    console.log(item);
});

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

* 語法參數講解
```javascript
let data = [3,30,100];

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

使用範例：

* forEach 陣列數字累加
```javascript
let data = [3,30,100];
let total=0;

data.forEach(function(item){
    total+=item;
});
```
* forEach 物件裡面的數字累加
```javascript
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
用來依照條件「篩選」陣列元素，並回傳「符合條件」的新陣列的方法

* 基本用法
```javascript
[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)