在 JavaScript 中搜索数组

如果您已经了解 javascript 数组的基础知识，那么是时候通过更高级的主题将您的技能提升到一个新的水平。在本系列教程中，您将探索在 JavaScript 中使用数组进行编程的中级主题。

javaScript 数组具有强大的方法工具集，可帮助开发人员对数据进行排序、过滤和操作。然而，通常情况下，您需要在数组中查找数据，虽然您当然可以通过循环和迭代来完成该任务，但 JavaScript 提供了许多方法来在数组中查找特定数据。

indexOf()在本教程中，您将学习如何使用、lastIndexOf()、find()、findLast()、includes()、some()和方法在 JavaScript 数组中搜索和查找数据every()。

查找元素的索引

开发人员需要查找的最常见的事情之一是特定元素的索引。通过元素的索引，您可以直接访问、更新或删除元素。查找元素索引的能力是一项基本功能，JavaScript 提供了多种方法来搜索数组并返回所需元素的索引。

方法indexOf()_last 和 IndexOf()

第一种方法最简单：indexOf()和lastIndexOf()。这些方法在数组中搜索特定值或对象，并返回该值或对象第一次出现的索引。如果在数组中找不到该元素，这些方法将返回-1。这两种方法最适用于包含简单值（例如字符串和数字）的数组。

使用indexOf()

语法indexOf()如下：

array.indexOf(searchElement[, fromIndex]);

在这里， thesearchElement是您要搜索的元素，并且fromIndex是一个可选参数，用于指定开始搜索的索引。如果您不提供fromIndex，则搜索从 index 开始0。例如，考虑以下代码：

1    const fruit = ['orange', 'apple', 'grape', 'apple'];     
3    fruit.indexOf('apple'); // output: 1     
4    fruit.indexOf('mango'); // output: -1     
5    fruit.indexOf('apple', 2)); // output: 3     
6    fruit.indexOf('orange', 1); // output: -1

此代码定义了一个名为 的数组fruit，它包含四个字符串值，分别命名三种不同类型的水果（注意在索引和apple处列出了两次）。13

首先，我们搜索字符串apple。因为fromIndex没有指定参数，所以搜索从数组的开头索引处开始0，并返回 的值1。

接下来，我们搜索值mango。这将返回，-1因为未找到该字符串。

第三次调用再次indexOf()搜索apple，但这次搜索从索引开始2。因此，结果是3因为下一次出现apple在 index 处3。

第四次调用indexOf()searches for orange，但搜索从 index 开始1。结果是-1因为orange没有发生在 index 处或之后1。

使用lastIndexOf()

该lastIndexOf()方法与 类似indexOf()，但它从数组末尾开始搜索。它也有类似的语法，如下所示：

array.lastIndexOf(searchElement[,fromIndex]);

考虑以下：

1    fruit.lastIndexOf('apple'); // output: 3    
2    fruit.lastIndexOf('mango'); // output: -1    
3    fruit.lastIndexOf('apple', 2)); // output: 1

在此代码中，第一行搜索apple. 由于搜索从数组末尾开始，因此结果为3. 第三行代码apple再次搜索。然而，这一次，它从索引处开始搜索，结果是因为反向搜索2的值。1lastIndexOf()

和方法非常有用，但如前所述，它们最适合简单的值indexOf()。lastIndexOf()这是因为他们搜索作为 传递的确切值searchElement。如果你想搜索一个对象，或者如果你需要找到一个符合特定条件的值，findIndex()和findLastIndex()方法通常是更好的选择。

findIndex() 和 findLastIndex() 方法

findIndex() 和 findLastIndex() 方法在概念上类似于 indexOf() 和 lastIndexOf() 方法，因为它们分别从数组的开头和结尾搜索数组。 但是，您没有传递精确的值来搜索，而是传递了一个测试数组中元素的函数。 让我们从 findIndex() 开始。

使用findIndex()

该findIndex()方法查找满足测试函数的数组中第一个元素的索引。它遍历数组的每个元素并调用每个元素提供的测试函数。这是该方法的语法：

array.findIndex(testingFunction);

测试函数接受以下三个参数： 

1. element:当前正在测试的元素（必填）

2. index:当前正在测试的元素的索引（可选）

3. array:find调用方法的数组（可选）

该findIndex()方法返回测试函数返回的第一个元素的索引true，或者-1如果没有找到这样的元素。一旦测试函数返回，它就停止遍历数组true。

以下示例演示了该findIndex()方法：

1    const numbers = [10, 20, 30, 40];    
2    
3    function isNumberGreaterThan25(number) {    
4      return number > 25;    
5    }    
6    
7    numbers.findIndex(isNumberGreaterThan25); // output: 2

此示例创建一个数字数组：[10, 20, 30, 40]。它还定义了isNumberGreaterThan25()函数，该函数接受一个参数并在数字大于 时number返回。然后它使用该方法查找函数返回的数组中第一个元素的索引。该方法将数组的每个元素传递给并返回满足条件的第一个元素的索引——在本例中就是这样。true25findIndex()isNumberGreaterThan25()truefindIndex()isNumberGreaterThan25()2

使用findLastIndex()

如您所料，该findLastIndex()方法与findIndex(). 如下所示，它的语法几乎与findIndex(). 当然，唯一的区别是方法的名称：

array.findLastIndex(testingFunction);

该findLastIndex()方法从数组中的最后一个元素开始向后搜索数组。例如：

1    const numbers = [10, 20, 30, 40];    
2    
3    function isNumberGreaterThan25(number) {    
4      return number > 25;    
5    }    
6    
7    numbers.findLastIndex(isNumberGreaterThan25); // output: 3

