find()和findIndex()与indexOf()用法与区别

最新推荐文章于 2023-05-05 12:08:40 发布

点燃火柴

最新推荐文章于 2023-05-05 12:08:40 发布

阅读量8.7k

点赞数 11

分类专栏： javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/qw8704149/article/details/106449233

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

find()方法返回数组中第一个满足条件的元素,找不到返回undefined 该方法ES6新增。
语法： 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'}

findIndex()方法返回数组中第一个满足条件的索引,找不到返回-1 该方法ES6新增。
语法： 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

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.find()与findIndex()参数与用法相同，不同的是find返回元素，findIndex返回索引；找不到时find返回undefined，findIndex返回-1.
2.findIndex()与indexOf()，findIndex比indexOf更强大一些，可以通过回调函数查找对象数组，indexOf只能查找数组中指定的值，不过indexOf可以指定开始查找位置的索引