JavaScript find()方法

find是檢索或者查詢的意思，find方法功能恰如其名。

此方法可以檢索陣列中滿足指定條件的第一個元素。

如果檢索到滿足條件的元素，那麼返回此元素，否則返回undefined。

檢索陣列的條件是由find的回撥函式規定的，後面會有詳細的程式碼演示。

ES2015新增此方法。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
array.find(callback(element,index,array)[, thisArg])

引數解析：

（1）.callback：必需，回撥函式，它制定了對陣列元素的檢索規則。

          回撥函式具有三個引數，介紹如下：          

          element：當前陣列元素。

          index：當前陣列元素的索引位置。

          array：當前進行檢索的陣列本身。

（2）.thisArg：可選，用來規定回撥函式中this所指向的物件。

檢索規則如下：

（1）.陣列的每一個元素都會挨個作為引數傳入回撥函式。

（2）.如果當前回撥函式執行的返回值為true（或者可以轉換為true），那麼find方法返回當前陣列元素，並終止整個find方法的執行，如果最終沒有找到符合條件的陣列元素，那麼find方法返回undefined。

特別說明：

（1）.find方法在首次呼叫回撥函式時，就可以確定陣列元素數量，後期新增的新元素會被回撥函式無視。

（2）.陣列的元素如果被修改，且修改時沒有被回撥函式所訪問，那麼回撥函式會使用修改後的新值。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = [2, 3, -5, 4,6,10];
let elem=arr.find(function (ele) {
  if (ele > 4) {
    return true
  }
})
console.log(elem);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.find方法開始執行之後，會將陣列元素逐個傳遞給回撥函式。

（2）.此回撥函式會判斷當前傳入的元素是否大於4，成立，則終止整個find方法的執行，並返回當前陣列元素。

（3）.6是首個滿足條件的元素，那麼find方法將返回此元素，後面的陣列元素將被無視。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = [2,3,5,4,6,10];
let flag=1;
let elem = arr.find(function (ele) {
  if(flag){
    arr.push(11);
    flag=0;
  }
  console.log(ele)
})

程式碼執行效果截圖如下：

有上面的截圖可見，回撥函式開始執行後，新增的陣列元素是不會被回撥函式關注的。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = [2,3,5,4,6,10];
let flag=1;
let elem = arr.find(function (ele) {
  if(flag){
    arr[2]=500;
    flag=0;
  }
  console.log(ele)
})

程式碼執行效果截圖如下：

可以看到，如果在回撥函式訪問指定陣列元素之前，修改陣列元素的話，對回撥函式是有效的。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = [2, 3, 5, 4, 6, 10];
let obj = {
  num:5
}
let elem = arr.find(function (ele, index) {
  if (ele > this.num) {
    return true;
  }
}, obj)
console.log(elem);

程式碼執行效果截圖如下：

上述程式碼中，為find方法傳遞兩個引數。

第一個引數是回撥函式，第二個引數是一個物件，它可以重置回撥函式中this的指向。

那麼，上述程式碼中回撥函式的this就指向obj，於是this.num值等於5。

陣列中的元素6第一個滿足條件，所以find方法返回值為6。