詳解ES6數(shù)組方法find()、findIndex()的總結(jié)
本文主要講解ES6數(shù)組方法find()
與findIndex()
,關(guān)于JS的更多數(shù)組方法,可參考以下:
①JavaScript 內(nèi)置對(duì)象之-Array
②ES5新增數(shù)組方法(例:map()、indexOf()、filter()等)
③ES6新增字符串?dāng)U張方法includes()、startsWith()、endsWith()
1. find()
該方法主要應(yīng)用于查找第一個(gè)
符合條件的數(shù)組元素,即返回通過測(cè)試(函數(shù)內(nèi)判斷)的數(shù)組的第一個(gè)元素的值。
它的參數(shù)是一個(gè)回調(diào)函數(shù),為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行。在回調(diào)函數(shù)中可以寫你要查找元素的條件,當(dāng)條件成立為true
時(shí),返回該元素,之后的值不會(huì)
再調(diào)用執(zhí)行函數(shù)。如果沒有
符合條件的元素,返回值為undefined
。
例:
① 以下代碼在myArr數(shù)組中查找元素值大于5的元素,找到后立即返回,并不會(huì)繼續(xù)往下執(zhí)行。返回的結(jié)果為查找到的元素:
const myArr=[1,2,3,4,5,6,7,8,9]; var v=myArr.find(value=>value>5); console.log(v);
結(jié)果:
② 如果把條件改為>10,沒有符合元素,則返回undefined:
const myArr=[1,2,3,4,5,6,7,8,9]; var v=myArr.find(value=>value>10); console.log(v);
結(jié)果:
③ 它的回調(diào)函數(shù)有三個(gè)參數(shù)。value:當(dāng)前的數(shù)組元素。index:當(dāng)前索引值。arr:被查找的數(shù)組。
例:
查找索引值為5的元素,結(jié)果顯示6:
const myArr=[1,2,3,4,5,6]; var v=myArr.find((value,index,arr)=>{ return index===5; }); console.log(v);
結(jié)果:
注意:
- find() 對(duì)于空數(shù)組,函數(shù)是不會(huì)執(zhí)行的。
- find() 并沒有改變數(shù)組的原始值。
2. findIndex()
- findIndex() 方法返回傳入一個(gè)測(cè)試條件(函數(shù))符合條件的數(shù)組
第一個(gè)
元素位置。 - 當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回
true
時(shí), findIndex() 返回符合條件的元素的索引位置
(注:find()返回的是元素
),之后的值不會(huì)
再調(diào)用執(zhí)行函數(shù)。如果沒有
符合條件的元素返回-1
(注:find()返回的是undefined
)。 - findIndex()與find()的
使用方法相同
,findIndex()當(dāng)中的回調(diào)函數(shù)也是接收三個(gè)參數(shù),與find()相同。 - findIndex()方法實(shí)現(xiàn)是通過循環(huán)遍歷查找。應(yīng)用場(chǎng)景廣泛,可以查找大于等于小于,表達(dá)式可以隨便寫。實(shí)際上相當(dāng)于一個(gè)for循環(huán),只不過找到了你不需要自己退出。
語法:
array.findIndex(function(currentValue, index, arr), thisValue);
例①:
const myArr=[ { id:1, Name:"張三" }, { id:2, Name:"李四" }, { id:3, Name:"王五" }, { id:4, Name:"趙六" } ]; var i0=myArr.findIndex((value)=>value.id==1); console.log(i0); var i1=myArr.findIndex((value)=>value.id==2); console.log(i1); var i2=myArr.findIndex((value)=>value.id==3); console.log(i2); var i3=myArr.findIndex((value)=>value.id==4); console.log(i3); var i4=myArr.findIndex((value)=>value.id==5); console.log(i4);
結(jié)果:
例②:
const myArr = [1,2,3,4,5,6,7,8,9]; function bigNum(ele){ return ele > 6; } console.log(myArr.findIndex(bigNum));
結(jié)果(也就是數(shù)組中第一個(gè)大于6的數(shù),即“7”所在位置的索引):
例③:可以用來返回符合大于輸入框中數(shù)字的數(shù)組索引
var ages = [2,4,6,8,10]; function checkAdult(age) { return age >= document.getElementById("ageToCheck").value; } function myFunction() { document.getElementById("demo").innerHTML = ages.findIndex(checkAdult); }
注意:
- findIndex() 對(duì)于空數(shù)組,函數(shù)是不會(huì)執(zhí)行的。
- findIndex() 并沒有改變數(shù)組的原始值。
到此這篇關(guān)于詳解ES6數(shù)組方法find()、findIndex()的總結(jié)的文章就介紹到這了,更多相關(guān)ES6 find() findIndex()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)省級(jí)聯(lián)動(dòng)(數(shù)據(jù)結(jié)構(gòu)優(yōu)化)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)省級(jí)聯(lián)動(dòng),數(shù)據(jù)結(jié)構(gòu)優(yōu)化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07JavaScript 抽獎(jiǎng)效果實(shí)現(xiàn)代碼 數(shù)字跳動(dòng)版
直接上代碼吧,效果可以復(fù)制了去看2009-11-11escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法
這篇文章主要介紹了escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法,需要的朋友可以參考下2014-07-07JS實(shí)現(xiàn)的簡(jiǎn)單下拉框聯(lián)動(dòng)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單下拉框聯(lián)動(dòng)功能,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-05-05微信小程序自定義掃碼功能界面的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序自定義掃碼功能界面的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07JS獲取時(shí)間的相關(guān)函數(shù)及時(shí)間戳與時(shí)間日期之間的轉(zhuǎn)換
時(shí)間戳和時(shí)間日期的轉(zhuǎn)換是常見的操作,下面就通過代碼實(shí)例介紹一下如何實(shí)現(xiàn)它們之間的相互轉(zhuǎn)換,感興趣的朋友一起學(xué)習(xí)吧2016-02-02javascript實(shí)現(xiàn)簡(jiǎn)單打字游戲
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單打字游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10簡(jiǎn)單實(shí)現(xiàn)JS計(jì)算器功能
這篇文章主要教大家簡(jiǎn)單實(shí)現(xiàn)JS計(jì)算器功能,實(shí)現(xiàn)小數(shù)點(diǎn)校驗(yàn),重復(fù)計(jì)算,以及大量更符合用戶體驗(yàn)的操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12