JavaScript 陣列查找的常見方法介紹：新手指南

更新日期： 2025 年 1 月 23 日

在 JavaScript 中，陣列是一種非常常用的資料結構。

當我們想要在陣列中查找某個元素時，有多種方法可以幫助我們快速找到目標元素。

在這篇文章中，我們將介紹幾個常見的 JavaScript 陣列查找方法：find、includes、indexOf 和 findIndex，並說明它們的回傳值以及如何使用。

find() 方法

什麼是 find()？

find() 是用來查找陣列中「第一個」符合條件的元素。

你需要提供一個回調函數，這個回調函數會遍歷陣列中的每一個元素，直到找到符合條件的那一個。

找到後，它會返回這個元素。如果沒有找到符合條件的元素，它會返回 undefined。

使用範例：

const numbers = [10, 20, 30, 40, 50];

// 查找第一個大於 25 的數字
const result = numbers.find(num => num > 25);

console.log(result);  // 30

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

回傳值：

• 找到符合條件的元素時，返回該元素。
• 找不到符合條件的元素時，返回 undefined。

includes() 方法

什麼是 includes()？

includes() 是用來檢查陣列中是否包含某個特定的值。

它會返回一個布林值（true 或 false），表示該值是否存在於陣列中。

使用範例：

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

// 檢查陣列中是否包含 'banana'
const result = fruits.includes('banana');

console.log(result);  // true

在這個例子中，includes() 檢查到了陣列中包含 banana，所以返回 true。

回傳值：

• 如果陣列中包含指定的值，返回 true。
• 如果陣列中不包含指定的值，返回 false。

indexOf() 方法

什麼是 indexOf()？

indexOf() 用來查找陣列中某個值的「第一次出現位置」的索引。如果找到這個值，它會返回該值在陣列中的索引。如果沒有找到，它會返回 -1。

使用範例：

const colors = ['red', 'blue', 'green', 'blue'];

// 查找 'blue' 的索引
const result = colors.indexOf('blue');

console.log(result);  // 1

在這個例子中，indexOf() 找到 blue 第一次出現的索引位置是 1。

回傳值：

• 如果找到目標值，返回該值在陣列中的索引。
• 如果找不到目標值，返回 -1。

findIndex() 方法

什麼是 findIndex()？

findIndex() 和 find() 類似，但不同的是，它返回的是符合條件的元素的索引，而不是元素本身。

它會返回「第一個」符合條件的元素的索引。如果找不到符合條件的元素，它會返回 -1。

使用範例：

const numbers = [10, 20, 30, 40, 50];

// 查找第一個大於 25 的元素的索引
const result = numbers.findIndex(num => num > 25);

console.log(result);  // 2

在這個例子中，findIndex() 找到第一個大於 25 的元素是 30，它的索引是 2。

回傳值：

• 找到符合條件的元素時，返回該元素的索引。
• 找不到符合條件的元素時，返回 -1。

比較這些方法的用途

這四個方法在不同的情境下都很有用，讓我們來簡單比較它們的特性：

• find()：用於查找「第一個」符合條件的元素，並返回該元素。如果你需要找到具體的元素值並對它做進一步操作，這個方法最合適。
• includes()：用於檢查陣列中是否存在某個具體值，返回 true 或 false。如果你只需要知道某個值是否存在而不在乎它的位置，使用這個方法。
• indexOf()：用於查找某個具體值的索引。如果需要知道某個值在陣列中的具體位置，這個方法最適合。
• findIndex()：用於查找符合條件的元素的索引。如果你需要根據條件查找某個元素的索引位置，而不僅僅是元素本身，這個方法很有用。

常見的 findIndex() 和 indexOf() 使用錯誤

在使用 findIndex() 和 indexOf() 這兩個方法時，初學者常常會遇到一個潛在的陷阱，特別是在判斷回傳值的時候。

因為這兩個方法的回傳值可能是 0 或 -1，如果不小心混淆了它們的含義，會導致邏輯錯誤。

回傳值 0 和 -1 的含義

• 0：代表目標值在陣列的第一個位置，即它的索引為 0。
• -1：表示在陣列中找不到目標值。

常見的錯誤判斷

有時開發者會直接在 if 條件中使用 findIndex() 或 indexOf() 的結果，這可能會導致問題。

因為當目標值的索引是 0 時，0 在布林邏輯中會被視為 false，這樣可能會錯誤地判斷找不到值。

錯誤範例：

const numbers = [10, 20, 30, 40, 50];

// 想檢查數字 10 是否在陣列中
if (numbers.indexOf(10)) {
  console.log('找到了 10');
} else {
  console.log('沒找到 10');
}

這裡的 numbers.indexOf(10) 會返回 0，因為 10 是在陣列的第一個位置。

然而，if (0) 的結果是 false，因此會錯誤地執行「沒找到 10」。

解決方法：應該改用 includes() 來處理判斷值

為了避免這個陷阱，當你需要檢查某個值是否存在於陣列中時，應該使用 includes() 方法。

includes() 專門用來檢查陣列中是否包含某個值，並且會返回 true 或 false，這樣就不會出現判斷錯誤。

正確的做法：

const numbers = [10, 20, 30, 40, 50];

// 使用 includes 檢查數字 10 是否在陣列中
if (numbers.includes(10)) {
  console.log('找到了 10');
} else {
  console.log('沒找到 10');
}

使用 includes() 可以直接返回布林值 true 或 false，避免了 0 被當作 false 的情況，使程式更加簡潔、易讀。

findIndex() 也有相似問題

類似地，當你使用 findIndex() 時，也會有相同的潛在問題。

如果你只是想知道是否有符合條件的元素存在，應該考慮改用 some() 方法，這會返回一個布林值，表示是否存在符合條件的元素。

錯誤範例：

const numbers = [10, 20, 30, 40, 50];

// 想檢查是否有數字大於 10
if (numbers.findIndex(num => num > 10)) {
  console.log('找到了大於 10 的數字');
} else {
  console.log('沒找到大於 10 的數字');
}

如果找到的元素是位於索引 0 的話，會錯誤地判斷為 false。

正確的做法：

const numbers = [10, 20, 30, 40, 50];

// 使用 some 檢查是否有數字大於 10
if (numbers.some(num => num > 10)) {
  console.log('找到了大於 10 的數字');
} else {
  console.log('沒找到大於 10 的數字');
}

some() 方法會返回 true 或 false，確保你能正確檢查是否有符合條件的元素存在，避免使用 findIndex() 產生的判斷錯誤。

結論

在 JavaScript 中，查找陣列中的元素是一個常見的操作，find()、includes()、indexOf() 和 findIndex() 都是很實用的方法。

這些方法各有不同的用途，了解它們的工作原理和回傳值，將能幫助你更有效率地處理陣列數據。

希望這篇文章能幫助你，熟悉這些常見的查找方法，並在日常開發中靈活運用它們！