[JavaScript] Array.prototype.findIndex() 檢查陣列元素
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()過濾陣列元素