详解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 相关文章推荐
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 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树的代码,可以嵌套任意层
2006/10/09 PHP
如何做到多笔资料的同步
2006/10/09 PHP
php 正则表达式小结
2009/08/31 PHP
php fread读取文件注意事项
2016/09/24 PHP
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python随机数random模块使用指南
2016/09/09 Python
Python爬取成语接龙类网站
2018/10/19 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
迎元旦广播稿
2014/02/22 职场文书
学生干部培训方案
2014/06/12 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
社会实践心得体会范文
2016/01/14 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript