JavaScript 中搜索数组元素的四种方法

朱雀 2024-03-31 11:29 103阅读 0赞

在实际开发当中，我们经常会遇到类似诸如下面的需求：  
1. 获取满足特定条件的数组中的所有项目  
2. 要检查是否满足条件？  
3. 检查数组中是否有特定值？  
4. 在数组中找到指定值的索引？  
在本文中，我们将讨论四种可用于搜索数组中项目的方法。这些方法是：  
1. \`filter\`  
2. \`find\`  
3. \`includes\`  
4. \`indexOf\`  
接下来，我们就一起来看一下这四种方式  
\#\# Array.filter()  
我们可以使用 \`Array.filter()\` 方法在数组中查找满足特定条件的元素。  
例如，如果我们要获取大于10的数字数组中的所有项目，则可以执行以下操作：  
\`\`\`js  
const array = \[10, 11, 3, 20, 5\];  
const greaterThanTen = array.filter(element => element > 10);  
console.log(greaterThanTen) //\[11, 20\]  
\`\`\`  
使用 \`array.filter()\` 方法的语法如下：  
\`\`\`js  
let newArray = array.filter(callback);  
\`\`\`  
着这里：  
\* \`newArray \`是返回的新数组  
\* \`array\` 是我们要进行查找的数组本身  
\* \`callback\` 是应用于数组每个元素的回调函数  
如果数组中没有项目符合条件，则返回一个空数组。  
有时，我们不需要满足特定条件的所有元素。我们只需要一个符合条件的元素。在这种情况下，需要使用\`find()\`方法。  
\#\# Array.find()  
使用 \`Array.find()\`方法查找满足特定条件的第一个元素。就像 \`filter\` 方法一样，它以回调为参数，并返回满足回调条件的第一个元素。  
我们尝试一下在上面的示例中对数组使用 \`find\` 方法。  
\`\`\`js  
const array = \[10, 11, 3, 20, 5\];  
const greaterThanTen = array.find(element => element > 10);  
console.log(greaterThanTen)//11  
\`\`\`  
\`array.find()\` 的语法为  
\`\`\`js  
let element = array.find(callback);  
\`\`\`  
\`callback\` 是在数组中的每个值上执行的函数，带有三个参数：  
\- \`element\` -当前被遍历的元素（必填）  
\- \`index\` -当前遍历的元素的索引/位置（可选）  
\- \`array\`- 当前数组（可选）  
但是请注意，如果数组中没有项目符合条件，则返回 \`undefined\`。  
但是，如果想检查某个元素是否在数组中怎么办？  
\#\# Array.includes（）  
\`includes()\` 方法确定数组是否包含某个值，并在适当时返回 \`true\` 或 \`false\`。  
因此，在上面的示例中，如果我们要检查20是否为数组中的元素之一，则可以执行以下操作：  
\`\`\`js  
const array = \[10, 11, 3, 20, 5\];  
const includesTwenty = array.includes(20);  
console.log(includesTwenty)//true  
\`\`\`  
你会注意到此方法与其他方法之间的区别。此方法接受值而不是回调作为参数。这是 \`include\` 方法的语法：  
\`\`\`js  
const includesValue = array.includes(valueToFind, fromIndex)  
\`\`\`  
\- \`valueToFind\` 是要在数组中检查的值（必填）  
\- \`fromIndex\` 是要开始从中搜索元素的数组中的索引或位置（可选）  
要了解索引的概念，让我们再次使用上面的示例。  
如果要检查数组是否在第一个元素之外的其他位置包含10个，可以执行如下操作：  
\`\`\`js  
const array = \[10, 11, 3, 20, 5\];  
const includesTenTwice = array.includes(10, 1);  
console.log(includesTenTwice)//false  
\`\`\`  
\#\# Array.indexOf（）  
\`indexOf()\` 方法返回可以在数组中找到给定元素的第一个索引。如果数组中不存在该元素，则返回 \`-1\`。  
回到例子。让我们找到数组中 \`3\` 的索引。  
\`\`\`js  
const array = \[10, 11, 3, 20, 5\];  
const indexOfThree = array.indexOf(3);  
console.log(indexOfThree)//2  
\`\`\`  
其语法类似于该 \`includes\` 方法的语法。  
\`\`\`js  
const indexOfElement = array.indexOf(element, fromIndex)  
\`\`\`  
\- \`element\` 是要在数组中检查的元素（必填），并且  
\- \`fromIndex\` 是要从数组中搜索元素的启始索引或位置（可选）  
请务必注意，\`includes\` 和 \`indexOf\` 方法都使用严格的相等性\`（'==='）\`搜索数组。如果值的类型不同（例如\`4\`和\`'4'\`），它们将分别返回 \`false\` 和 \`-1\`。  
\#\# 总结  
使用这些数组方法，无需使用 \`for\` 循环即可搜索数组。根据您的需求，您可以决定哪种方法最适合您的用例。  
以下是何时使用每种方法的摘要：  
\- 如果你想找到在符合特定条件的阵列中的所有项目，使用 \`filter\`。  
\- 如果你想检查是否至少有一个项目符合特定的条件，请使用 \`find\`。  
\- 如果你想检查一个数组包含一个特定的值，请使用 \`includes\`。  
\- 如果要在数组中查找特定项目的索引，请使用\`indexOf\` 。

了解更多javascript资讯

[JavaScript对象的创建方式有几种？怎么用？][JavaScript]

[JavaScript怎么制作动画？\_][JavaScript 1]

[10个JavaScript常见高级知识点\_][10_JavaScript]

[Three.js基础入门系列（九）][Three.js]

[三行代码，吃透JavaScript预解析][JavaScript 2]

[JavaScript]: https://blog.csdn.net/JACK_SUJAVA/article/details/124040717?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166936384916782414991098%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166936384916782414991098&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-124040717-null-null.nonecase&utm_term=javascript&spm=1018.2226.3001.4450
[JavaScript 1]: https://blog.csdn.net/JACK_SUJAVA/article/details/127517156?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166936384916782414991098%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166936384916782414991098&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127517156-null-null.nonecase&utm_term=javascript&spm=1018.2226.3001.4450
[10_JavaScript]: https://blog.csdn.net/JACK_SUJAVA/article/details/128002993?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166936396316800182794136%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166936396316800182794136&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-6-128002993-null-null.nonecase&utm_term=javascript&spm=1018.2226.3001.4450
[Three.js]: https://blog.csdn.net/JACK_SUJAVA/article/details/123740075?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166936396316800182794136%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166936396316800182794136&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-28-123740075-null-null.nonecase&utm_term=javascript&spm=1018.2226.3001.4450
[JavaScript 2]: https://blog.csdn.net/JACK_SUJAVA/article/details/123740191?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166936396316800182794136%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166936396316800182794136&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-3-123740191-null-null.nonecase&utm_term=javascript&spm=1018.2226.3001.4450