js中find、findIndex、indexOf的用法和区别
一、find方法
find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。
语法是:
array.find(callback(element[, index[, array]])[, thisArg])
callback是一个函数,用来测试每个元素是否符合条件。callback函数接收三个参数,分别是当前遍历的元素、元素的索引、原数组本身。当找到符合条件的元素时,find方法会返回该元素的值。如果没有找到符合条件的元素,则返回undefined。
例如:使用find方法查找数组中第一个>6的元素
const numbers = [1, 3, 5, 7, 9]; const result = numbers.find(element => element > 6); console.log(result); // 7
在callback函数中,我们使用箭头函数语法,检查每个元素是否>6,因为7是第一个>6的元素,索引find方法返回7作为结果。
二、findIndex方法
findIndex方法也可用来查找数组中符合条件的元素,返回符合条件的元素在数组中的索引。
语法:
array.findIndex(callback(element[, index[, array]])[, thisArg])
当找到符合条件的元素时,findIndex方法会返回该元素在数组中的索引。如果没有找到符合条件的元素,则返回-1。
例如:使用findIndex方法查找数组中第一个>6的元素的索引
const numbers = [1, 3, 5, 7, 9]; const result = numbers.findIndex(element => element > 6); console.log(result); // 3
因为7是第一个>6的元素,他的索引是3,所以findIndex方法返回3作为结果。
三、indexof方法
indexof方法,可以用来查找数组中指定元素的位置。
语法:array.indexOf(searchElement[, fromIndex])
searchElement是要查找的元素,fromIndex是可选参数,表示从哪个索引开始查找。当找到指定元素时,indexof方法会返回该元素所在数组中的索引,如果没有找到则返回-1。
例如:使用indexof方法查找数组中7的索引
const numbers = [1, 3, 5, 7, 9]; const result = numbers.indexOf(7); 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。下面这篇文章主要给大家介绍了关于使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置的相关资料,需要的朋友可以参考下2018-11-11electron-builder允许安装时请求提升权限的场景分析
electron-builder 作为一个用于 Electron 应用程序打包的工具,需要下载并使用 Electron 运行时来创建可执行文件,这篇文章给大家介绍electron-builder允许安装时请求提升权限的相关知识,感兴趣的朋友跟随小编一起看看吧2024-03-03JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
这篇文章主要介绍了JavaScript创建对象方式,结合实例形式总结分析了工厂模式、构造函数模式、原型模式等各种常见的javascript对象创建方式与相关操作注意事项,需要的朋友可以参考下2018-12-12
最新评论