ES6数组方法find()和findIndex()的用法和区别，你能详细解释一下吗？

本文共计1392个文字，预计阅读时间需要6分钟。

本文主要讲解ES6数组方法中的find()和findIndex()，并介绍它们在JavaScript中的更多数组方法。

ES6为JavaScript带来了许多新的特性，其中数组方法find()和findIndex()是两个非常有用的方法。这两个方法用于在数组中查找满足特定条件的第一个元素，并返回该元素的值或索引。

find()方法find()方法接收一个回调函数作为参数，该函数用于判断数组中的每个元素是否满足条件。如果找到满足条件的元素，find()方法将立即返回该元素的值，否则返回undefined。

javascriptconst arr=[1, 2, 3, 4, 5];const result=arr.find(item=> item > 3);console.log(result); // 4

findIndex()方法findIndex()方法与find()类似，但它返回的是满足条件的元素的索引，而不是元素的值。如果未找到满足条件的元素，则返回-1。

javascriptconst arr=[1, 2, 3, 4, 5];const index=arr.findIndex(item=> item > 3);console.log(index); // 3

总结find()和findIndex()方法在处理数组时非常有用，特别是在需要查找满足特定条件的第一个元素时。这两个方法可以简化代码，提高开发效率。

本文主要讲解ES6数组方法find()与findIndex()，关于JS的更多数组方法，可参考以下：

①JavaScript 内置对象之-Array

②ES5新增数组方法（例：map()、indexOf()、filter()等）

③ES6新增字符串扩张方法includes()、startsWith()、endsWith()

1. find()

该方法主要应用于查找第一个符合条件的数组元素，即返回通过测试（函数内判断）的数组的第一个元素的值。

它的参数是一个回调函数,为数组中的每个元素都调用一次函数执行。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素，之后的值不会再调用执行函数。如果没有符合条件的元素，返回值为undefined。

例：

① 以下代码在myArr数组中查找元素值大于5的元素，找到后立即返回，并不会继续往下执行。返回的结果为查找到的元素：

const myArr=[1,2,3,4,5,6,7,8,9]; var v=myArr.find(value=>value>5); console.log(v);

结果：

② 如果把条件改为>10，没有符合元素，则返回undefined:

const myArr=[1,2,3,4,5,6,7,8,9]; var v=myArr.find(value=>value>10); console.log(v);

结果：

③ 它的回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。

例：

查找索引值为5的元素，结果显示6：

const myArr=[1,2,3,4,5,6]; var v=myArr.find((value,index,arr)=>{ return index===5; }); console.log(v);

结果：

注意：

• find() 对于空数组，函数是不会执行的。
• find() 并没有改变数组的原始值。

2. findIndex()

• findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置（注：find()返回的是元素），之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1（注：find()返回的是undefined）。
• findIndex()与find()的使用方法相同，findIndex()当中的回调函数也是接收三个参数，与find()相同。
• findIndex()方法实现是通过循环遍历查找。应用场景广泛，可以查找大于等于小于，表达式可以随便写。实际上相当于一个for循环，只不过找到了你不需要自己退出。

语法：

array.findIndex(function(currentValue, index, arr), thisValue);

例①：

const myArr=[ { id:1, Name:"张三" }, { id:2, Name:"李四" }, { id:3, Name:"王五" }, { id:4, Name:"赵六" } ]; var i0=myArr.findIndex((value)=>value.id==1); console.log(i0); var i1=myArr.findIndex((value)=>value.id==2); console.log(i1); var i2=myArr.findIndex((value)=>value.id==3); console.log(i2); var i3=myArr.findIndex((value)=>value.id==4); console.log(i3); var i4=myArr.findIndex((value)=>value.id==5); console.log(i4);

结果：

例②：

const myArr = [1,2,3,4,5,6,7,8,9]; function bigNum(ele){ return ele > 6; } console.log(myArr.findIndex(bigNum));

结果（也就是数组中第一个大于6的数，即“7”所在位置的索引）：

例③：可以用来返回符合大于输入框中数字的数组索引

var ages = [2,4,6,8,10]; function checkAdult(age) { return age >= document.getElementById("ageToCheck").value; } function myFunction() { document.getElementById("demo").innerHTML = ages.findIndex(checkAdult); }

注意:

• findIndex() 对于空数组，函数是不会执行的。
• findIndex() 并没有改变数组的原始值。

到此这篇关于详解ES6数组方法find()、findIndex()的总结的文章就介绍到这了,更多相关ES6 find() findIndex()内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！