ES6中Array.find()和findIndex()函数的用法详解


Posted in Javascript onSeptember 16, 2017

ES6为Array增加了find(),findIndex函数。

find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。

findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。

他们的都是一个查找回调函数。

[1, 2, 3, 4].find((value, index, arr) => {
})

查找函数有三个参数。

value:每一次迭代查找的数组元素。

index:每一次迭代查找的数组元素索引。

arr:被查找的数组。

例:

1.查找元素,返回找到的值,找不到返回undefined。

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
var ret1 = arr1.find((value, index, arr) => {
 return value > 4
})
var ret2 = arr1.find((value, index, arr) => {
 return value > 14
})
console.log('%s', ret1)
console.log('%s', ret2)

结果:

undefined

2.查找元素,返回找到的index,找不到返回-1。

var ret3 = arr1.findIndex((value, index, arr) => {
 return value > 4
})

var ret4 = arr1.findIndex((value, index, arr) => {
 return value > 14
})
console.log('%s', ret3)
console.log('%s', ret4)

结果:

4
-1

3.查找NaN。

const arr2 = [1, 2, NaN, 4, 5, 6, 7, 8, 9, 10, 11]
var ret5 = arr2.find((value, index, arr) => {
 return Object.is(NaN, value)
})
var ret6 = arr2.findIndex((value, index, arr) => {
 return Object.is(NaN, value)
})
console.log('%s', ret5)
console.log('%s', ret6)

结果:

NaN
2    

总结

以上所述是小编给大家介绍的ES6中Array.find()和findIndex()函数的用法详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
详解JS构造函数中this和return
Sep 16 #Javascript
Angular使用Md5加密的解决方法
Sep 16 #Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 #Javascript
EasyUI创建人员树的实例代码
Sep 15 #Javascript
webpack构建react多页面应用详解
Sep 15 #Javascript
详解Vue中一种简易路由传参办法
Sep 15 #Javascript
JavaScript实现换肤功能
Sep 15 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
解读ES6中class关键字
2017/11/20 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
Vue 组件注册全解析
2020/12/17 Vue.js
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
python从入门到精通(DAY 2)
2015/12/20 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
python中JWT用户认证的实现
2020/05/18 Python
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
专业实习自我鉴定
2013/10/29 职场文书
团工委书记自荐书范文
2013/12/17 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
增员口号大全
2014/06/18 职场文书
医院领导班子整改方案
2014/10/01 职场文书
党员三严三实心得体会
2014/10/13 职场文书
家长学校教学计划
2015/01/19 职场文书
职代会闭幕词
2015/01/28 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js