详解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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
javascript第一课
Feb 27 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
java必学必会之static关键字
2015/12/03 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python Pillow Image Invert
2019/01/22 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python开发前景如何
2020/06/11 Python
一套C#面试题
2013/10/09 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
保护野生动物倡议书
2014/05/16 职场文书
建筑工地质量标语
2014/06/12 职场文书
作风建设年活动总结
2014/08/27 职场文书
防火标语大全
2014/10/06 职场文书
2015大学迎新标语
2015/07/16 职场文书
检讨书之工作不认真
2019/08/14 职场文书
mysql 获取时间方式
2022/03/20 MySQL