在 JavaScript 陣列中查詢物件的索引

1. 在 JavaScript 中使用 findIndex() 方法在陣列中查詢物件的索引
2. 使用 lodash 庫在 JavaScript 陣列中查詢物件的索引

本文將探討 findIndex() 方法以及如何使用 lodash 在 JavaScript 陣列中查詢物件的索引。

在 JavaScript 中使用 findIndex() 方法在陣列中查詢物件的索引

ES6 向 Array.prototype 新增了一個名為 findIndex() 的新方法，該方法返回陣列中通過提供的測試的第一個元素。findIndex() 方法返回滿足測試函式的元素的索引，如果沒有元素通過測試，則返回 -1。findIndex() 最適合具有非原始型別（例如，物件）的陣列來查詢專案的索引。

我們提供回撥作為 Array.prototype.findIndex() 中的第一個引數。如果陣列的索引是非原始的，則此方法很有用。如果陣列索引不僅僅是值，我們可以使用此方法。返回與指定條件匹配的第一個元素後，findIndex() 將停止檢查陣列中是否存在陣列中的剩餘項。

findIndex() 的語法如下所示。

array.findIndex(function(currentValue, index, arr))

或者，可以將 index 和 arr 傳遞給回撥函式。index 選項指向陣列中當前元素的索引，而 arr 是當前元素所屬的陣列物件。如果陣列中指定的條件不匹配，則 findIndex() 返回 -1。

假設我們有以下原始型別的陣列，我們想找到年齡超過 18 的專案的索引。然後，我們可以使用 findIndex() 來找到第一個符合條件的專案的索引指定的。

示例程式碼：

const ages = [3, 10, 17, 23, 52, 20];
let index = ages.findIndex( age => age > 18);
console.log(index);

輸出：

3

由於匹配指定條件的第一個專案的索引為 3，因為它大於 18，因此我們得到索引的值為 3。

現在我們可以使用相同的邏輯來查詢與我們使用 findIndex() 方法指定的條件匹配的物件的索引。我們可以使用 findIndex() 來查詢獲得 B 級成績的人的索引。

示例程式碼：

const Result = [
  {
    name:'John',
    grade: 'A',
  },
  {
    name:'Ben',
    grade: 'C',
  },
  {
    name:'Anthony',
    grade: 'B',
  },
  {
    name:'Tim',
    grade: 'B-',
  },
]

const index = Result.findIndex( (element) => element.grade === 'B');
console.log(index)

輸出：

2

在這裡，findIndex() 與 Result 陣列一起使用，該陣列以 JavaScript 物件的形式儲存我們的資料。我們已經實現了箭頭函式，它也在 ES6 中引入，作為帶有 findIndex() 方法的回撥函式。我們已將 element 傳遞給回撥函式，該函式將物件的當前值儲存在我們迴圈遍歷的陣列中。

使用 lodash 庫在 JavaScript 陣列中查詢物件的索引

我們可以使用輕量級庫 lodash，通過消除處理陣列、數字、物件、字串等的麻煩，使 JavaScript 變得更容易。我們可以從官方網站下載 lodash.js 檔案並載入到我們的網站上，如下所示。

<script src="lodash.js"> </script>

我們可以在本地將它安裝為 npm i --save lodash 或 yarn add lodash。一切都設定好後，我們可以使用 _.findIndex() 方法。語法如下所示。

_.findIndex(array, [predicate=_.identity], [fromIndex=0])

這裡，引數 array 表示我們需要處理的陣列。選項 [predicate=_.identity] 是每次迭代呼叫的函式。第三個選項 [fromIndex=0] 是可選的，可用於設定開始迭代的起點。

我們使用在上述方法中建立的陣列來演示 lodash 方法。

程式碼示例：

var index = _.findIndex(Result, {grade: 'B'})
console.log(index);

輸出：

2