js中find、findIndex、indexOf的用法和区别

梁小倩

一、find方法

find方法是ES6引入的一种数组方法，可以用来查找数组中符合条件的元素。
语法是：

1. array.find(callback(element[, index[, array]])[, thisArg])

复制代码

callback是一个函数，用来测试每个元素是否符合条件。callback函数接收三个参数，分别是当前遍历的元素、元素的索引、原数组本身。当找到符合条件的元素时，find方法会返回该元素的值。如果没有找到符合条件的元素，则返回undefined。
例如：使用find方法查找数组中第一个>6的元素

1. const numbers = [1, 3, 5, 7, 9];
   
2. const result = numbers.find(element => element > 6);
   
3. console.log(result); // 7

复制代码

在callback函数中，我们使用箭头函数语法，检查每个元素是否>6，因为7是第一个>6的元素，索引find方法返回7作为结果。  

二、findIndex方法

findIndex方法也可用来查找数组中符合条件的元素，返回符合条件的元素在数组中的索引。
语法：

1. array.findIndex(callback(element[, index[, array]])[, thisArg])

复制代码

当找到符合条件的元素时，findIndex方法会返回该元素在数组中的索引。如果没有找到符合条件的元素，则返回-1。
例如：使用findIndex方法查找数组中第一个>6的元素的索引

1. const numbers = [1, 3, 5, 7, 9];
   
2. const result = numbers.findIndex(element => element > 6);
   
3. console.log(result); // 3

复制代码

因为7是第一个>6的元素，他的索引是3，所以findIndex方法返回3作为结果。

三、indexof方法

indexof方法，可以用来查找数组中指定元素的位置。
语法：

1. array.indexOf(searchElement[, fromIndex])

复制代码

searchElement是要查找的元素，fromIndex是可选参数，表示从哪个索引开始查找。当找到指定元素时，indexof方法会返回该元素所在数组中的索引，如果没有找到则返回-1。
例如：使用indexof方法查找数组中7的索引

1. const numbers = [1, 3, 5, 7, 9];
   
2. const result = numbers.indexOf(7);
   
3. console.log(result); // 3

复制代码

因为7的索引是3，所以indexof方法返回3作为结果。

四、三者区别：

1、返回结果不同。find方法返回符合条件的元素的值，findIndex方法返回符合条件的元素在数组中的索引，而indexof方法返回指定元素在数组中的索引。
2、参数不同。find和findIndex方法都需要传入一个回调函数作为参数，该函数用来测试每个元素是否符合条件。而indexof方法则直接传入要查找的元素作为参数。

五、实际使用

在实际开发中，如果我们要查找符合条件的元素的值，可以使用find方法，如果需要查找符合条件的元素在数组中的索引，可以使用findIndex方法，如果只需要查找指定元素在数组中的索引，可以使用indexof方法。
到此这篇关于js中find、findIndex、indexOf的用法和区别的文章就介绍到这了,更多相关js find findIndex indexOf内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/2921263wv.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！