初學者指南：深入了解 JavaScript 陣列的常見方法

更新日期： 2025 年 1 月 23 日

在學習 JavaScript 的過程中，陣列（Array） 是一個關鍵的資料結構，幾乎在每個程式中都會使用。

JavaScript 提供了許多內建的陣列方法，這些方法讓我們能夠輕鬆操作陣列中的資料，進行搜尋、迭代、過濾等操作。

本文將針對幾個常見且重要的陣列方法進行介紹，包括 indexOf、includes、forEach、find、map 和 filter。這些方法可以幫助你在開發中高效處理陣列。

indexOf()：查找元素的位置

indexOf() 方法用來查找陣列中，特定元素的第一次出現的索引。

它會返回該元素的索引值，如果找不到則返回 -1。

語法

array.indexOf(searchElement, fromIndex)

• searchElement：要查找的元素。
• fromIndex（可選）：從哪個索引開始查找，預設從陣列的開頭開始。

範例

let fruits = ["apple", "banana", "cherry", "apple"];
let index = fruits.indexOf("apple");
console.log(index); // 輸出：0

let missingIndex = fruits.indexOf("orange");
console.log(missingIndex); // 輸出：-1

在這裡，indexOf("apple") 找到了 "apple" 第一次出現的位置，即索引 0。如果找不到指定元素（如 "orange"），則返回 -1。

includes()：檢查元素是否存在

includes() 方法用來檢查陣列中是否包含某個元素，並返回一個布林值（true 或 false）。

這個方法比 indexOf() 更簡單，因為只要知道元素是否存在即可，而不需要它的具體位置。

語法

array.includes(searchElement, fromIndex)

• searchElement：要查找的元素。
• fromIndex（可選）：從哪個索引開始查找，預設從陣列的開頭開始。

範例

let fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("banana")); // 輸出：true
console.log(fruits.includes("orange")); // 輸出：false

includes() 簡單明了，直接告訴你陣列中是否存在指定的元素。

forEach()：遍歷陣列中的每個元素

forEach() 方法會對陣列中的每個元素執行一次指定的函數。

這個方法通常用於遍歷陣列，進行一些操作如輸出、處理等。

語法

array.forEach(function(element, index, array) {
  // 操作每個元素的邏輯
})

• element：當前處理的元素。
• index（可選）：當前元素的索引。
• array（可選）：當前正在遍歷的陣列。

範例

let fruits = ["apple", "banana", "cherry"];
fruits.forEach(function(fruit, index) {
  console.log(`${index}: ${fruit}`);
});

輸出：

0: apple
1: banana
2: cherry

在這個範例中，forEach() 遍歷了 fruits 陣列，並依次輸出了每個元素的索引和名稱。

find()：查找符合條件的第一個元素

find() 方法用來查找符合條件的第一個元素，並返回該元素。

如果找不到符合條件的元素，則返回 undefined。

語法

array.find(function(element, index, array) {
  // 條件
})

• element：當前處理的元素。
• index（可選）：當前元素的索引。
• array（可選）：當前正在遍歷的陣列。

範例

let numbers = [10, 20, 30, 40];
let found = numbers.find(function(number) {
  return number > 25;
});
console.log(found); // 輸出：30

在這個範例中，find() 查找第一個大於 25 的數字，並返回 30。

如果陣列中沒有符合條件的元素，返回 undefined。

map()：創建新陣列

map() 方法會對陣列中的每個元素，執行指定的函數，並返回一個新的陣列。

這個新陣列包含了根據指定函數轉換後的元素。

語法

let newArray = array.map(function(element, index, array) {
  // 返回新的元素
})

範例

let numbers = [1, 2, 3, 4];
let squared = numbers.map(function(number) {
  return number * number;
});
console.log(squared); // 輸出：[1, 4, 9, 16]

在這個範例中，map() 創建了一個新的陣列，其中每個數字都被平方。

filter()：過濾符合條件的元素

filter() 方法會遍歷陣列，並返回一個符合條件的元素新陣列。

這個方法與 map() 類似，但 filter() 只會保留符合條件的元素。

語法

let filteredArray = array.filter(function(element, index, array) {
  // 返回布林值
})

範例

let numbers = [10, 20, 30, 40];
let filtered = numbers.filter(function(number) {
  return number > 20;
});
console.log(filtered); // 輸出：[30, 40]

在這裡，filter() 返回了一個新陣列，僅包含大於 20 的元素。

結語

這些常見的 JavaScript 陣列方法如 indexOf()、includes()、forEach()、find()、map() 和 filter()，是你在處理陣列資料時經常使用的工具。

每個方法都有其特定的用途，無論是查找元素、遍歷陣列、還是創建新陣列，都能有效地簡化你的程式碼。

理解並熟練使用這些方法，將會幫助你在 JavaScript 開發中更加得心應手。