js中find、findIndex、indexOf的用法和區(qū)別
一、find方法
find方法是ES6引入的一種數(shù)組方法,可以用來查找數(shù)組中符合條件的元素。
語法是:
array.find(callback(element[, index[, array]])[, thisArg])
callback是一個函數(shù),用來測試每個元素是否符合條件。callback函數(shù)接收三個參數(shù),分別是當(dāng)前遍歷的元素、元素的索引、原數(shù)組本身。當(dāng)找到符合條件的元素時,find方法會返回該元素的值。如果沒有找到符合條件的元素,則返回undefined。
例如:使用find方法查找數(shù)組中第一個>6的元素
const numbers = [1, 3, 5, 7, 9]; const result = numbers.find(element => element > 6); console.log(result); // 7
在callback函數(shù)中,我們使用箭頭函數(shù)語法,檢查每個元素是否>6,因為7是第一個>6的元素,索引find方法返回7作為結(jié)果。
二、findIndex方法
findIndex方法也可用來查找數(shù)組中符合條件的元素,返回符合條件的元素在數(shù)組中的索引。
語法:
array.findIndex(callback(element[, index[, array]])[, thisArg])
當(dāng)找到符合條件的元素時,findIndex方法會返回該元素在數(shù)組中的索引。如果沒有找到符合條件的元素,則返回-1。
例如:使用findIndex方法查找數(shù)組中第一個>6的元素的索引
const numbers = [1, 3, 5, 7, 9]; const result = numbers.findIndex(element => element > 6); console.log(result); // 3
因為7是第一個>6的元素,他的索引是3,所以findIndex方法返回3作為結(jié)果。
三、indexof方法
indexof方法,可以用來查找數(shù)組中指定元素的位置。
語法:array.indexOf(searchElement[, fromIndex])
searchElement是要查找的元素,fromIndex是可選參數(shù),表示從哪個索引開始查找。當(dāng)找到指定元素時,indexof方法會返回該元素所在數(shù)組中的索引,如果沒有找到則返回-1。
例如:使用indexof方法查找數(shù)組中7的索引
const numbers = [1, 3, 5, 7, 9]; const result = numbers.indexOf(7); console.log(result); // 3
因為7的索引是3,所以indexof方法返回3作為結(jié)果。
四、三者區(qū)別:
1、返回結(jié)果不同。find方法返回符合條件的元素的值,findIndex方法返回符合條件的元素在數(shù)組中的索引,而indexof方法返回指定元素在數(shù)組中的索引。
2、參數(shù)不同。find和findIndex方法都需要傳入一個回調(diào)函數(shù)作為參數(shù),該函數(shù)用來測試每個元素是否符合條件。而indexof方法則直接傳入要查找的元素作為參數(shù)。
五、實際使用
在實際開發(fā)中,如果我們要查找符合條件的元素的值,可以使用find方法,如果需要查找符合條件的元素在數(shù)組中的索引,可以使用findIndex方法,如果只需要查找指定元素在數(shù)組中的索引,可以使用indexof方法。
到此這篇關(guān)于js中find、findIndex、indexOf的用法和區(qū)別的文章就介紹到這了,更多相關(guān)js find findIndex indexOf內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
jquery和css3中的選擇器nth-child使用方法和用途示例
nth-child(),是CSS3中的一個偽類選擇符,JQuery選擇器繼承了CSS的部分語法,允許通過標(biāo)簽名、屬性名、內(nèi)容對DOM元素進(jìn)行快速、準(zhǔn)確的選擇。2023-03-03動態(tài)載入/刪除/更新外部 JavaScript/Css 文件的代碼
動態(tài)載入/刪除/更新外部 JavaScript/Css 文件的代碼2010-07-07如何獲取select下拉框的值(option沒有及有value屬性)
獲取select下拉框的值分為option沒有value屬性及有value屬性時的兩種情況,下面分別給出具體的實現(xiàn)代碼,需要的朋友可以參考下2013-11-11uniapp實現(xiàn)h5、app與微信小程序三端pdf文件下載和預(yù)覽功能
作為使用uni-app的小白來說,嘗試了好幾種方法,終于得到了我想要的效果,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)h5、app與微信小程序三端pdf文件下載和預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2022-12-12JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法,結(jié)合具體實例形式分析了javascript針對二叉樹節(jié)點最小值、最大值的相關(guān)查找操作實現(xiàn)技巧,需要的朋友可以參考下2017-04-04JavaScript 中的12種循環(huán)遍歷方法【總結(jié)】
本文給大家總結(jié)了12種JavaScript 中的1循環(huán)遍歷方法,每種方法通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
昨天群里面的朋友問了個比較有意思的問題,keydown,keyup,keypress事件的先后順序。2009-02-02