DDR爱好者之家 Design By 杰米
本文主要讲解ES6数组方法find()
与findIndex()
,关于JS的更多数组方法,可参考以下:
①JavaScript 内置对象之-Array
②ES5新增数组方法(例:map()、indexOf()、filter()等)
③ES6新增字符串扩张方法includes()、startsWith()、endsWith()
1. find()
该方法主要应用于查找第一个
符合条件的数组元素,即返回通过测试(函数内判断)的数组的第一个元素的值。
它的参数是一个回调函数,为数组中的每个元素都调用一次函数执行。在回调函数中可以写你要查找元素的条件,当条件成立为true
时,返回该元素,之后的值不会
再调用执行函数。如果没有
符合条件的元素,返回值为undefined
。
例:
① 以下代码在myArr数组中查找元素值大于5的元素,找到后立即返回,并不会继续往下执行。返回的结果为查找到的元素:
const myArr=[1,2,3,4,5,6,7,8,9]; var v=myArr.find(value=>value>5); console.log(v);
结果:
② 如果把条件改为>10,没有符合元素,则返回undefined:
const myArr=[1,2,3,4,5,6,7,8,9]; var v=myArr.find(value=>value>10); console.log(v);
结果:
③ 它的回调函数有三个参数。value:当前的数组元素。index:当前索引值。arr:被查找的数组。
例:
查找索引值为5的元素,结果显示6:
const myArr=[1,2,3,4,5,6]; var v=myArr.find((value,index,arr)=>{ return index===5; }); console.log(v);
结果:
注意:
- find() 对于空数组,函数是不会执行的。
- find() 并没有改变数组的原始值。
2. findIndex()
- findIndex() 方法返回传入一个测试条件(函数)符合条件的数组
第一个
元素位置。 - 当数组中的元素在测试条件时返回
true
时, findIndex() 返回符合条件的元素的索引位置
(注:find()返回的是元素
),之后的值不会
再调用执行函数。如果没有
符合条件的元素返回-1
(注:find()返回的是undefined
)。 - findIndex()与find()的
使用方法相同
,findIndex()当中的回调函数也是接收三个参数,与find()相同。 - findIndex()方法实现是通过循环遍历查找。应用场景广泛,可以查找大于等于小于,表达式可以随便写。实际上相当于一个for循环,只不过找到了你不需要自己退出。
语法:
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);
结果:
例②:
const myArr = [1,2,3,4,5,6,7,8,9]; function bigNum(ele){ return ele > 6; } console.log(myArr.findIndex(bigNum));
结果(也就是数组中第一个大于6的数,即“7”所在位置的索引):
例③:可以用来返回符合大于输入框中数字的数组索引
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() 对于空数组,函数是不会执行的。
- findIndex() 并没有改变数组的原始值。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
福利放送 2024/3/29
跑跑卡丁车单机版 2020-11-1(可与AI一起玩) 天翼云/百度云
更新日志
2024年03月29日
2024年03月29日
- 苏有朋.1994-珍惜的背包(第3张)【飞碟】【WAV+CUE】
- 《宝可梦:朱紫》“蓝之圆盘”IGN7分:性能优化仍旧灾难
- 《塞尔达传说:王国之泪》大获成功!多项年度数据表现优秀
- 应景!欧任用《塞尔达传说:王国之泪》堆雪人
- 杨采妮.1996-为所欲为(国专)【EMI百代】【WAV+CUE】
- 黎姿.1993-如果真的恋爱【华纳】【WAV+CUE】
- 朱婧汐.2024-VILLAIN反派角色【StreetVoic】【FLAC分轨】
- 《喷射战士3》最新祭典公布 1月13日举办
- NS日服年度下载榜公开:《王泪》不敌《西瓜游戏》
- 科乐美《心跳回忆GS》系列推出复刻版 2月14日登陆NS
- 林峰.2012-SELF-PORTRAIT【英皇娱乐】【WAV+CUE】
- TENSION.2004-Story新歌+精丫EMI百代】【FLAC分轨】
- 草蜢.2000-环球2000超巨星系列【环球】【WAV+CUE】
- 国行Switch开启元旦折扣!《马里奥奥德赛》7折促销
- 《塞尔达》官方账号感谢玩家支持 发布王泪最新壁纸