ES6+ find () 和 findIndex ()

1. 前言

上一節(jié) 我們學(xué)習(xí)了 includes() 方法用于查找數(shù)組，但在數(shù)組中我們希望查找一個(gè)符合某個(gè)條件的元素，在 ES5 中有 filter 方法可以用于過濾符合條件的元素，但是 filter 返回的是一個(gè)數(shù)組，其實(shí)我們只想得到符合條件的值或者索引。本節(jié)將學(xué)習(xí) ES6 的 find 和 findIndex 方法，豐富了數(shù)組查詢的方法。

2. 語法詳解

2.1 基本語法

這兩個(gè)方法的使用基本相同，只是它們的返回結(jié)果不同。find 方法返回的是數(shù)組中符合條件的第一個(gè)值，findIndex 方法則返回符合條件的第一個(gè)索引的位置。它們都只是關(guān)注第一個(gè)查找到的結(jié)果，在查找到結(jié)果以后就不會繼續(xù)查找了。

使用語法：

arr.find(callback[, thisArg])
arr.findIndex(callback[, thisArg])

參數(shù)解釋：

callback 函數(shù)有三個(gè)參數(shù)：當(dāng)前元素的值、當(dāng)前元素的索引，以及數(shù)組本身。數(shù)組中的每一項(xiàng)元素都會執(zhí)行一次 callback 函數(shù)，直到 callback 返回 true 時(shí)，則終止調(diào)用，并且把查找的結(jié)果返回。否則返回 undefined。

如果提供了 thisArg 參數(shù)，那么它將作為每次 callback 函數(shù)執(zhí)行時(shí)的 this，如果未提供，則使用 undefined。

2.2 方法示例

以下是 find 和 findIndex 的使用示例，以便更好地理解這兩個(gè)方法。

var arr = [1, 6, 3, 4, 5]
var target = arr.find(function(item) {
  return item % 2 === 0
})
console.log(target)   // 6

var target = arr.findIndex(function(item) {
  return item % 2 === 0
})
console.log(target)   // 1

上面的代碼找出數(shù)組中是 2 的倍數(shù)的項(xiàng)，find 方法返回的是數(shù)組中符合條件的第一個(gè)值 6；findIndex 方法返回的是數(shù)組中符合條件的第一個(gè)索引的位置 1。

3. 語法對比

在 ES5 中有 filter 方法可以用于查找符合條件的元素，filter 會遍歷整個(gè)數(shù)組把符合條件的數(shù)組都返回出來，與 find 不同的是，它的返回結(jié)果是一個(gè)符合查詢條件的數(shù)組。find 和 findIndex 則只關(guān)注數(shù)組中有沒有符合查詢條件的元素，而且只關(guān)注查詢到的第一個(gè)元素。

let arr = [1,2,3,4,5]
let find = arr.filter(function(item) {
  return item % 2 === 0
})
console.log(find)   // [2, 4]

上面的代碼是找到所有滿足 2 的倍數(shù)的數(shù)組，返回的結(jié)果同樣是一個(gè)數(shù)組。

4. 小結(jié)

本節(jié)講解了數(shù)組的 find 和 findIndex 方法的使用，主要注意的是它們的返回的結(jié)果不同，find 方法返回的是數(shù)組中符合條件的第一個(gè)值，findIndex 方法則返回符合條件的值的第一個(gè)索引。ES5 中的 filter 方法也可以查詢，它返回的是滿足條件的整個(gè)數(shù)組，但這兩個(gè)方法都只關(guān)注查找的值是否存在。在只關(guān)注是否存在的情況下，這兩個(gè)方法的效率要高，豐富了對數(shù)組的查找場景。