此代码定义了相同的numbers数组和isNumberGreaterThan25()函数，但它随后调用以查找函数返回findLastIndex()的数组中最后一个元素的索引。在这种情况下，结果是因为第一个测试的元素是，在索引 3 处，它满足条件。isNumberGreaterThan25()true340

查找元素

虽然查找元素的索引很有用，但有时您需要查找元素本身。值得庆幸的是，JavaScript 数组提供了以下两种方法：

find()：返回满足提供的测试函数的第一个元素。

findLast()：逆序查找数组，返回满足测试函数的元素。 

他们的语法：

1    array.find(testingFunction);    
2    array.findLast(testingFunction);

findIndex()这些方法分别与和方法几乎相同findLastIndex()。唯一的区别是它们返回满足测试功能的实际值或对象，而不是该元素的索引。例如，考虑以下代码：

1    const items = [    
2      { id: 1, name: 'book', price: 40, },    
3      { id: 2, name: 'laptop', price: 1000 },    
4      { id: 3, name: 'phone', price: 600 }    
5    ];    
6    
7    const book = items.find(function(item) {    
8       return item.id === 1;     
9    }); // book object     
10    
11    const lessThan10 = items.findLast(function(item) {    
12        return item.price < 10;    
13    }); // undefined

此代码定义了一个数组items，其中每个项目都是一个具有id、name和price属性的对象。我们使用find()andfindLast()方法来搜索满足特定条件的对象，并将结果存储在变量中。

在第一个示例中，我们使用方法查找具有等于 的find()对象。如果当前对象的属性等于，则测试函数返回，这将停止迭代并返回当前对象。在本例中，数组中的第一个对象的属性为，因此该方法返回“book”对象。id1trueid1id1find()

第二个示例使用findLast()方法查找数组中最后items一个price小于10. 在这种情况下，数组中的所有对象都不满足条件，因此该findLast()方法返回undefined。 

测试元素是否存在

最后一组方法不返回索引或元素。相反，它们返回一个布尔值，指示元素是否存在于数组中。

方法includes()_

第一种也是最简单的方法是includes()。它只接受您要搜索的值，如下所示：

array.includes(searchElement);

如果数组包含;则该includes()方法返回 否则，它返回。以下代码演示了这一点：truesearchElementfalse

1    const fruit = ['apple', 'banana', 'cherry'];    
2    
3    fruit.includes('banana'); // true     
4    fruit.includes('orange'); // false

此代码创建一个水果数组，我们使用该includes()方法检查该数组是否包含特定元素。在第一个示例中，我们检查数组是否包含字符串banana——结果为true。在第二个示例中，我们检查数组是否包含字符串orange。它不存在于数组中；因此，它返回false。

与indexOf()和一样lastIndexOf()，该includes()方法非常适合简单值。如果您需要处理更复杂的对象，或者您需要通过测试功能定义搜索条件，请考虑使用该some()方法。

方法some()_

我们使用该some()方法检查数组中是否至少有一个元素满足提供的测试函数。它遍历数组的每个元素并调用每个元素的测试函数。true如果测试函数对至少一个元素返回真，则返回，否则返回false。

它的语法类似于find()和其他查找方法，如下所示：

array.some(testingFunction);

此外，测试函数使用相同的参数，并且应该返回与查找方法相同的值。例如：

1    const numbers = [10, 20, 30, 40];    
2    
3    function isEven(number) {    
4      return number % 2 === 0;    
5    }    
6    
7    function isOdd(number) {    
8      return number % 2 !== 0;    
9    }    
10    
11    numbers.some(isEven); // true     
12    numbers.some(isOdd); // false

在这个例子中，我们定义了一个名为的数组numbers和两个函数，isEven()和，如果提供的数字是偶数或奇数，它们分别isOdd()返回。true然后我们使用该some()方法检查numbers数组是否至少包含一个偶数或奇数。

在第一个示例中，我们将函数isEven()作为测试函数传递。函数一返回，该some()方法就停止迭代，在此代码中，它是数组中的第一个元素。因此，该方法返回。isEven()truesome()true

在第二个示例中，我们将函数isOdd()作为测试函数传递。在这种情况下，数组不包含任何奇数。因此，该some()方法返回false。

方法every()_

您可以使用该every()方法检查数组中的所有元素是否满足提供的测试功能。它遍历数组的每个元素并调用每个元素的测试函数。true如果测试函数对所有元素都返回 true，它就会返回。

您可能已经猜到，语法很熟悉：

array.every(testingFunction);

使用该every()方法也会让人想起我们迄今为止讨论过的各种方法。例如：

1    const numbers = [10, 20, 30, 40];    
2    
3    function isMultipleOfTen(number) {    
4      return number % 10 === 0;    
5    }    
6    
7    numbers.every(isMultipleOfTen); // true

此代码创建一个数字数组并定义一个名为isMultipleOfTen(). 如果传递给的数字isMultipleOfTen()是 10 的倍数，则返回true. 否则，它返回false。然后我们使用该every()方法检查数组中的所有元素是否都是 10 的倍数。在这种情况下，数组中的所有元素都是 10 的倍数，因此该方法every()返回true。 

结论

数组是帮助开发人员处理多个值的强大工具。 它们提供了大量有用且高效的方法，使搜索代码和查找需要使用的数据变得容易。

indexOf()、lastIndexOf()、findIndex()、findLastIndex()、find()、findLast()、includes()、some() 和 every() 方法都可用于根据不同条件搜索数组，例如 作为元素的值，元素的索引，或者至少一个或所有元素是否满足特定条件。 通过适当地使用这些方法，您可以使您的代码更加高效、可读和可维护，并增强您的 JavaScript 应用程序的功能。