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访问样式表代码
Oct 15 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
node.js文件上传处理示例
Oct 27 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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 adodb连接mssql解决乱码问题
2009/06/12 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
php数组去重实例及分析
2013/11/26 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
军人离婚协议书样本
2014/10/21 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
三下乡个人总结
2015/03/04 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android