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的横向滚动条(滑动条)
Feb 24 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
JSONP原理及简单实现
Jun 08 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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文件缓存类示例分享
2015/01/30 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
PHP5.3新特性小结
2016/02/14 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
Vue通过input筛选数据
2020/10/26 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
基于ionic实现下拉刷新功能
2018/05/10 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
基于python的Paxos算法实现
2019/07/03 Python
Django CBV类的用法详解
2019/07/26 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
中学生运动会广播稿
2015/08/19 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
深度学习详解之初试机器学习
2021/04/14 Python