陣列運用筆記 findIndex()

繼上一篇 陣列運用筆記 find()同一系列

說到find()一定不可或缺的就是同家族的findIndex()

方法介紹

findIndex() 方法將依據提供的測試函式，尋找陣列中符合的元素，並返回其 index（索引）。如果沒有符合的對象，將返回 -1 。mdn (opens new window)

沿用上一個範例

const names = ['Bob', 'Ivy', 'Mike', 'John']
const answer = names.findIndex(item => item === `Ivy`)
console.log(answer) // 1

和find()一樣可以在全是物件的陣列中找到符合條件的第一個

方法運用

比較多會使用的狀況是在陣列中移除指定項目

情境

在陣列中移除age: 65的項目

作法會先檢查該項的索引值再進行移除

const people = [
  {
    age: 20,
    name: 'Bob'
  },
  {
    age: 12,
    name: 'Ivy'
  },
  {
    age: 65,
    name: 'Mike'
  },
  {
    age: 12,
    name: 'John'
  }
]
const targetIndex = people.findIndex(item => item.age === 65)
console.log(targetIndex) //2
const newArray = [
	...people.slice(0, targetIndex),
	...people.slice(targetIndex+1)
]
console.log(newArray)
//0: {age: 20, name: "Bob"} 1: {age: 12, name: "Ivy"} 2: {age: 12, name: "John"}

和indexOf()比較

概念和大家常用的indexOf()有些類似

都是用來比對陣列的元素並回傳索引值

若沒找到則回傳-1

不同之處是indexOf()找的是指定元素

而findIndexOf()則是可以找指定物件或是使用function來進行比對

這裡延續上面的例子作為範例

範例

兩種方法在物件陣列中尋找元素的差異 age: 65

indexOf()

const correctIndex1 = people.map(man => man.age).indexOf(65)

findIndex()

const correctIndex2 = people.findIndex(man => man.age === 65)

最後整理一個簡單的表格

方法名稱	indexOf()	findIndex()
找到指定元素	回傳索引值	回傳索引值
未找到指定元素	回傳-1	回傳-1
物件陣列	搭配map()使用	撰寫function

結語

在個人使用上indexOf()比較會用來確認陣列是否有值的情況

而findIndex()則是用在對陣列操作