×

Javascript:理解find、findIndex、indexOf的应用

作者:Terry2023.08.20来源:Web前端之家浏览:4911评论:0
关键词:js

来分享一个Javascript基础知识:理解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方法。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20230820a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: