findIndex() 的 方法,其實跟我之前提到的 indexOf 的方法雷同

都是用來比對 陣列(Array) 的 元素,回傳其 索引值 的方法

不過 findIndex 的方法,則可以帶入 函示 來進行陣列的比對:


Array.prototype.findIndex()

語法:

arr.findIndex(callback[, thisArg])

參數:

callback:針對數組中的每個元素,都會執行該回呼函式,執行時會自動傳入下面三個參數:
element : 當前元素。
index: 當前元素的索引。
array: 調用 findIndex 的陣列。
thisArg:執行 callback 時作為 this 對象的值。

實際範例:

const arr = [1,10,100,200,300]

arr.findIndex((element)=>{
  return element > 100
})

//回傳結果為 3

MDN web docs: Array.prototype.findIndex()


實際運用:

最近在開發應用時,碰到了一個情境,如下:

const arr = [
    {
      label: '標題1',
      key: 1
    },
    {
      label: '標題2',
      key: 2
    },
    {
      label: '標題2',
      key: 2
    },
    {
      label: '標題1',
      key: 1
    },
    {
      label: '標題3',
      key: 3
    },
]

我需要將物件中,以屬性 key 的值為判斷依據,過濾掉 key 值 重複的物件,作法如下:

arr.filter(function(el,index){
 return arr.findIndex(function($el){
   return el.key === $el.key
  }) === index
})

使用 filter() 的函式,將 當前陣列的索引findIndex() 回傳出的 索引 值 進行比對

以上面的範例中的例子 key 值為 1 的陣列索引為 0 和 3 ,但 findIndex() 的方法 只會回傳 第一個 符合條件的陣列元素的索引

所以只會回傳 0 , 因此我們可以藉由 索引值 來進行比對,只取得 索引值 為 0 的資料

輸出結果如下:

    {
      label: '標題1',
      key: 1
    },
    {
      label: '標題2',
      key: 2
    },
    {
      label: '標題3',
      key: 3
    },

filter(): [JavaScript]Array.filter()過濾陣列元素

Summary
[JavaScript] Array.prototype.findIndex() 檢查陣列元素
Article Name
[JavaScript] Array.prototype.findIndex() 檢查陣列元素
Description
`findIndex()` 的 方法,其實跟我之前提到的 indexOf 的方法雷同都是用來比對 陣列(Array) 的 元素,回傳其 `索引值` 的方法
Author

Facebook 功能: