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 相关文章推荐
关于jQuery的inArray 方法介绍
Oct 08 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 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 开源AJAX框架14种
2009/08/24 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
JavaScript中的闭包
2016/02/24 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
12步教你理解Python装饰器
2016/02/25 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Python 转换文本编码实现解析
2019/08/27 Python
python清空命令行方式
2020/01/13 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
大整数数相乘的问题
2012/07/22 面试题
医学生就业推荐表自我鉴定
2014/03/26 职场文书
财务人员担保书
2014/05/13 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
活动总结范文
2014/08/30 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
高一地理教学工作总结
2015/08/12 职场文书
班级管理经验交流材料
2015/11/02 职场文书