檢查陣列是否包含 JavaScript 中的值

1. 在 JavaScript 中使用 .indexOf() 函式檢查陣列是否包含值
2. 在 JavaScript 中使用 .includes() 函式檢查陣列是否包含值
3. 在 JavaScript 中使用 .find() 函式查詢陣列中的元素
4. 在 JavaScript 中使用 .filter() 函式的陣列中搜尋元素
5. 使用簡單的 for 迴圈搜尋元素
6. 筆記

我們經常發現自己在檢查陣列是否包含 JavaScript 中的值的情況。儘管可以使用迴圈使用基本的 JavaScript 語法對搜尋功能進行編碼，但最好了解可用於 JavaScript 中陣列搜尋的內建功能、它們的用法、返回型別和行為。它使我們的任務更容易，因為我們需要更少的程式碼。通過內建功能，該功能將更加高效且不易出錯。讓我們看看在陣列中搜尋元素的方法。

在 JavaScript 中使用 .indexOf() 函式檢查陣列是否包含值

.indexOf() 函式是 JavaScript 中常用的函式。它在搜尋陣列甚至字串中的元素時效果很好。

語法

indexOf(element, index)

引數

它將要搜尋的元素作為引數。還有一個可選引數，它告訴函式，必須從哪裡開始搜尋的索引（從 0 開始）。如果我們提供一個負值，則意味著從指定位置的陣列末尾開始搜尋。

返回值

如果可以找到該元素，該函式將返回從陣列中的 0 開始的搜尋元素的索引。否則，它將返回 -1，表明它找不到該元素。如果陣列中有多個匹配項，則 .indexOf() 函式將返回第一個匹配項的索引。

瀏覽器支援

所有主要瀏覽器版本都支援 .indexOf() 函式。

用法

indexOf() 函式在陣列上的用法如下。

let fruits = ["Apple", "Mango", "Pear", "Peach"];
console.log(fruits.indexOf("Pear"));
console.log(fruits.indexOf("Tomato"))

輸出：

2
-1

對於搜尋功能，我們檢查 .indexOf(searchText) 的返回型別是否大於 -1。如果是這樣，則搜尋結果應為 true，否則為 false。讓我們看一下上面討論的相同示例，以檢查陣列中是否存在元素。

function isFruit(fruitName) {
    let fruits = ["Apple", "Mango", "Pear", "Peach"];
    if(fruits.indexOf(fruitName) > -1) {
        return true;
    } else {
        return false;
    }
}
isFruit("Pear");
isFruit("Cat");

輸出：

true
false

在 JavaScript 中使用 .includes() 函式檢查陣列是否包含值

JavaScript 的 includes() 函式檢查給定元素是否存在於陣列中。它返回一個布林值。因此，它最適合於 if 條件檢查。

語法

includes(keyword)
includes(keyword, index)

引數

該函式有兩個引數。通常，我們以 .includes(searchString) 的形式使用這個函式。searchString 引數是我們希望搜尋的元素，而 index 引數是指從其開始搜尋的陣列索引。index 引數是可選的。

返回值

如果找到 searchString 作為陣列的元素，.includes() 返回 true。如果未找到，該函式返回 false。

瀏覽器支援

.includes() 函式適用於除 Internet Explorer 之外的幾乎所有 Web 瀏覽器。因此，如果你的專案在 IE 上受支援，你可能需要使用 indexOf() 函式。

用法

讓我們看看在陣列中應用 includes()。

let fruits = ["Apple", "Mango", "Pear", "Peach"];
console.log(fruits.includes("Pear"));
console.log(fruits.includes("Tomato"))

輸出：

true
false

includes() 函式可以直接用於 if 條件，因為它返回一個布林值作為輸出。上面的例子可以用在條件 if 中，如下所示。請注意，此程式碼可能無法在 IE 中執行，因為其中不支援 .includes()。

function isFruit(fruitName) {
    let fruits = ["Apple", "Mango", "Pear", "Peach"];
    if(fruits.includes(fruitName)) {
        return true;
    } else {
        return false;
    }
}
isFruit("Pear");
isFruit("Cat");

輸出：

true
false

在 JavaScript 中使用 .find() 函式查詢陣列中的元素

另一種檢查元素是否存在於陣列中的方法是使用 .find() 函式。與 .indexOf() 和 .includes() 函式相比，.find() 將函式作為引數並在陣列的每個元素上執行它。它將返回引數函式中提到的條件滿足的第一個值。

語法

.find((keyword) => { /* Some condition checks */} )
.find((keyword, index) => { /* Some condition checks */} )

引數

Array.find() 函式將函式作為其輸入引數。通常，我們使用箭頭函式作為引數。這些箭頭函式可能包含條件檢查，如 item => item > 21。另一個可選引數是表示當前迭代索引的 index。.find() 在陣列的每個元素上執行箭頭函式。因此，它提供迭代器作為箭頭函式的引數，以幫助進行進一步的條件檢查。

返回值

.find() 與 JavaScript 的 indexOf()、includes() 函式有點不同。如果找到，則返回元素的值，否則函式返回未定義。

瀏覽器支援

與 .includes() 函式一樣，.find() 適用於除 Internet Explorer 之外的幾乎所有網路瀏覽器。因此，在計劃將此類函式用於陣列操作之前，我們應該確保我們的專案不受 IE 支援。

用法

參考以下陣列中的用法。

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));
console.log(age.find(i => i > 21))

輸出：

21
43

我們可能對 age.find(i => i > 21) 的輸出感到有點驚訝，因為它返回 43 而不是 23，後者是 age 中 21 的下一個更高的數字大批。請注意，.find() 函式按時間順序返回滿足陣列函式中提到的條件的下一個元素。要搜尋帶有 if 塊的元素，我們可以使用以下程式碼。

function findPeerAge(myAge) {
    let age = [21, 43, 23, 1, 34, 12, 8];
    if(age.find(i => (i === myAge))) {
        return true;
    } else {
        return false;
    }
}
findPeerAge(23);
findPeerAge(40);

true
false

在 JavaScript 中使用 .filter() 函式的陣列中搜尋元素

.filter() 函式主要用於陣列處理操作。尤其是當涉及到從陣列中過濾滿足條件的元素時。它返回滿足作為引數傳遞的函式中定義的條件的元素陣列。

語法

遵循與 Array.find() 相同的語法。

.filter((keyword) => { /* Some condition checks */} )
.filter((keyword, index) => { /* Some condition checks */} )

引數

Array.filter() 函式接受行內函數或箭頭函式作為引數。箭頭函式將儲存過濾條件。.filter() 函式對陣列的每個元素執行箭頭函式，並返回滿足箭頭函式中提到的條件的元素。箭頭函式將 keyword 作為輸入，當前迭代作為 index。

返回值

與我們目前看到的陣列搜尋函式不同，.filter() 返回一個包含滿足箭頭函式中提到的條件的元素的陣列。如果找到元素，則返回的陣列將包含所需的元素，否則函式將返回一個空陣列。

瀏覽器支援

.filter() 函式被所有瀏覽器支援，甚至包括 Internet Explorer。因此，你可以使用 .filter() 函式而無需擔心預期的瀏覽器支援。

用法：該函式的用法如下

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));
console.log(age.filter(i => i > 21));

輸出：

[21, 43, 23, 34]
[43, 23, 34]

正如我們從結果中看到的，filter() 函式返回一個陣列。如果我們必須在陣列中搜尋元素，我們可以使用 filter() 函式，如下面的程式碼示例所示。我們使用 filter() 函式返回的陣列的 .length 屬性來確定它是否可以找到該元素。如果該函式返回一個空陣列，則表示它找不到搜尋關鍵字。

function findAge(myAge) {
    let age = [21, 43, 23, 1, 34, 12, 8];
    if( age.filter(i => (i === myAge)).length ) {
        return true;
    } else {
        return false;
    }
}
findAge(23);
findAge(40);

輸出：

true
false

使用簡單的 for 迴圈搜尋元素

我們可以使用 javascript 的基本方法、if 條件和 for 迴圈在陣列中找到一個元素。如果找到元素，以下程式碼將返回 true，否則將返回 false。如果同一元素出現多次，則該函式僅返回第一個匹配項。

function findAge(myAge, ageAry) {
    let elementFound = false;
    for (let i = 0; i < ageAry.length; i++) {
        if (ageAry[i] === myAge) {
            return true;
        }
    }
    return elementFound;
}
let srcArray = [21, 43, 23, 1, 34, 12, 8];
findAge(23, srcArray);
findAge(40, srcArray);
findAge(8, srcArray);
findAge(23, srcArray);

輸出：

true
false
true
true

筆記

• .indexOf(), .includes() 函式查詢精確的元素匹配。我們不能用它來搜尋部分字串。這意味著提供元素的一部分，因為搜尋引數將不起作用。
• 我們可以使用 Array.filter() 和 Array.find() 函式實現部分元素搜尋，因為它們允許我們自定義搜尋條件。