15 KiB

Raw Blame History Unescape Escape

JavaScript 基礎：陣列與迴圈

Sketchnote 作者：Tomomi Imura

課前測驗

你是否曾經好奇網站是如何追蹤購物車中的商品或顯示好友列表的？這就是陣列和迴圈的用途。陣列就像是數位容器，可以存放多個資訊，而迴圈則能讓你有效率地處理這些資料，避免重複撰寫程式碼。

這兩個概念結合起來，形成了處理程式中資訊的基礎。你將學會如何從手動逐步撰寫每個步驟，轉變為撰寫能快速處理數百甚至數千項目資料的智能高效程式碼。

在本課程結束時，你將了解如何僅用幾行程式碼完成複雜的資料處理任務。讓我們一起探索這些重要的程式設計概念吧。

🎥 點擊上方圖片觀看有關陣列和迴圈的影片。

你可以在 Microsoft Learn 上學習本課程！

陣列

可以把陣列想像成一個數位檔案櫃——與其每個抽屜只存放一份文件，不如將多個相關項目組織在一個結構化的容器中。用程式設計的術語來說，陣列可以讓你將多個資訊存放在一個有組織的包裹中。

無論你是在建立相簿、管理待辦事項清單，還是追蹤遊戲中的高分，陣列都為資料組織提供了基礎。讓我們來看看它是如何運作的。

✅ 陣列無處不在！你能想到一個現實生活中的陣列例子嗎，例如太陽能板陣列？

建立陣列

建立陣列非常簡單——只需使用方括號！

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

這裡發生了什麼？ 你剛剛使用方括號 [] 建立了一個空的容器。可以把它想像成一個空的圖書館書架——它已經準備好存放你想要組織的書籍。

你也可以直接在一開始就填入初始值：

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

值得注意的酷事：

你可以在同一個陣列中存放文字、數字，甚至是 true/false 值
只需用逗號分隔每個項目——非常簡單！
陣列非常適合用來存放相關的資訊

陣列索引

有件事可能一開始會讓你覺得不太習慣：陣列的項目編號是從 0 開始，而不是 1。這種以零為基礎的索引源於電腦記憶體的運作方式——自從像 C 語言這樣的早期程式語言開始，這就成為了一種程式設計慣例。陣列中的每個位置都有自己的地址編號，稱為索引。

索引	值	描述
0	"Chocolate"	第一個元素
1	"Strawberry"	第二個元素
2	"Vanilla"	第三個元素
3	"Pistachio"	第四個元素
4	"Rocky Road"	第五個元素

✅ 陣列從零索引開始是否讓你感到驚訝？在某些程式語言中，索引是從 1 開始的。這背後有一段有趣的歷史，你可以在維基百科上了解更多。

存取陣列元素：

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

這裡發生了什麼？

使用索引號和方括號來存取元素
返回陣列中該特定位置存放的值
從 0 開始計數，第一個元素的索引為 0

修改陣列元素：

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

在上面的例子中，我們：

修改索引 4 的元素，從 "Rocky Road" 改為 "Butter Pecan"
新增一個新元素 "Cookie Dough" 到索引 5
自動擴展 陣列長度，當新增元素超出目前範圍時

陣列長度與常用方法

陣列附帶了內建的屬性和方法，讓處理資料變得更加容易。

找出陣列長度：

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

需要記住的重點：

返回陣列中的元素總數
自動更新 當元素被新增或移除時
提供動態計數，對迴圈和驗證非常有用

重要的陣列方法：

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

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

理解這些方法：

使用 push()（尾部）和 unshift()（開頭）新增元素
使用 pop()（尾部）和 shift()（開頭）移除元素
使用 indexOf() 定位元素，並用 includes() 檢查是否存在
返回有用的值，例如移除的元素或位置索引

✅ 自己試試看！使用瀏覽器的控制台建立並操作一個你自己創建的陣列。

迴圈

想像一下查爾斯·狄更斯小說中，學生被懲罰要在石板上重複寫句子的情景。如果你能簡單地指示某人「把這句話寫100次」，並讓它自動完成，那就是迴圈在程式碼中所做的事情。

迴圈就像擁有一個不知疲倦的助手，可以無誤地重複執行任務。無論你需要檢查購物車中的每個項目，還是顯示相簿中的所有照片，迴圈都能高效地處理重複的工作。

