详解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 相关文章推荐
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
将数组写入txt文件 var_export
2009/04/21 PHP
PHP学习笔记之二
2011/01/17 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
smarty中post用法实例
2014/11/28 PHP
Linux中为php配置伪静态
2014/12/17 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
Python正则表达式介绍
2012/08/06 Python
python常见排序算法基础教程
2017/04/13 Python
python实现彩票系统
2020/06/28 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
解释一下钝化(Swap out)
2016/12/26 面试题
小学教师听课制度
2014/02/01 职场文书
募捐倡议书
2014/04/14 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
销售业务员岗位职责
2015/02/13 职场文书
机关工会工作总结2015
2015/05/26 职场文书
校运会新闻稿
2015/07/17 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
八年级英语教学反思
2016/02/15 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
Matlab如何实现矩阵复制扩充
2021/06/02 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server