find()，findIndex()，indexOf()的用法与区别

1、find (es6)

find()方法返回数组中第一个满足条件的元素,找不到返回undefined

arr.find(callback)
callback函数有三个参数。

• item：每一次迭代查找的数组元素。
• index：每一次迭代查找的数组元素索引。
• arr：被查找的数组。

var testArr1 = [20,12,362,26,965,22,26,35];
var findItem1 = testArr1.find(function(item,index,arr){
	return item>26
});
console.log(findItem1 )//362

//也可以在对象数组中根据对象属性作为判断条件查找
var testArr2 = [
{
	name:'aaa',
	id:'111'
},
{
	name:'bbb',
	id:'222'
},
{
	name:'ccc',
	id:'333'
}]
var findItem2 = testArr2.find(function(item,index,arr){
	return item.name=='ccc'
})
console.log(findItem2 )//{name:'ccc',id:'333'}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2、findIndex (es6)

findIndex()方法返回数组中第一个满足条件的索引,找不到返回 -1

arr.findIndex(callback)
callback函数有三个参数

• item：每一次迭代查找的数组元素。
• index：每一次迭代查找的数组元素索引。
• arr：被查找的数组。

var testArr1 = [20,12,362,26,965,22,26,35];
var index1 = testArr1.findIndex(function(item,index,arr){
	return item>100
});
console.log(index1)//2

//也可以在对象数组中根据对象属性作为判断条件查找
var testArr2 = [
{
	name:'aaa',
	id:'111'
},
{
	name:'bbb',
	id:'222'
},
{
	name:'ccc',
	id:'333'
}]
var index2 = testArr2 .findIndex(function(item,index,arr){
	return item.name=='bbb'
})
console.log(index2)//1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3、indexOf

indexOf()方法返回在数组中可以找到指定元素的第一个索引，找不到返回 -1

arr.indexOf(searchValue，[fromIndex = 0])

var testArr = [20,12,362,26,965,22,26,35];
var index1 = testArr.indexOf(26);
console.log(index1)//3
var index2 = testArr.indexOf(26,5);
console.log(index2)//6
var index3 = testArr.indexOf(26,7);
console.log(index3)//-1

1
2
3
4
5
6
7
8

总结

1、find()与findIndex()

• 相同：参数与用法
• 不同：find返回元素，findIndex返回索引；找不到时find返回undefined，findIndex返回-1。

2、2.findIndex()与indexOf()

• findIndex比indexOf更强大一些，可以通过回调函数查找对象数组，indexOf只能查找数组中指定的值，不过indexOf可以指定开始查找位置的索引