迹忆客 专注技术分享

我们经常发现自己在检查数组是否包含 JavaScript 中的值的情况。尽管可以使用循环使用基本的 JavaScript 语法对搜索功能进行编码，但最好了解可用于 JavaScript 中数组搜索的内置功能、它们的用法、返回类型和行为。它使我们的任务更容易，因为我们需要更少的代码。通过内置功能，该功能将更加高效且不易出错。让我们看看在数组中搜索元素的方法。

.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() 函数检查给定元素是否存在于数组中。它返回一个布尔值。因此，它最适合于 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

另一种检查元素是否存在于数组中的方法是使用 .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

.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

我们可以使用 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