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


Posted in Javascript onMay 12, 2020

本文主要讲解ES6数组方法find()findIndex(),关于JS的更多数组方法,可参考以下:

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() 并没有改变数组的原始值。

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

Javascript 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
深入理解javascript变量声明
Nov 20 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
Apr 27 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
Node.js API详解之 console模块用法详解
May 12 #Javascript
基于JS实现视频上传显示进度条
May 12 #Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 #Javascript
Vue实现图片轮播组件思路及实例解析
May 11 #Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 #Javascript
You might like
php的array_multisort()使用方法介绍
2012/05/16 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
六行python代码的爱心曲线详解
2019/05/17 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
python画图常规设置方式
2020/03/05 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
幼儿园教师教育感言
2014/02/28 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
Python道路车道线检测的实现
2021/06/27 Python
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL