在 JavaScript 中搜索数组的四种不同方法

在 JavaScript 中，有不同的方法可以用来搜索数组中的一个项目。你选择哪种方法取决于你的具体使用情况。

例如，你想获得一个数组中符合特定条件的所有项目吗？你想检查是否有项目符合条件？你想检查一个特定的值是否在数组中？或者你想找到该值在数组中的索引？

对于所有这些用例，JavaScript 的 Array.prototype 方法都能满足你。在这篇文章中，我们将讨论我们可以用来搜索数组中的一个项目四种方法。这些方法是：

让我们逐一讨论一下它们。

我们可以使用 Array.filter() 方法在一个数组中找到符合某个条件的元素。例如，如果我们想得到一个数字数组中所有大于 10 的项目，可以这样做：

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.filter(element => element > 10);

console.log(greaterThanTen) //[11, 20]

使用 array.filter() 方法的语法如下：

let newArray = array.filter(callback);

在这里，

如果数组中没有项目符合条件，则返回一个空数组。你可以在这里阅读更多关于这个方法的信息。

有的时候，我们不需要所有符合某个条件的元素。我们只需要一个符合条件的元素。在这种情况下，你需要 find() 方法。

我们使用 Array.find( )方法来寻找符合某个条件的第一个元素。就像 filter 方法一样，它接受一个回调作为参数，并返回符合回调条件的第一个元素。

让我们在上面的例子中对数组使用 find 方法：

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.find(element => element > 10);

console.log(greaterThanTen)//11

array.find() 的语法是：

let element = array.find(callback);

回调是对数组中每个值执行的函数，需要三个参数：

但是请注意，如果数组中没有一个项目符合条件，它就会返回 undefined。

但是，如果你想检查某个元素是否在数组中呢？你怎么做呢？

includes() 方法确定一个数组是否包括某个值，并根据情况返回 true 或 false。

所以在上面的例子中，如果我们想检查 20 是否是数组中的一个元素，我们可以这样做：

const array = [10, 11, 3, 20, 5];

const includesTwenty = array.includes(20);

console.log(includesTwenty)//true

你会注意到这个方法和我们考虑过的其他方法之间的区别。这个方法接受一个值而不是一个回调作为参数。下面是 includes 方法的语法：

const includesValue = array.includes(valueToFind, fromIndex)

在这里，

为了了解索引的概念，让我们再次访问我们的例子。如果我们想检查数组中除第一个元素外的其他位置是否包含 10，可以这样做：

const array = [10, 11, 3, 20, 5];

const includesTenTwice = array.includes(10, 1);

console.log(includesTenTwice)//false

indexOf() 方法返回在一个数组中找到一个给定元素的第一个索引。如果该元素在数组中不存在，则返回 -1。

让我们回到我们的例子，找到数组中 3 的索引：

const array = [10, 11, 3, 20, 5];

const indexOfThree = array.indexOf(3);

console.log(indexOfThree)//2

它的语法类似于 includes 方法。

const indexOfElement = array.indexOf(element, fromIndex)

在这里，

值得注意的是，includes 和 indexOf方法都使用严格的等价法（'==='）来搜索数组。如果值的类型不同（例如 '4' 和 4），它们将分别返回 false 和 -1。

总结

有了这些数组方法，你不需要使用 for 循环来搜索一个数组。根据你的需要，你可以决定哪种方法最适合你的使用情况。

下面是对何时使用哪种方法的总结：

想在我发表新文章时得到通知吗？请点击这里。