javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > ES6 find() findIndex()

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

作者:huangfuyk

这篇文章主要介绍了详解ES6数组方法find()、findIndex()的总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文主要讲解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);

结果:

注意:

2. findIndex()

语法:

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

注意:

到此这篇关于详解ES6数组方法find()、findIndex()的总结的文章就介绍到这了,更多相关ES6 find() findIndex()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文