DDR爱好者之家

详解ES6数组方法find()、findIndex()的总结
站长资源 2024/11/24 佚名
33 1538
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);

结果：

详解ES6数组方法find()、findIndex()的总结

② 如果把条件改为>10，没有符合元素，则返回undefined:

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>10);
console.log(v);

结果：

详解ES6数组方法find()、findIndex()的总结

③ 它的回调函数有三个参数。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);

结果：

详解ES6数组方法find()、findIndex()的总结

注意：

  • 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);

结果：

详解ES6数组方法find()、findIndex()的总结

例②：

const myArr = [1,2,3,4,5,6,7,8,9];
function bigNum(ele){
 return ele > 6;
}
console.log(myArr.findIndex(bigNum));

结果（也就是数组中第一个大于6的数，即“7”所在位置的索引）：

详解ES6数组方法find()、findIndex()的总结

例③：可以用来返回符合大于输入框中数字的数组索引

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 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米