[JavaScript] 如何找到特定條件的陣列索引：findIndex, 迴圈, map, filter, reduce

使用 findIndex 方法

findIndex 方法會返回滿足所提供測試函式的第一個元素的索引。

const numbers = [10, 20, 30, 40];
const index = numbers.findIndex(number => number > 25);
console.log(index); // 輸出：2

在這裡，findIndex 返回大於 25 的第一個數字的索引，即 2。

利用迴圈

迴圈是根據條件查找索引的另一種方式。以下是如何使用 for 迴圈完成此任務的方法。

const numbers = [10, 20, 30, 40];
let index;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 25) {
    index = i;
    break;
  }
}

console.log(index); // 輸出：2

此迴圈遍歷陣列，直到找到大於 25 的數字，然後中斷並返回索引 2。

使用 map 方法

map 方法不直接擷取索引，但可以與其他方法結合使用以實現該目的。

const numbers = [10, 20, 30, 40];
const indexes = numbers.map((number, index) => (number > 25 ? index : -1)).filter(index => index !== -1);
console.log(indexes); // 輸出：[2, 3]

在這裡，map 返回一個索引陣列，其中數字大於 25，然後 filter 移除任何不需要的值。

發揮 filter 和 reduce 方法

filter 和 reduce 方法也可以用於找到特定的索引。

const numbers = [10, 20, 30, 40];
const indexes = numbers.reduce((acc, number, index) => {
  if (number > 25) {
    acc.push(index);
  }
  return acc;
}, []);

console.log(indexes); // 輸出：[2, 3]

此程式碼片段使用 reduce 累積大於 25 的數字的索引，最終得到 [2, 3]。

使用 forEach 方法

forEach 方法對每個陣列元素執行一次提供的函式。這也可以用於找到滿足特定條件的元素的索引。

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

numbers.forEach((number, index) => {
  if (number > 25) {
    indexes.push(index);
  }
});

console.log(indexes); // 輸出：[2, 3]

在這裡，forEach 方法遍歷陣列，並將大於 25 的每個數字的索引推入 indexes 陣列，最終得到 [2, 3]。

在陣列中找到特定的索引是許多 JavaScript 操作中的重要任務。有多種方法可供使用，包括 findIndex、迴圈、map、filter、reduce 和 forEach。了解何時以及如何使用這些方法可以讓您撰寫更高效、更易讀、更具彈性的程式碼。根據您的具體需求和應用程式的情境，您可以選擇最適合您需求的方法。

常見問題

1. forEach 方法在舊瀏覽器上相容嗎？ 是的，forEach 在大多數現代和舊版瀏覽器中都有廣泛支援，包括 IE9+。
2. 相較於簡單的迴圈，使用 findIndex 的優勢是什麼？ findIndex 提供了一種更簡潔和聲明式的方式來找到索引，而迴圈則提供了更多的控制和彈性。
3. 這些方法是否適用於包含字串或其他非數字數據的陣列？ 是的，這些方法適用於包含任何類型的值的陣列，不僅僅是數字。
4. 我如何在這些方法內測試多個條件？ 您可以在提供的函式內部包含任意數量的條件，使用邏輯運算符，如 &&、|| 等。
5. 在選擇這些方法之間，是否有任何性能考慮因素？ 雖然這些方法通常提供類似的性能，但在某些情況下，使用簡單的迴圈可能稍微更有效，尤其是對於非常大的陣列。選擇方法時，通常建議在性能方面考慮可讀性和可維護性。