|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "8abcada0534e0fb3a7556ea3c5a2a8a4",
|
|
|
"translation_date": "2025-10-22T22:35:14+00:00",
|
|
|
"source_file": "2-js-basics/4-arrays-loops/assignment.md",
|
|
|
"language_code": "mo"
|
|
|
}
|
|
|
-->
|
|
|
# 陣列與迴圈作業
|
|
|
|
|
|
## 指示
|
|
|
|
|
|
完成以下練習以練習使用陣列和迴圈。每個練習都基於課程中的概念，並鼓勵你應用不同的迴圈類型和陣列方法。
|
|
|
|
|
|
### 練習 1：數字模式生成器
|
|
|
建立一個程式，列出 1 到 20 之間的每第三個數字，並將其打印到控制台。
|
|
|
|
|
|
**要求：**
|
|
|
- 使用具有自定義增量的 `for` 迴圈
|
|
|
- 以使用者友好的格式顯示數字
|
|
|
- 添加描述性註解以解釋你的邏輯
|
|
|
|
|
|
**預期輸出：**
|
|
|
```
|
|
|
3, 6, 9, 12, 15, 18
|
|
|
```
|
|
|
|
|
|
> **提示：** 修改你的 `for` 迴圈中的迭代表達式以跳過數字。
|
|
|
|
|
|
### 練習 2：陣列分析
|
|
|
建立一個至少包含 8 個不同數字的陣列，並撰寫函數來分析數據。
|
|
|
|
|
|
**要求：**
|
|
|
- 建立一個名為 `numbers` 的陣列，包含至少 8 個值
|
|
|
- 撰寫一個函數 `findMaximum()`，返回最大值
|
|
|
- 撰寫一個函數 `findMinimum()`，返回最小值
|
|
|
- 撰寫一個函數 `calculateSum()`，返回所有數字的總和
|
|
|
- 測試每個函數並顯示結果
|
|
|
|
|
|
**額外挑戰：** 建立一個函數，找出陣列中的第二大數字。
|
|
|
|
|
|
### 練習 3：字串陣列處理
|
|
|
建立一個包含你最喜歡的電影/書籍/歌曲的陣列，並練習使用不同的迴圈類型。
|
|
|
|
|
|
**要求：**
|
|
|
- 建立一個至少包含 5 個字串值的陣列
|
|
|
- 使用傳統的 `for` 迴圈以編號的形式顯示項目（1. 項目名稱）
|
|
|
- 使用 `for...of` 迴圈以大寫形式顯示項目
|
|
|
- 使用 `forEach()` 方法計算並顯示總字元數
|
|
|
|
|
|
**範例輸出：**
|
|
|
```
|
|
|
Traditional for loop:
|
|
|
1. The Matrix
|
|
|
2. Inception
|
|
|
3. Interstellar
|
|
|
|
|
|
For...of loop (uppercase):
|
|
|
THE MATRIX
|
|
|
INCEPTION
|
|
|
INTERSTELLAR
|
|
|
|
|
|
Character count:
|
|
|
Total characters across all titles: 42
|
|
|
```
|
|
|
|
|
|
### 練習 4：數據篩選（進階）
|
|
|
建立一個程式來處理代表學生的物件陣列。
|
|
|
|
|
|
**要求：**
|
|
|
- 建立一個至少包含 5 個學生物件的陣列，每個物件包含屬性：`name`、`age`、`grade`
|
|
|
- 使用迴圈找出年齡在 18 歲或以上的學生
|
|
|
- 計算所有學生的平均成績
|
|
|
- 建立一個新陣列，僅包含成績高於 85 的學生
|
|
|
|
|
|
**範例結構：**
|
|
|
```javascript
|
|
|
const students = [
|
|
|
{ name: "Alice", age: 17, grade: 92 },
|
|
|
{ name: "Bob", age: 18, grade: 84 },
|
|
|
// Add more students...
|
|
|
];
|
|
|
```
|
|
|
|
|
|
## 測試你的程式碼
|
|
|
|
|
|
測試你的程式：
|
|
|
1. 在瀏覽器的控制台中執行每個練習
|
|
|
2. 驗證輸出是否符合預期結果
|
|
|
3. 使用不同的數據集進行測試
|
|
|
4. 檢查你的程式碼是否能處理邊界情況（例如空陣列、單一元素）
|
|
|
|
|
|
## 提交指南
|
|
|
|
|
|
提交時請包含以下內容：
|
|
|
- 每個練習的詳細註解 JavaScript 程式碼
|
|
|
- 顯示程式執行結果的截圖或文字輸出
|
|
|
- 簡要說明你為每個任務選擇的迴圈類型及原因
|
|
|
|
|
|
## 評分標準
|
|
|
|
|
|
| 評分標準 | 優秀 (3 分) | 合格 (2 分) | 需要改進 (1 分) |
|
|
|
| -------- | ----------- | ----------- | --------------- |
|
|
|
| **功能性** | 所有練習正確完成，包含額外挑戰 | 所有必須的練習正確完成 | 部分練習未完成或有錯誤 |
|
|
|
| **程式碼品質** | 乾淨、組織良好的程式碼，使用描述性變數名稱 | 程式碼可運行但可改進 | 程式碼混亂或難以理解 |
|
|
|
| **註解** | 詳盡的註解，解釋邏輯和決策 | 有基本的註解 | 幾乎沒有或沒有註解 |
|
|
|
| **迴圈使用** | 適當地展示對不同迴圈類型的理解 | 正確使用迴圈但種類有限 | 迴圈使用不正確或效率低下 |
|
|
|
| **測試** | 提供多種情境的全面測試證據 | 展示基本測試 | 幾乎沒有測試證據 |
|
|
|
|
|
|
## 反思問題
|
|
|
|
|
|
完成練習後，請思考：
|
|
|
1. 哪種類型的迴圈最自然適合使用？為什麼？
|
|
|
2. 在處理陣列時遇到了哪些挑戰？
|
|
|
3. 這些技能如何應用於實際的網頁開發專案？
|
|
|
4. 如果需要優化程式碼以提高性能，你會做哪些不同的事情？
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責聲明**：
|
|
|
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。 |
