ES6+ find()和findIndex()
我们学习了 includes()
用于查找数组,但在数组中我们希望查找符合某个条件的元素,在 ES5 中有 filter
可以用于过滤符合条件的元素,但是 filter
返回的是数组,其实我们只想得到符合条件的值或者索引。本节将学习 ES6 的 find
和 findIndex
,丰富了数组的。
这两个的使用基本相同,只是它们的返回结果不同。find
返回的是数组中符合条件的第值,findIndex
则返回符合条件的第索引的位置。它们都只是关注第查找到的结果,在查找到结果以后就不会继续查找了。
使用语法:
arr.find(callback[, thisArg])
arr.findIndex(callback[, thisArg])
参数解释:
callback
有三个参数:当前元素的值、当前元素的索引,以及数组本身。数组中的每一项元素都会执行一次 callback
,直到 callback
返回 true
时,则终止,并且把查找的结果返回。否则返回 undefined
。
如果提供了 thisArg
参数,那么它将作为每次 callback
执行时的 this
,如果未提供,则使用 undefined
。
以下是 find
和 findIndex
的使用示例,以便更好地理解这两个。
var arr = [, , , , ]
var target = arr.find(function(item) {
return item % ===
})
console.log(target) // 6
var target = arr.findIndex(function(item) {
return item % ===
})
console.log(target) // 1
上面的找出数组中是 2 的倍数的项,find
返回的是数组中符合条件的第值 6;findIndex
返回的是数组中符合条件的第索引的位置 1。
在 ES5 中有 filter
可以用于查找符合条件的元素,filter
会遍历整个数组把符合条件的数组都返回出来,与 find
不同的是,它的返回结果是符合条件的数组。find
和 findIndex
则只关注数组中有没有符合条件的元素,而且只关注到的第元素。
let arr = [,,,,]
let find = arr.filter(function(item) {
return item % ===
})
console.log(find) // [2, 4]
上面的是找到所有满足 2 的倍数的数组,返回的结果同样是数组。
本节讲解了数组的 find
和 findIndex
的使用,主要注意的是它们的返回的结果不同,find
返回的是数组中符合条件的第值,findIndex
则返回符合条件的值的第索引。ES5 中的 filter
也可以,它返回的是满足条件的整个数组,但这两个都只关注查找的值是否存在。在只关注是否存在的情况下,这两个的效率要高,丰富了对数组的查找场景。