JavaScript 提供了幾種迴圈類型供你選擇。讓我們來看看每一種迴圈，並了解它們的使用時機。

For 迴圈

for 迴圈就像設置一個計時器——你知道確切需要執行的次數。它非常有條理且可預測，這使得它非常適合處理陣列或需要計數的情況。

For 迴圈結構：

組件	用途	範例
初始化	設定起始點	`let i = 0`
條件	繼續執行的條件	`i < 10`
遞增	如何更新	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

逐步解析發生了什麼：

初始化 計數器變數 i，起始值為 0
檢查條件 i < 10，在每次迴圈執行前
執行當條件為真時的程式碼區塊
遞增每次迴圈後將 i 加 1
停止當條件變為假（當 i 到達 10 時）

✅ 在瀏覽器控制台中執行這段程式碼。當你對計數器、條件或迴圈表達式進行小改動時會發生什麼？你能讓它倒數，創建一個倒計時嗎？

While 迴圈

while 迴圈就像在說「一直做這件事直到...」——你可能不知道它會執行多少次，但你知道什麼時候停止。它非常適合像是要求使用者輸入直到他們給出你需要的答案，或是搜尋資料直到找到你要的內容。

While 迴圈特性：

持續執行 只要條件為真
需要手動管理任何計數器變數
在每次迴圈前檢查 條件
可能有風險 如果條件永遠不為假，可能導致無限迴圈

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

理解這些範例：

手動管理 迴圈內的計數器變數 i
遞增計數器以防止無限迴圈
展示實際應用情境，例如使用者輸入和嘗試次數限制
包含防止無限執行的安全機制

現代迴圈替代方案

JavaScript 提供了現代的迴圈語法，可以讓你的程式碼更易讀且更少出錯。

For...of 迴圈 (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

For...of 的主要優勢：

消除索引管理和潛在的越界錯誤
直接提供 陣列元素的存取
提升程式碼可讀性並減少語法複雜性

forEach 方法：

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

關於 forEach 你需要知道的：

執行每個陣列元素的函數
提供元素值和索引作為參數
無法提前停止（與傳統迴圈不同）
返回 undefined（不會創建新陣列）

✅ 為什麼你會選擇使用 for 迴圈而不是 while 迴圈？17K 名觀眾在 StackOverflow 上也有同樣的疑問，有些意見可能會讓你感興趣。

迴圈與陣列

將陣列與迴圈結合可以創造強大的資料處理能力。這種組合是許多程式設計任務的基礎，從顯示列表到計算統計數據。

傳統的陣列處理：

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

讓我們理解每種方法：

使用陣列的長度屬性來確定迴圈邊界
透過索引存取 傳統 for 迴圈中的元素
直接存取 for...of 迴圈中的元素
精確處理 每個陣列元素一次

實際資料處理範例：

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

這段程式碼如何運作：

初始化 用於追蹤的變數，例如總和和極值
處理每個分數，僅用一個高效的迴圈
累積總分以計算平均值
追蹤最高和最低值在迴圈中
在迴圈完成後計算 最終統計數據

✅ 在瀏覽器的控制台中嘗試迴圈遍歷你自己創建的陣列。

GitHub Copilot Agent 挑戰 🚀

使用 Agent 模式完成以下挑戰：

描述： 建立一個綜合的資料處理函數，結合陣列和迴圈來分析數據集並生成有意義的洞察。

提示： 創建一個名為 analyzeGrades 的函數，該函數接收一個包含學生分數物件的陣列（每個物件包含 name 和 score 屬性），並返回一個包含統計數據的物件，包括最高分、最低分、平均分、通過的學生數（分數 >= 70），以及一個分數高於平均分的學生姓名陣列。在解決方案中至少使用兩種不同的迴圈類型。

在這裡了解更多關於 agent mode。

🚀 挑戰

JavaScript 提供了幾種現代的陣列方法，可以用來取代特定任務中的傳統迴圈。探索 forEach、for-of、map、filter 和 reduce。

你的挑戰： 使用至少三種不同的陣列方法重構學生分數範例。注意使用現代 JavaScript 語法後，程式碼變得多麼簡潔和易讀。

課後測驗

複習與自學

JavaScript 中的陣列附帶了許多非常有用的資料操作方法。閱讀這些方法，並在你自己創建的陣列上嘗試一些方法（例如 push、pop、slice 和 splice）。

作業

迴圈陣列

免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。

15 KiB Raw Blame History Unescape Escape