iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Modern Web

我轉生成前端貓咪踏入React地獄的那些事系列 第 7

Day 7 搜尋陣列的方法-find,findIndex & filter

  • 分享至 

  • xImage
  •  

今天介紹的三個語法是針對陣列的搜尋功能,有find(),findIndex(),filter()

.find()

引用MDN的描述"find() 方法會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined"
簡而言之,就是在陣列裡尋找需要的值並進行回傳需要return,但是只會回傳一次,也竟是滿足條件的第一個值。
用法是裡面帶一個callback,有三個參數:
1.被處理的元素
2.被處理元素的index
3.被處理的陣列本身

let array=[1,2,3,4,5]
let value=array.find((v,i,arr)=>{
return v>3
})
console.log(value)

.findIndex()

用法語find一模一樣,只是find是回傳值,findIndex是回傳index,如果沒有符合條件的值會回傳-1
裡面一樣帶一個callback,有三個參數:
1.被處理的元素
2.被處理元素的index
3.被處理的陣列本身

let array=[1,2,3,4,5]
let index=array.findIndex((v,i,arr)=>{
return v>3
})
console.log(index)

.filter()

這是昨日介紹find的加強功能版,它可以把在陣列符合指定條件的值儲存成一個==新陣列==意味著不會修改到遠本的陣列,其用法也是大同小異帶一個callback包含如下三個參數,然後寫出需要的判斷式
1.被處理的元素
2.被處理元素的index
3.被處理的陣列本身

let array=[1,2,3,4,5]
let newArray=array.filter((v,i,arr)=>{
return v>3
})
console.log(newArray)

這三著其實都很常用到,並沒有誰好誰壞,端看用途而定。
其實陣列的方法要熟練起來真的不太容易,我覺得主要是太多種方法了,而且都有微妙的不同,需要透過大量的時間和練習才能掌握。

引用資料

MDN Array.prototype.find


上一篇
Day 6 其他的陣列方法 slice & splice
下一篇
Day 8 字串陣列互相變化的方法 split & join
系列文
我轉生成前端貓咪踏入React地獄的那些事25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言