ES6+ find()和findIndex()语法浅析

发布时间：2023-03-24 14:23:57 所属栏目：教程来源：

导读：在 ES5 中有 filter 方法可以用于过滤符合条件的元素，但是 filter 返回的是一个数组，其实我们只想得到符合条件的值或者索引。本节将学习 ES6 的 find 和 findindex 方法，丰富了数组查询的方法。

这两个方法的使

在 ES5 中有 filter 方法可以用于过滤符合条件的元素，但是 filter 返回的是一个数组，其实我们只想得到符合条件的值或者索引。本节将学习 ES6 的 find 和 findindex 方法，丰富了数组查询的方法。

这两个方法的使用基本相同，只是它们的返回结果不同。find 方法返回的是数组中符合条件的第一个值，findindex 方法则返回符合条件的第一个索引的位置。它们都只是关注第一个查找到的结果，在查找到结果以后就不会继续查找了。

使用语法：

arr.find(callback[, thisArg])
arr.findindex(callback[, thisArg])
参数解释：

参数   描述
callback   一个回调函数，接受数组的每一项并执行该函数，当主动返回 true 时，则终止调用
thisArg   （可选）执行 callback 时作为 this 对象的值
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 方法也可以查询，它返回的是满足条件的整个数组，但这两个方法都只关注查找的值是否存在。在只关注是否存在的情况下，这两个方法的效率要高，丰富了对数组的查找场景。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!